/* Valle on Tour Backend-Demo. Drei Oberflächen über denselben Bausteinen, je Look eigene Tokens und Aufbau. */
:root {
  --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --dl-h: 48px; --kopf-h: 56px; --nav-b: 236px;
  --grund: #f3f4f6; --flaeche: #fff; --flaeche-2: #f8f9fb; --linie: #e3e6eb; --linie-stark: #c9ced6;
  --text: #1b1e24; --leise: #5c6370; --ganz-leise: #8a919c;
  --akzent: #2457d6; --akzent-dunkel: #1a43ad; --akzent-hell: #e9effc; --auf-akzent: #fff;
  --gut: #1d7a4b; --gut-hell: #e4f4ea; --warn: #8a5100; --warn-hell: #fdf1dc; --fehler: #b3261e; --fehler-hell: #fcebea;
  --r-karte: 12px; --r-kn: 8px; --r-ein: 8px; --kn-h: 36px;
  --schatten-karte: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 0 rgba(16, 24, 40, .02);
  --schatten-gross: 0 2px 6px rgba(16, 24, 40, .08), 0 24px 64px rgba(16, 24, 40, .22);
  --kn-haupt: var(--akzent); --kn-haupt-hover: var(--akzent-dunkel); --kn-haupt-text: #fff;
  --nav-bg: #fff; --nav-text: #2b3038; --nav-an-bg: var(--akzent-hell); --nav-an-text: var(--akzent);
  --kopf-bg: #fff; --kopf-text: var(--text); --basis: 14px; --h1: 24px;
  --fokus: 0 0 0 3px color-mix(in srgb, var(--akzent) 28%, transparent);
}
/* Wix-Look: hellgrauer Grund, weiße Karten, Pillen-Knöpfe, kräftiges Blau */
.look-wix {
  --grund: #f0f3f6; --linie: #dfe5eb; --linie-stark: #c3ccd5; --text: #162d3d; --leise: #577083; --ganz-leise: #8aa0b0;
  --akzent: #116dff; --akzent-dunkel: #0f5fe0; --akzent-hell: #e7f0ff;
  --r-karte: 8px; --r-kn: 999px; --r-ein: 6px; --kn-h: 36px; --h1: 28px;
  --schatten-karte: 0 1px 3px rgba(22, 45, 61, .08), 0 2px 10px rgba(22, 45, 61, .04);
  --nav-bg: #fff; --nav-text: #162d3d; --nav-an-bg: #e7f0ff; --nav-an-text: #116dff; --nav-b: 232px; --kopf-h: 54px;
}
/* Shopify-Look: ruhiges Grau, dunkle Kopfleiste, kompakte 13-px-Schrift, dunkler Hauptknopf */
.look-shopify {
  --grund: #f1f1f1; --linie: #e3e3e3; --linie-stark: #cccccc; --text: #303030; --leise: #616161; --ganz-leise: #8a8a8a;
  --akzent: #005bd3; --akzent-dunkel: #004299; --akzent-hell: #eaf4ff; --basis: 13px; --h1: 20px;
  --r-karte: 12px; --r-kn: 8px; --r-ein: 8px; --kn-h: 30px;
  --schatten-karte: 0 1px 0 rgba(26, 26, 26, .07), 0 0 0 1px rgba(26, 26, 26, .06);
  --kn-haupt: #303030; --kn-haupt-hover: #1a1a1a; --kn-haupt-text: #fff;
  --nav-bg: #ebebeb; --nav-text: #303030; --nav-an-bg: #fafafa; --nav-an-text: #1a1a1a; --nav-b: 240px; --kopf-h: 56px;
  --kopf-bg: #1a1a1a; --kopf-text: #e3e3e3;
}
/* Pult-Look: Seite im Mittelpunkt, Tafel rechts */
.look-pult { --kopf-h: 60px; --nav-b: 84px; --h1: 24px; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 400 var(--basis, 14px)/1.45 var(--schrift); color: var(--text); background: #111317; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in srgb, var(--akzent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--akzent); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0; }
kbd { font: 500 11px/1 var(--schrift); padding: 3px 5px; border-radius: 5px; border: 1px solid currentColor; opacity: .55; }
mark { background: #fff1a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leise { color: var(--leise); } .klein { font-size: 12.5px; } .mono { font-family: var(--mono); font-size: .93em; letter-spacing: -.01em; }
.r { text-align: right; } .null { color: var(--fehler); } .gut { color: var(--gut); }
.ico { flex: none; display: block; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }

/* ---------- Laden / Fehler ---------- */
.lader { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--akzent) 20%, transparent); border-top-color: var(--akzent); animation: dreh .7s linear infinite; display: inline-block; }
.lader.klein { width: 13px; height: 13px; border-width: 2px; vertical-align: -2px; }
@keyframes dreh { to { transform: rotate(360deg); } }
.start-laedt, .start-fehler { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 14px; background: #f3f4f6; color: #5c6370; text-align: center; padding: 24px; }
.start-fehler h1 { color: #1b1e24; font-size: 22px; }

/* ---------- App-Gerüst ---------- */
.app { height: 100dvh; display: grid; grid-template-rows: var(--dl-h) var(--kopf-h) minmax(0, 1fr); background: var(--grund); }
.koerper { display: grid; grid-template-columns: var(--nav-b) minmax(0, 1fr); min-height: 0; position: relative; }
.inhalt { overflow: auto; min-width: 0; scroll-behavior: smooth; }
.inhalt.vollflaeche { overflow: hidden; }
.kopf .menue-knopf, .menue-schleier { display: none; }

/* Demo-Leiste (neutral, unsere) */
.demo-leiste { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 14px; background: #111317; color: #c9cdd4; font-size: 13px; position: relative; z-index: 30; }
.dl-links { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dl-marke { width: 26px; height: 26px; border-radius: 7px; background: #fff; color: #111317; display: grid; place-items: center; font: 800 14px/1 var(--schrift); }
.dl-titel { color: #fff; font-weight: 600; white-space: nowrap; } .dl-titel span { color: #8b919b; font-weight: 500; margin-left: 4px; }
.dl-umschalter { display: flex; gap: 2px; padding: 3px; background: #23262c; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.dl-umschalter button { all: unset; cursor: pointer; padding: 0 16px; height: 30px; display: inline-flex; align-items: center; border-radius: 7px; font-weight: 600; font-size: 13px; color: #b3b8c0; transition: background .2s var(--ease), color .2s var(--ease); white-space: nowrap; }
.dl-umschalter button:hover { color: #fff; }
.dl-umschalter button[aria-checked=true] { background: #fff; color: #111317; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.dl-umschalter button:focus-visible { outline: 2px solid #8fb0ff; }
.dl-rechts { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.dl-sandbox { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: #9aa0a9; white-space: nowrap; }
.dl-knopf { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 7px; color: #d6d9de; font-weight: 500; white-space: nowrap; }
.dl-knopf:hover { background: #23262c; color: #fff; }

/* Kopfleisten */
.kopf { display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--kopf-bg); color: var(--kopf-text); border-bottom: 1px solid var(--linie); min-width: 0; z-index: 20; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #d7e6ff; color: #0f4fb8; display: grid; place-items: center; font: 700 12px/1 var(--schrift); }
.wix-site { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
.wix-site-bild { width: 30px; height: 30px; border-radius: 6px; background: #162d3d; color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--schrift); }
.wix-suche { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; margin-left: 18px; border-radius: 999px; background: #f0f3f6; color: #577083; width: min(340px, 30vw); }
.wix-suche kbd { margin-left: auto; }
.kopf-shopify { border-bottom: 0; gap: 12px; }
.sp-logo { color: #e3e3e3; display: grid; place-items: center; width: 34px; }
.sp-suche { all: unset; cursor: pointer; margin: 0 auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; width: min(560px, 44vw); border-radius: 10px; background: #303030; color: #b5b5b5; box-shadow: inset 0 0 0 1px #4a4a4a; transition: background .15s; }
.sp-suche:hover { background: #3a3a3a; }
.sp-suche kbd { margin-left: auto; }
.kopf-shopify .kopf-rechts { margin-left: 0; }
.sp-glocke { color: #e3e3e3; background: transparent; border: 0; }
.sp-shop { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 9px; color: #e3e3e3; font-weight: 600; font-size: 13px; }
.sp-shop:hover { background: #303030; }
.sp-shop-zeichen { width: 28px; height: 28px; border-radius: 7px; background: #36b37e; color: #0b3b26; display: grid; place-items: center; font: 800 11px/1 var(--schrift); }
.kopf-pult { gap: 18px; }
.pult-name { display: flex; flex-direction: column; line-height: 1.15; } .pult-name b { font-size: 15px; } .pult-name .leise { font-size: 12px; }
.pult-suche { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linie); color: var(--leise); width: min(320px, 28vw); margin-left: 12px; }
.pult-suche kbd { margin-left: auto; }
.pult-stand { display: inline-flex; align-items: center; gap: 6px; color: var(--leise); font-size: 13px; margin-right: 8px; }
.pult-stand .ico { color: var(--gut); }

/* Seitenleisten */
.seitenleiste { background: var(--nav-bg); border-right: 1px solid var(--linie); padding: 14px 10px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.seitenleiste button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 11px; width: 100%; padding: 0 12px; height: 36px; border-radius: 8px; color: var(--nav-text); font-weight: 500; transition: background .15s var(--ease), color .15s var(--ease); }
.seitenleiste button:hover { background: color-mix(in srgb, var(--nav-text) 6%, transparent); }
.seitenleiste button.an { background: var(--nav-an-bg); color: var(--nav-an-text); font-weight: 600; }
.seitenleiste button:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.sl-gruppe { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.sl-titel { font-size: 12px; font-weight: 600; color: var(--ganz-leise); padding: 6px 12px 4px; }
.sl-wix .sl-titel { text-transform: none; color: #577083; }
.sl-wix button.an { box-shadow: inset 3px 0 0 #116dff; border-radius: 0 8px 8px 0; }
.sl-shopify { padding: 10px 8px; border-right: 0; gap: 0; }
.sl-shopify button { height: 32px; font-weight: 600; font-size: 13px; padding: 0 10px; }
.sl-shopify button.an { box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .04); }
.sl-shopify button.unter { padding-left: 39px; font-weight: 500; height: 28px; }
.sl-shopify .sl-titel { padding-top: 14px; font-size: 12px; color: #616161; }
.sl-zahl { margin-left: auto; font-size: 11.5px; font-weight: 600; background: #e3e3e3; padding: 1px 7px; border-radius: 8px; }
.sl-unten { margin-top: auto; }
.pult-schiene { background: #fff; border-right: 1px solid var(--linie); display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 8px; }
.pult-schiene button { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px 9px; border-radius: 10px; color: var(--leise); font-size: 11.5px; font-weight: 600; text-align: center; transition: background .15s var(--ease), color .15s var(--ease); }
.pult-schiene button:hover { background: var(--flaeche-2); color: var(--text); }
.pult-schiene button.an { background: var(--akzent-hell); color: var(--akzent); }
.pult-unten { display: none; }

/* ---------- Seiten-Inhalt ---------- */
.seite { padding: 28px 32px 72px; max-width: 1360px; margin: 0 auto; }
.seitenkopf { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; min-width: 0; }
.seitenkopf h1 { font-size: var(--h1); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-wix .seitenkopf h1 { font-weight: 600; }
.unterzeile { color: var(--leise); margin-top: 4px; max-width: 70ch; }
.seitenkopf-aktionen { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.karte { background: var(--flaeche); border-radius: var(--r-karte); box-shadow: var(--schatten-karte); padding: 20px; }
.look-pult .karte { box-shadow: none; border: 1px solid var(--linie); }
.karte + .karte { margin-top: 16px; }
.karte-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.karte-kopf h2 { font-size: 15px; font-weight: 650; }
.look-shopify .karte-kopf h2 { font-size: 13px; font-weight: 650; }
.look-wix .karte-kopf h2 { font-size: 16px; font-weight: 600; }
.karte-kopf > :last-child:not(h2) { margin-left: auto; }
.karte-tabelle { padding: 0; overflow: hidden; }

/* Knöpfe */
.kn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--kn-h); padding: 0 14px; border-radius: var(--r-kn); border: 1px solid transparent; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s var(--ease), box-shadow .15s var(--ease), color .15s, transform .12s var(--ease); user-select: none; }
.kn:active:not(:disabled) { transform: scale(.98); }
.kn:disabled { opacity: .45; cursor: not-allowed; }
.kn-haupt { background: var(--kn-haupt); color: var(--kn-haupt-text); }
.kn-haupt:hover:not(:disabled) { background: var(--kn-haupt-hover); }
.kn-zweit { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.kn-zweit:hover:not(:disabled) { background: var(--flaeche-2); }
.kn-geist { background: transparent; color: var(--text); }
.kn-geist:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 7%, transparent); }
.kn-gefahr { background: var(--fehler); color: #fff; }
.kn-gefahr:hover { background: #8f1d17; }
.kn-geist-gefahr { background: transparent; color: var(--fehler); }
.kn-geist-gefahr:hover { background: var(--fehler-hell); }
.kn-icon { width: var(--kn-h); padding: 0; flex: none; }
.kn-klein { height: 30px; padding: 0 10px; font-size: 13px; gap: 6px; }
.kn-klein.kn-icon { width: 30px; }
.look-wix .kn { font-size: 14px; padding: 0 18px; }
.look-wix .kn-zweit { color: #116dff; border-color: #116dff; }
.look-wix .kn-zweit:hover:not(:disabled) { background: #e7f0ff; }
.look-wix .kn-klein { padding: 0 12px; font-size: 13px; }
.look-wix .kn-icon { padding: 0; }
.look-shopify .kn { font-size: 13px; padding: 0 12px; border: 0; }
.look-shopify .kn-haupt { background: linear-gradient(#3d3d3d, #262626); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 #000, 0 1px 1px rgba(0, 0, 0, .2); }
.look-shopify .kn-haupt:hover:not(:disabled) { background: linear-gradient(#333, #1a1a1a); }
.look-shopify .kn-zweit { background: #fff; box-shadow: inset 0 -1px 0 #b5b5b5, 0 0 0 1px #e3e3e3; }
.look-shopify .kn-zweit:hover:not(:disabled) { background: #f7f7f7; }
.look-shopify .kn-icon { padding: 0; }
.kn-weiss { background: #fff; color: #303030; } .kn-weiss:hover { background: #f1f1f1; }
.kn-dunkel-zweit { background: #3a3a3a; color: #e3e3e3; } .kn-dunkel-zweit:hover { background: #4a4a4a; }

/* Felder */
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld + .feld, .feld-reihe + .feld, .feld + .feld-reihe, .feld-reihe + .feld-reihe { margin-top: 16px; }
.feld-kopf { display: flex; align-items: baseline; gap: 8px; }
.feld label, .feld-kopf label { font-weight: 600; font-size: 13px; color: var(--text); }
.look-shopify .feld label { font-weight: 500; }
.hilfe { color: var(--leise); font-size: 12.5px; }
.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.ein { width: 100%; height: 38px; padding: 0 11px; border-radius: var(--r-ein); border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.look-shopify .ein { height: 32px; border-color: #8a8a8a; border-radius: 8px; }
.ein:hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.ein:focus { outline: none; border-color: var(--akzent); box-shadow: var(--fokus); }
.ein::placeholder { color: var(--ganz-leise); }
.ein-fest { display: flex; align-items: center; background: var(--flaeche-2); color: var(--leise); }
.ein.mono, .ein-mono { font-family: var(--mono); font-size: 13px; }
.ein-wahl { position: relative; display: inline-flex; min-width: 0; }
.ein-wahl select { appearance: none; padding-right: 34px; cursor: pointer; }
.ein-wahl .ico { position: absolute; right: 10px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--leise); }
.feld .ein-wahl { display: flex; }
.ein-einheit { position: relative; display: flex; }
.ein-einheit .ein { padding-right: 30px; text-align: right; }
.ein-einheit span { position: absolute; right: 11px; top: 50%; translate: 0 -50%; color: var(--leise); pointer-events: none; }
.ein-einheit.klein .ein { height: 30px; width: 130px; }
.ein-zahl { width: 84px; text-align: right; }
.ein-zahl.null { color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 45%, var(--linie-stark)); }
.haken-liste { display: flex; flex-direction: column; gap: 2px; }
.haken-liste label, .haken { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 500 !important; cursor: pointer; }
.kat-liste { max-height: 340px; overflow: auto; margin: -4px -6px; padding: 0 6px; }
input[type=checkbox], input[type=radio] { accent-color: var(--akzent); width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }
.schalter { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-bahn { width: 38px; height: 22px; border-radius: 11px; background: #c3ccd5; position: relative; transition: background .2s var(--ease); flex: none; }
.schalter-bahn span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .22s var(--ease); }
.schalter input:checked + .schalter-bahn { background: var(--akzent); }
.schalter input:checked + .schalter-bahn span { transform: translateX(16px); }
.schalter input:focus-visible + .schalter-bahn { box-shadow: var(--fokus); }
.schalter-txt { font-weight: 500; }

/* Segmente */
.segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.segment button { all: unset; cursor: pointer; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 7px; font-weight: 600; font-size: 12.5px; color: var(--leise); transition: background .15s var(--ease), color .15s; white-space: nowrap; }
.segment button[aria-selected=true], .segment button[aria-pressed=true], .segment button[aria-checked=true] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.segment button:focus-visible { outline: 2px solid var(--akzent); }
.segment-icons button { padding: 0 8px; }
.segment-voll { display: flex; } .segment-voll button { flex: 1; }

/* Abzeichen */
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-aktiv, .badge-o-bezahlt, .badge-o-versendet { background: #dff3e6; color: #15603a; }
.badge-entwurf, .badge-o-offen { background: #eef0f3; color: #4a5260; }
.badge-o-neu { background: #fff1d6; color: #7a4a00; }
.badge-o-storniert { background: var(--fehler-hell); color: var(--fehler); }
.badge-beispiel { background: #ece9ff; color: #4b3bb5; }
.look-shopify .badge { border-radius: 8px; height: 20px; padding: 0 8px; font-weight: 550; }
.look-shopify .badge-aktiv { background: #affebf; color: #014b40; }
.look-shopify .badge-entwurf { background: #d5ebff; color: #003a5a; }
.look-wix .badge-aktiv { background: #e3f7ec; color: #0f7a3f; }
.etikett { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; color: #116dff; background: #e7f0ff; padding: 1px 7px; border-radius: 4px; vertical-align: 1px; }

/* Tabellen */
.tab-leiste { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.tab-leiste .ein-wahl select { height: 34px; width: auto; }
.look-shopify .tab-leiste .ein-wahl select { height: 30px; }
.suchfeld { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 11px; border-radius: var(--r-ein); border: 1px solid var(--linie-stark); background: var(--flaeche); flex: 1 1 260px; max-width: 460px; color: var(--leise); transition: border-color .15s, box-shadow .15s; }
.suchfeld:focus-within { border-color: var(--akzent); box-shadow: var(--fokus); color: var(--text); }
.suchfeld input { all: unset; flex: 1; min-width: 0; color: var(--text); height: 100%; }
.suchfeld input::placeholder { color: var(--ganz-leise); }
.suchfeld-gross { height: 46px; max-width: none; font-size: 16px; }
.look-shopify .suchfeld { height: 30px; border-color: #8a8a8a; }
.treffer { margin-left: auto; color: var(--leise); font-size: 13px; white-space: nowrap; }
.tabs-reiter { display: flex; gap: 2px; }
.tabs-reiter button { all: unset; cursor: pointer; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--leise); }
.tabs-reiter button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.tabs-reiter button[aria-selected=true] { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.tabs-reiter .zahl { font-size: 11.5px; color: var(--ganz-leise); }
.tabs-gross { margin-bottom: 20px; border-bottom: 1px solid var(--linie); gap: 4px; }
.tabs-gross button { height: 42px; border-radius: 0; padding: 0 4px; margin-right: 18px; font-size: 14px; box-shadow: inset 0 -2px 0 transparent; }
.tabs-gross button:hover { background: none; }
.tabs-gross button[aria-selected=true] { background: none; box-shadow: inset 0 -2px 0 var(--akzent); color: var(--text); }
.tabelle-wrap { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--leise); padding: 10px 12px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tbody tr { transition: background .12s; }
.tabelle tbody tr:hover { background: color-mix(in srgb, var(--akzent) 4%, var(--flaeche)); cursor: pointer; }
.tabelle tbody tr.gewaehlt { background: color-mix(in srgb, var(--akzent) 8%, var(--flaeche)); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr.aus { opacity: .45; }
.th-wahl { width: 40px; padding-right: 0 !important; } .th-bild { width: 60px; padding-right: 4px !important; } .th-aktion { width: 52px; }
.td-name a { color: var(--text); font-weight: 600; text-decoration: none; }
.td-name a:hover { text-decoration: underline; }
.unter { display: block; color: var(--leise); font-size: 12.5px; margin-top: 2px; font-weight: 400; }
.tabelle-shopify td { padding: 7px 12px; } .tabelle-shopify th { background: #f7f7f7; font-size: 12px; padding: 8px 12px; }
.tabelle-shopify .td-name a { font-weight: 650; }
.tabelle-wix th { background: #fff; color: #577083; font-weight: 500; font-size: 13px; padding: 14px 12px; }
.tabelle-wix td { padding: 12px; }
.daumen { display: grid; place-items: center; border-radius: 8px; background: #f4f5f7; overflow: hidden; color: var(--ganz-leise); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); flex: none; }
.daumen img { width: 100%; height: 100%; object-fit: contain; display: block; }
.look-shopify .daumen { border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e3e3e3; }
.leer { display: grid; justify-items: center; gap: 8px; padding: 56px 20px; text-align: center; color: var(--leise); }
.leer b { color: var(--text); font-size: 15px; }
.massen { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche)); border-bottom: 1px solid var(--linie); animation: auf .2s var(--ease); }
.massen b { margin-right: 8px; }
@keyframes auf { from { opacity: 0; transform: translateY(-4px); } }
.wix-statistik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: #fff; border-radius: 8px; box-shadow: var(--schatten-karte); margin-bottom: 16px; }
.wix-statistik div { padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; }
.wix-statistik div + div { border-left: 1px solid var(--linie); }
.wix-statistik span { color: var(--leise); font-size: 13px; } .wix-statistik b { font-size: 22px; font-weight: 600; }
.menue { position: relative; }
.menue-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 200px; padding: 6px; background: var(--flaeche); border-radius: 10px; box-shadow: var(--schatten-gross); animation: auf .16s var(--ease); }
.menue-liste button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 7px; font-weight: 500; }
.menue-liste button:hover { background: var(--flaeche-2); }
.menue-liste .gefahr { color: var(--fehler); }

/* ---------- Editor ---------- */
.ed { height: calc(100dvh - var(--dl-h) - var(--kopf-h)); display: grid; grid-template-columns: minmax(0, 1fr); }
.ed.mit-vorschau { grid-template-columns: minmax(0, 1fr) clamp(440px, 44%, 860px); }
.ed-haupt { overflow: auto; padding: 24px 32px 80px; container-type: inline-size; }
.ed-haupt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.ed-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ed-seite { position: sticky; top: 0; }
.ed-seite .karte + .karte, .ed-spalte .karte + .karte { margin-top: 16px; }
@container (max-width: 820px) { .ed-raster { grid-template-columns: minmax(0, 1fr); } .ed-seite { position: static; } }
.ed-kopf h1 { font-size: var(--h1); }
.wix-ed-kopf .seitenkopf h1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; flex: 1; }
.wix-ed-kopf .seitenkopf-aktionen { flex-wrap: nowrap; }
.ed-kopf .badge { flex: none; }
.wix-ed-kopf .brot { display: flex; align-items: center; gap: 6px; color: var(--leise); font-size: 13px; margin-bottom: 6px; }
.wix-ed-kopf .brot a { color: #116dff; text-decoration: none; }
.wix-ed-kopf .brot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-sicherung { position: fixed; top: var(--dl-h); left: 0; right: 0; height: var(--kopf-h); z-index: 25; background: #1a1a1a; color: #e3e3e3; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 calc(var(--nav-b) + 16px); font-weight: 600; animation: einblenden .2s var(--ease); }
.sp-sicherung > span { display: flex; align-items: center; gap: 8px; }
.sp-sicherung > div { display: flex; gap: 8px; }
@keyframes einblenden { from { opacity: 0; } }
.ed-vorschau { display: flex; flex-direction: column; min-height: 0; height: 100%; background: #e8eaee; border-left: 1px solid var(--linie); animation: rein .28s var(--ease); }
@keyframes rein { from { opacity: 0; transform: translateX(16px); } }
.ed-vorschau-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.live-punkt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gut); margin-left: auto; white-space: nowrap; }
.live-punkt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22a35a; box-shadow: 0 0 0 0 rgba(34, 163, 90, .5); animation: puls 2s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 6px rgba(34, 163, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 163, 90, 0); } }
.vorschau { flex: 1; display: flex; min-height: 0; }
.vorschau-buehne { flex: 1; position: relative; overflow: hidden; }
.vorschau-rahmen { position: absolute; inset: 0; }
.vorschau iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); }
.vorschau iframe.vorne { opacity: 1; pointer-events: auto; z-index: 1; }
.g-handy .vorschau-rahmen { inset: 12px auto auto 50%; width: 390px; translate: -50% 0; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 9px #16181c, 0 18px 50px rgba(0, 0, 0, .3); }
.vorschau-laedt { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; background: rgba(232, 234, 238, .6); }

/* Medien */
.medien { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; border-radius: 10px; transition: box-shadow .15s, background .15s; }
.medien.ziel { box-shadow: 0 0 0 2px var(--akzent); background: var(--akzent-hell); }
.medien-gross .m-bild:first-child { grid-column: span 2; grid-row: span 2; }
.m-bild { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #f4f5f7; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); cursor: grab; }
.m-bild img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.m-bild:active { cursor: grabbing; }
.m-haupt { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .92); padding: 3px 7px; border-radius: 5px; }
.m-aktionen { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transform: translateY(-3px); transition: opacity .15s var(--ease), transform .15s var(--ease); }
.m-bild:hover .m-aktionen, .m-bild:focus-within .m-aktionen { opacity: 1; transform: none; }
.m-aktionen button { all: unset; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .95); color: #1b1e24; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.m-aktionen button:hover { background: #fff; color: var(--akzent); }
.m-punkt { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; background: var(--akzent); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); pointer-events: none; }
.m-laedt { display: grid; place-items: center; }
.m-neu { all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--linie-stark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--leise); text-align: center; padding: 8px; font-size: 12px; transition: border-color .15s, background .15s, color .15s; }
.m-neu b { color: var(--text); font-size: 13px; }
.m-neu:hover { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent); }
.medien:not(:has(.m-bild)) .m-neu { grid-column: 1 / -1; aspect-ratio: auto; min-height: 150px; }

/* Fokuspunkt */
.fokus { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; }
.fokus-links { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fokus-zeile { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.fokus-flaeche { position: relative; align-self: center; max-width: 100%; border-radius: 10px; overflow: hidden; cursor: crosshair; touch-action: none; background: repeating-conic-gradient(#f1f2f4 0 25%, #fff 0 50%) 0 0 / 16px 16px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.fokus-flaeche img { display: block; max-width: 100%; max-height: 52vh; user-select: none; -webkit-user-drag: none; }
.fokus-punkt { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .35), inset 0 0 0 7px rgba(36, 87, 214, .0); pointer-events: none; transition: left .08s linear, top .08s linear; }
.fokus-punkt::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.fokus-rechts { display: flex; flex-direction: column; gap: 12px; }
.fokus-titel { font-weight: 600; font-size: 13px; }
.fokus-vs { margin: 0; } .fokus-vs div { border-radius: 8px; overflow: hidden; background: #f4f5f7; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.fokus-vs img { width: 100%; height: 100%; display: block; transition: object-position .2s var(--ease); }
.fokus-vs figcaption { font-size: 12px; color: var(--leise); margin-top: 5px; }
.fokus-rechts .fokus-vs:nth-of-type(1) div { width: 62%; }

/* Rich Text */
.rt { border: 1px solid var(--linie-stark); border-radius: var(--r-ein); background: var(--flaeche); transition: border-color .15s, box-shadow .15s; }
.rt:focus-within { border-color: var(--akzent); box-shadow: var(--fokus); }
.rt-leiste { display: flex; align-items: center; gap: 2px; padding: 5px 6px; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.rt-leiste button { all: unset; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: var(--leise); }
.rt-leiste button:hover:not(:disabled) { background: var(--flaeche-2); color: var(--text); }
.rt-leiste button.an { background: var(--akzent-hell); color: var(--akzent); }
.rt-leiste button:disabled { opacity: .35; }
.rt-format select { all: unset; height: 30px; padding: 0 28px 0 9px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; }
.rt-format select:hover { background: var(--flaeche-2); }
.rt-format .ico { right: 7px; }
.rt-trenn { width: 1px; height: 18px; background: var(--linie); margin: 0 4px; }
.rt-platz { flex: 1; }
.rt-text { min-height: 220px; max-height: 520px; overflow: auto; padding: 12px 14px; outline: none; line-height: 1.6; }
.rt-text > :first-child { margin-top: 0; } .rt-text p { margin: 0 0 .8em; } .rt-text h3 { font-size: 16px; margin: 1.1em 0 .45em; } .rt-text h4 { font-size: 14.5px; margin: 1em 0 .4em; } .rt-text ul, .rt-text ol { margin: 0 0 .8em; padding-left: 1.3em; } .rt-text li { margin: .2em 0; }
.rt-html { display: block; width: 100%; min-height: 260px; border: 0; padding: 12px 14px; font: 12.5px/1.55 var(--mono); resize: vertical; outline: none; background: #fbfbfc; border-radius: 0 0 var(--r-ein) var(--r-ein); }

/* Varianten */
.varianten { display: flex; flex-direction: column; gap: 14px; }
.opt-zeile { padding: 12px; border: 1px solid var(--linie); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.opt-kopf { display: flex; gap: 8px; align-items: center; }
.ein-name { max-width: 240px; font-weight: 600; height: 34px; }
.opt-kopf .kn { margin-left: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 7px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie); font-weight: 500; font-size: 13px; }
.chip button { all: unset; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; color: var(--leise); }
.chip button:hover { background: var(--fehler-hell); color: var(--fehler); }
.chip-klein { height: 22px; padding: 0 8px; font-size: 12px; margin-right: 4px; }
.chip-ein { border: 0; outline: none; height: 28px; min-width: 150px; flex: 1; background: transparent; }
.farbe { display: inline-block; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); vertical-align: -3px; margin-right: 4px; }
.opt-neu { display: flex; gap: 8px; }
.opt-neu .ein { max-width: 320px; }
.var-tabelle-wrap { border: 1px solid var(--linie); border-radius: 10px; overflow: auto; max-height: 520px; }
.var-tabelle { width: 100%; border-collapse: collapse; }
.var-tabelle th { position: sticky; top: 0; background: var(--flaeche-2); text-align: left; font-size: 12px; font-weight: 600; color: var(--leise); padding: 8px 10px; border-bottom: 1px solid var(--linie); z-index: 1; }
.var-tabelle td { padding: 6px 10px; border-bottom: 1px solid var(--linie); }
.var-tabelle tr:last-child td { border-bottom: 0; }
.var-tabelle .ein { height: 32px; }
.var-tabelle .ein-einheit .ein { width: 112px; }
.var-tabelle .ein-mono { min-width: 130px; }
.var-name { font-weight: 600; white-space: nowrap; } .var-name span + span::before { content: " · "; color: var(--ganz-leise); }
.var-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--leise); font-size: 13px; flex-wrap: wrap; }
.var-alle { display: flex; gap: 6px; }

/* Pult-Editor */
.ed-pult { grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 460px); height: calc(100dvh - var(--dl-h) - var(--kopf-h)); }
.pult-buehne { padding: 16px; min-height: 0; display: flex; }
.pult-buehne .ed-vorschau { flex: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--linie); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08); animation: none; }
.tafel { background: var(--flaeche); border-left: 1px solid var(--linie); display: flex; flex-direction: column; min-height: 0; }
.tafel-kopf { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; border-bottom: 1px solid var(--linie); }
.tafel-kopf > div { min-width: 0; flex: 1; }
.tafel-kopf h2 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tafel-art { font-size: 12px; color: var(--leise); font-weight: 500; }
.tafel-status { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 12.5px; color: var(--leise); border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }
.tafel-status .ico { color: var(--gut); }
.tafel-inhalt { overflow: auto; flex: 1; }
.tafel-gruppe { border-bottom: 1px solid var(--linie); }
.tafel-gruppe summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 650; cursor: pointer; }
.tafel-gruppe summary::-webkit-details-marker { display: none; }
.tafel-gruppe summary .ico { transition: transform .2s var(--ease); color: var(--leise); }
.tafel-gruppe[open] summary .ico { transform: rotate(180deg); }
.tafel-gruppe-inhalt { padding: 0 16px 18px; }
.tafel .medien { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tafel .rt-text { min-height: 180px; }
.tafel .var-tabelle .ein-mono { min-width: 110px; }
.tafel-liste .suchfeld { margin: 12px 14px 6px; max-width: none; flex: none; }
.tafel-zahl { padding: 0 16px 8px; }
.tafel-produkte { list-style: none; margin: 0; padding: 0 8px 16px; overflow: auto; flex: 1; }
.tafel-produkte button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; }
.tafel-produkte button:hover { background: var(--flaeche-2); }
.tafel-produkte button > span { flex: 1; min-width: 0; }
.tafel-produkte b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tafel-produkte .ico { color: var(--ganz-leise); }

/* Seiten-Editor */
.se { height: calc(100dvh - var(--dl-h) - var(--kopf-h)); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.se-kopf { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); min-width: 0; }
.se-seite { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--r-ein); border: 1px solid var(--linie-stark); }
.se-seite select { all: unset; cursor: pointer; font-weight: 600; padding-right: 22px; }
.se-seite .ico:last-child { position: absolute; right: 10px; pointer-events: none; color: var(--leise); }
.se-tipp { color: var(--leise); font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-flaeche { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 0; }
.se-pult .se-flaeche { grid-template-columns: minmax(0, 1fr) 300px; }
.se-buehne { position: relative; display: flex; min-height: 0; padding: 14px; background: #e8eaee; }
.se-buehne .vorschau { border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 30px rgba(16, 24, 40, .1); background: #fff; }
.se-buehne .g-handy { background: transparent; box-shadow: none; }
.se-hilfe { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; z-index: 5; display: flex; align-items: center; gap: 10px; max-width: min(720px, calc(100% - 48px)); padding: 10px 8px 10px 14px; border-radius: 12px; background: #16181c; color: #e7e9ec; box-shadow: 0 12px 34px rgba(0, 0, 0, .3); font-size: 13px; animation: hoch .4s var(--ease) .3s both; }
.se-hilfe .ico:first-child { color: #8fb0ff; } .se-hilfe b { color: #fff; }
.se-hilfe .kn { color: #c9cdd4; } .se-hilfe .kn:hover { background: rgba(255, 255, 255, .1); }
@keyframes hoch { from { opacity: 0; transform: translateY(10px); } }
.se-panel { background: var(--flaeche); border-right: 1px solid var(--linie); display: flex; flex-direction: column; min-height: 0; }
.se-pult .se-panel { border-right: 0; border-left: 1px solid var(--linie); }
.se-panel-kopf { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 16px 10px; }
.se-panel-kopf h2 { font-size: 15px; }
.se-liste { list-style: none; margin: 0; padding: 0 8px; overflow: auto; flex: 1; }
.se-liste li { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 2px; border-radius: 8px; transition: background .12s; }
.se-liste li:hover { background: var(--flaeche-2); }
.se-liste li.aus .se-name { color: var(--ganz-leise); text-decoration: line-through; }
.se-griff { color: var(--ganz-leise); cursor: grab; display: grid; place-items: center; width: 22px; }
.se-name { all: unset; cursor: pointer; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; padding: 6px 0; }
.se-aktionen { display: flex; opacity: .0; transition: opacity .12s; }
.se-liste li:hover .se-aktionen, .se-liste li:focus-within .se-aktionen { opacity: 1; }
.se-aktionen button { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--leise); }
.se-aktionen button:hover:not(:disabled) { background: var(--flaeche); color: var(--text); box-shadow: 0 0 0 1px var(--linie); }
.se-aktionen button:disabled { opacity: .3; }
.se-aktionen button[aria-pressed=true] { color: var(--akzent); }
.ico.hoch { transform: rotate(90deg); } .ico.runter { transform: rotate(-90deg); }
.se-fuss { padding: 12px 16px 16px; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* Dialog */
.dlg { border: 0; padding: 0; border-radius: 14px; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-gross); }
.dlg-breit { width: min(980px, calc(100vw - 32px)); }
.dlg[open] { animation: dlg .26s var(--ease); display: flex; flex-direction: column; }
@keyframes dlg { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.dlg::backdrop { background: rgba(17, 20, 26, .42); backdrop-filter: blur(2px); animation: einblenden .2s; }
.dlg-kopf { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px 22px; }
.dlg-kopf h2 { font-size: 17px; }
.dlg-inhalt { padding: 0 22px 20px; overflow: auto; line-height: 1.55; }
.dlg-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--linie); background: var(--flaeche-2); border-radius: 0 0 14px 14px; }
.schnell-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.schnell-liste button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 9px; }
.schnell-liste li[aria-selected=true] button { background: var(--akzent-hell); }
.schnell-liste b { font-weight: 600; }

/* Toasts */
.toasts { position: fixed; bottom: 20px; left: 50%; translate: -50% 0; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 11px; background: #16181c; color: #f1f2f4; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: toast .32s var(--ease); max-width: min(560px, calc(100vw - 32px)); }
.toast-ok .ico { color: #6ee59d; } .toast-fehler { background: #7f1d17; } .toast-api .ico { color: #8fb0ff; }
@keyframes toast { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* Hinweise */
.hinweis { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-karte); background: var(--akzent-hell); color: color-mix(in srgb, var(--akzent) 60%, var(--text)); margin: 18px 0; line-height: 1.5; }
.hinweis .ico { margin-top: 1px; color: var(--akzent); }
.hinweis b { color: var(--text); }
.hinweis-beispiel { background: #f1efff; color: #3d3480; } .hinweis-beispiel .ico { color: #5b4bd6; }
.hinweis-fehler { background: var(--fehler-hell); color: #6c1a14; } .hinweis-fehler .ico { color: var(--fehler); }
.hinweis-gut { background: var(--gut-hell); color: #134a2e; } .hinweis-gut .ico { color: var(--gut); }
.hinweis-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 6px; background: var(--warn-hell); color: var(--warn); font-size: 12px; font-weight: 500; white-space: nowrap; }
.hinweis-chip.fehler { background: var(--fehler-hell); color: var(--fehler); }
.fehlertext { color: var(--fehler); }

/* KI */
.ki-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ki-seite { position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; }
.ki-seite .karte + .karte { margin-top: 0; }
.ki-haupt > * + * { margin-top: 16px; }
.token-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.token { flex: 1 1 260px; font: 13px/1 var(--mono); padding: 11px 12px; border-radius: 8px; background: #16181c; color: #c8f7d4; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-daten { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 16px 0 0; font-size: 13px; }
.ki-daten dt { color: var(--leise); } .ki-daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ki-daten code, .kopierzeile code { font: 12.5px var(--mono); background: var(--flaeche-2); padding: 2px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--linie); }
.code { border-radius: var(--r-karte); overflow: hidden; background: #16181c; color: #e6e8eb; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.code-kopf { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 16px; background: #1f2227; font-size: 12.5px; font-weight: 600; color: #a9afb8; }
.code-kopf .kn { color: #c9cdd4; } .code-kopf .kn:hover { background: rgba(255, 255, 255, .08); }
.code pre { margin: 0; padding: 14px 16px 16px; overflow: auto; font: 12.5px/1.6 var(--mono); max-height: 420px; white-space: pre-wrap; word-break: break-word; }
.code pre::selection, .code pre *::selection { background: rgba(143, 176, 255, .35); }
.tabelle-api td { cursor: default; padding: 9px 10px; } .tabelle-api tr:hover { background: none !important; cursor: default !important; }
.methode { display: inline-block; min-width: 56px; text-align: center; font: 700 11px/20px var(--mono); border-radius: 5px; }
.m-get { background: #e3f1ff; color: #0a4fa8; } .m-post { background: #dff3e6; color: #15603a; } .m-patch { background: #fff1d6; color: #7a4a00; } .m-delete { background: var(--fehler-hell); color: var(--fehler); }
.ki-log ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ki-log li { display: flex; align-items: center; gap: 8px; animation: auf .3s var(--ease); }
.ki-log li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; text-decoration: none; }
.ki-log .live-punkt { margin-left: auto; }
.schritte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; line-height: 1.55; }
.kopierzeile { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.import .ablage { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 44px 24px 28px; border-radius: var(--r-karte); border: 1.5px dashed var(--linie-stark); background: var(--flaeche); transition: border-color .15s, background .15s; }
.import .ablage.ziel { border-color: var(--akzent); background: var(--akzent-hell); }
.import .ablage > .ico { color: var(--akzent); }
.import .ablage b { font-size: 16px; } .import .ablage > span { color: var(--leise); max-width: 52ch; }
.beispiele { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--linie); width: 100%; }
.beispiel { display: inline-flex; align-items: center; gap: 2px; }
.beispiel a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: var(--leise); }
.beispiel a:hover { background: var(--flaeche-2); color: var(--akzent); }
.runter-pfeil { transform: rotate(180deg); }
.import-kopf { display: flex; gap: 16px; align-items: center; padding: 16px; border-bottom: 1px solid var(--linie); }
.import-kopf h2 { font-size: 15px; } .import-kopf p { margin-top: 2px; }
.import > * + * { margin-top: 16px; }
.import-info p { color: var(--leise); max-width: 80ch; line-height: 1.55; }

/* Bestellungen */
.pos-liste { list-style: none; margin: 0; padding: 0; }
.pos-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 96px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.pos-liste a { color: var(--text); font-weight: 600; text-decoration: none; } .pos-liste a:hover { text-decoration: underline; }
.summen { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; margin: 14px 0 0; }
.summen dt { color: var(--leise); } .summen dd { margin: 0; text-align: right; }
.summen .gesamt { font-weight: 700; color: var(--text); font-size: 15px; padding-top: 6px; border-top: 1px solid var(--linie); }
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { display: flex; gap: 14px; padding-bottom: 18px; position: relative; color: var(--ganz-leise); }
.verlauf li:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--linie); }
.verlauf li i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linie-stark); background: var(--flaeche); margin-top: 3px; flex: none; position: relative; z-index: 1; }
.verlauf li.erledigt { color: var(--text); } .verlauf li.erledigt i { background: var(--gut); border-color: var(--gut); }
.verlauf li.erledigt:not(:last-child)::before { background: color-mix(in srgb, var(--gut) 50%, var(--linie)); }
.verlauf li.als-naechstes i { border-color: var(--akzent); }
.verlauf li.storno { color: var(--fehler); } .verlauf li.storno i { background: var(--fehler); border-color: var(--fehler); }
.auto-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--leise); }
.auto-liste li { display: flex; gap: 10px; align-items: flex-start; } .auto-liste .ico { color: var(--akzent); margin-top: 1px; }

/* Lager */
.bestand-feld { display: inline-flex; align-items: center; gap: 4px; }
.bestand-feld > button { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--leise); font-size: 16px; }
.bestand-feld > button:hover { background: var(--flaeche-2); color: var(--text); }
.bestand-feld .ok { width: auto; padding: 0 8px; background: var(--akzent); color: #fff; font-size: 12px; font-weight: 600; }
.bestand-feld .ein-zahl { height: 30px; width: 70px; }

/* ---------- Breiten ---------- */
@media (min-width: 1700px) { .seite { padding: 32px 48px 80px; } .ed-haupt { padding: 28px 44px 80px; } }
@media (max-width: 1360px) { .ed.mit-vorschau { grid-template-columns: minmax(0, 1fr) clamp(400px, 42%, 600px); } }
@media (max-width: 1180px) { .ki-raster { grid-template-columns: minmax(0, 1fr); } .ki-seite { position: static; } .se-tipp { display: none; } }
@media (max-width: 980px) {
  .ed.mit-vorschau { grid-template-columns: minmax(0, 1fr); }
  .ed.mit-vorschau .ed-vorschau { position: fixed; inset: calc(var(--dl-h) + var(--kopf-h)) 0 0 0; z-index: 22; }
  .ed-pult { grid-template-columns: minmax(0, 1fr); }
  .ed-pult .pult-buehne { display: none; }
  .se-flaeche, .se-pult .se-flaeche { grid-template-columns: minmax(0, 1fr); }
  .se-panel { display: none; }
}
@media (max-width: 860px) {
  :root { --dl-h: 92px; }
  .demo-leiste { grid-template-columns: 1fr auto; grid-template-rows: 44px 44px; row-gap: 0; padding: 0 10px; }
  .dl-umschalter { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; } .dl-umschalter button { flex: 1; justify-content: center; padding: 0 6px; }
  .dl-sandbox, .dl-knopf span, .dl-titel span { display: none; }
  .koerper { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste { position: fixed; z-index: 35; top: calc(var(--dl-h) + var(--kopf-h)); bottom: 0; left: 0; width: 260px; transform: translateX(-105%); transition: transform .3s var(--ease); box-shadow: var(--schatten-gross); }
  .menue-auf .seitenleiste { transform: none; }
  .menue-auf .menue-schleier { display: block; position: fixed; inset: calc(var(--dl-h) + var(--kopf-h)) 0 0 0; background: rgba(17, 20, 26, .35); z-index: 34; }
  .kopf .menue-knopf { display: inline-flex; }
  .look-shopify .menue-knopf { color: #e3e3e3; }
  .pult-schiene { display: none; }
  .app.look-pult { grid-template-rows: var(--dl-h) var(--kopf-h) minmax(0, 1fr) 62px; }
  .pult-unten { display: flex; background: #fff; border-top: 1px solid var(--linie); }
  .pult-unten button { all: unset; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--leise); }
  .pult-unten button.an { color: var(--akzent); }
  .ed, .ed-pult, .se { height: calc(100dvh - var(--dl-h) - var(--kopf-h)); }
  .look-pult .ed, .look-pult .se { height: calc(100dvh - var(--dl-h) - var(--kopf-h) - 62px); }
  .seite { padding: 18px 14px 64px; } .ed-haupt { padding: 16px 14px 80px; }
  .seitenkopf { flex-wrap: wrap; } .seitenkopf h1 { white-space: normal; }
  .seitenkopf-aktionen { margin-left: 0; width: 100%; justify-content: flex-start; }
  .wix-suche, .pult-suche, .wix-site .ico, .pult-name .leise { display: none; }
  .sp-suche { width: auto; flex: 1; margin: 0; }
  .sp-shop { font-size: 0; gap: 0; padding: 4px; }
  .wix-statistik { grid-template-columns: repeat(2, 1fr); } .wix-statistik div:nth-child(3) { border-left: 0; } .wix-statistik div:nth-child(n+3) { border-top: 1px solid var(--linie); }
  .tabelle th:nth-child(n+5):not(.th-aktion), .tabelle td:nth-child(n+5):not(.th-aktion) { display: none; }
  .tabelle-api td:nth-child(n+3), .tabelle-api th:nth-child(n+3) { display: table-cell !important; }
  .tab-leiste .ein-wahl { display: none; }
  .ed-raster { grid-template-columns: minmax(0, 1fr); }
  .fokus { grid-template-columns: minmax(0, 1fr); } .fokus-rechts { flex-direction: row; } .fokus-rechts .fokus-titel { display: none; } .fokus-vs { flex: 1; } .fokus-rechts .fokus-vs:nth-of-type(1) div { width: 100%; }
  .sp-sicherung { padding-left: 16px; }
  .pos-liste li { grid-template-columns: auto minmax(0, 1fr) auto; } .pos-liste li > span.r { display: none; }
  .se-hilfe { display: none; }
  .tabs-gross { overflow-x: auto; flex-wrap: nowrap; } .tabs-gross button { white-space: nowrap; flex: none; }
  .ki-daten { grid-template-columns: 1fr; gap: 2px; } .ki-daten dd { margin-bottom: 8px; }
  .karte-kopf { flex-wrap: wrap; }
  .toasts { bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }