/* Quellcode & Söhne – gemeinsames Design: hell, ruhig, Markengrün #009640. Schriften lokal, keine Fremdadressen. */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets.php?f=fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets.php?f=fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  /* Marke */
  --gruen: #009640;            /* Quellcode-&-Söhne-Grün */
  --gruen-knopf: #008238;      /* Flächen mit weißer Schrift (Kontrast 4,9:1) */
  --gruen-dunkel: #00702f;     /* kleiner Text auf hellem Grund */
  --gruen-hell: #22c56a;
  --gruen-hover: #00702f;      /* Knopf beim Überfahren */
  --gruen-mint: #ecfff4;       /* auf Grün: das & in der Wortmarke */
  --gruen-flaeche: #e6f5ec;    /* sehr helle Grünfläche (Marken, Hover) */
  --gruen-linie: #b8e0c8;
  /* Grund und Text */
  --grund: #f5f7f6;
  --flaeche: #ffffff;
  --flaeche-2: #eef2f0;
  --linie: #dde3e0;
  --text: #14181b;
  --text-leise: #56605e;
  /* Hinweise */
  --warnung: #8a5a00;          /* Text */
  --warnung-rand: #c99a20;
  --warnung-flaeche: #fff6df;
  --fehler: #8c1d1d;           /* Text */
  --fehler-rand: #f0c2c2;
  --fehler-flaeche: #fff5f5;
  --eingabe: #ffffff;
  --eingabe-rand: #c5ceca;
  --knopf2-bg: #ffffff;
  --knopf2-text: #14181b;
  --radius: 14px;
  --radius-s: 10px;
  --schatten: 0 1px 3px rgba(11, 13, 15, .05), 0 8px 24px rgba(11, 13, 15, .06);
  --sans: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Cascadia Mono", monospace;
  color-scheme: light;
}

/* Dunkler Modus: neutrales Dunkelgrau wie bei dunklen Chat-Oberflächen, die grünen Markenfarben bleiben.
   Umschaltung ohne JavaScript über das Cookie qs_modus (data-theme am html-Element). */
html[data-theme="dunkel"] {
  --gruen: #4cd98a;            /* Rahmen, Fokus, Hover */
  --gruen-dunkel: #22c56a;     /* Text und Links auf dunklem Grund */
  --gruen-flaeche: #1d3a2b;
  --gruen-linie: #2f5a42;
  --grund: #212121;
  --flaeche: #2b2b2b;
  --flaeche-2: #343434;
  --linie: #3e3e3e;
  --text: #ececec;
  --text-leise: #b0b0b0;
  --warnung: #f2c35c;
  --warnung-rand: #8a6a1c;
  --warnung-flaeche: #3a3322;
  --fehler: #ff9d96;
  --fehler-rand: #7a3532;
  --fehler-flaeche: #3b2827;
  --eingabe: #303030;
  --eingabe-rand: #4d4d4d;
  --knopf2-bg: #303030;
  --knopf2-text: #ececec;
  --schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: 16px; background: var(--grund); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--grund); color: var(--text); font-family: var(--sans); line-height: 1.45; }
[hidden] { display: none !important; }
a { color: var(--gruen-dunkel); text-underline-offset: .15em; }
a:hover { color: var(--gruen); }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0 0 .6rem; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin-top: 1.6rem; }
h3 { font-size: .85rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
p { margin: 0 0 .8rem; }
code, .mono { font-family: var(--mono); font-size: .9em; }
.leise { color: var(--text-leise); }
.klein-text { color: var(--text-leise); font-size: .85rem; }

/* Kopf: grüner Balken mit weißer Schrift */
.kopf { background: var(--gruen-knopf); color: #fff; }
.kopf-innen { max-width: 76rem; margin: 0 auto; padding: .85rem 1rem .4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.marke-zeile { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.wortmarke { font-weight: 700; letter-spacing: .22em; font-size: .78rem; color: #fff; }
.wortmarke span { color: var(--gruen-mint); margin: 0 .05em; }
.produkt { font-weight: 600; font-size: 1.1rem; color: #fff; }
.konto { display: flex; align-items: center; gap: .8rem; font-size: .85rem; color: rgba(255, 255, 255, .85); }
.kopf-rechts { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; }
.kopf .modus { color: #fff; text-decoration: none; font-size: .8rem; padding: .25rem .8rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--radius-s); white-space: nowrap; }
.kopf .modus:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.konto .knopf.zweit { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.konto .knopf.zweit:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.reiter { max-width: 76rem; margin: 0 auto; padding: 0 1rem; display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: thin; }
.reiter a { color: rgba(255, 255, 255, .8); text-decoration: none; padding: .55rem .8rem; border-bottom: 3px solid transparent; white-space: nowrap; font-size: .92rem; }
.reiter a:hover { color: #fff; }
.reiter a.aktiv { color: #fff; border-bottom-color: #fff; font-weight: 600; }

.seite { max-width: 76rem; margin: 0 auto; padding: 1.4rem 1rem 3rem; }
.leiste { padding: .55rem 1rem; text-align: center; font-size: .9rem; border-bottom: 1px solid var(--linie); }
.leiste.warn { background: var(--warnung-flaeche); color: var(--warnung); border-bottom-color: var(--warnung-rand); }
.leiste.err { background: var(--fehler-flaeche); color: var(--fehler); border-bottom-color: var(--fehler-rand); }
.leiste.info { background: var(--flaeche-2); color: var(--text-leise); }
.meldung { padding: .7rem .95rem; border: 1px solid var(--linie); border-left-width: 4px; border-radius: var(--radius-s); margin-bottom: .8rem; background: var(--flaeche); box-shadow: var(--schatten); }
.meldung.ok { border-left-color: var(--gruen); background: var(--gruen-flaeche); }
.meldung.warn { border-left-color: var(--warnung-rand); background: var(--warnung-flaeche); }
.meldung.err { border-left-color: var(--fehler); background: var(--fehler-flaeche); }
.meldung.info { border-left-color: var(--text-leise); }

/* Karten und Kennzahlen */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--schatten); }
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
.karte h3 { margin-top: 1.1rem; }
.raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 1rem; }
.raster .karte { margin-bottom: 0; }
.kennzahl { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.8rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.kennzahl.warn { color: var(--warnung); }
.kennzahl.err { color: var(--fehler); }
.kennzahl.ok { color: var(--gruen-dunkel); }

/* Marken */
.marke { display: inline-block; font-size: .75rem; font-weight: 500; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--linie); color: var(--text-leise); background: var(--flaeche-2); white-space: nowrap; }
.marke.ok { color: var(--gruen-dunkel); border-color: var(--gruen-linie); background: var(--gruen-flaeche); }
.marke.warn { color: var(--warnung); border-color: var(--warnung-rand); background: var(--warnung-flaeche); }
.marke.err { color: var(--fehler); border-color: var(--fehler-rand); background: var(--fehler-flaeche); }

/* Formulare */
form.inline { display: inline; }
.feld { margin-bottom: .9rem; }
.feld label { display: block; font-size: .85rem; color: var(--text-leise); margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--eingabe); border: 1px solid var(--eingabe-rand); border-radius: var(--radius-s); padding: .5rem .7rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--gruen); outline: 2px solid var(--gruen-flaeche); }
textarea { min-height: 5rem; resize: vertical; }
input[type=checkbox] { accent-color: var(--gruen); width: 1.05rem; height: 1.05rem; vertical-align: -.15rem; margin-right: .4rem; }
.zeile { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.zeile .feld { margin-bottom: 0; flex: 1 1 10rem; }
.knopf, button {
  font: inherit; font-weight: 500; cursor: pointer; border-radius: var(--radius-s); padding: .5rem 1rem; border: 1px solid var(--gruen-knopf);
  background: var(--gruen-knopf); color: #fff; text-decoration: none; display: inline-block; line-height: 1.2;
}
.knopf:hover, button:hover { background: var(--gruen-hover); border-color: var(--gruen-hover); color: #fff; }
.knopf.zweit, button.zweit { background: var(--knopf2-bg); color: var(--knopf2-text); border-color: var(--eingabe-rand); }
.knopf.zweit:hover, button.zweit:hover { border-color: var(--gruen); background: var(--gruen-flaeche); color: var(--knopf2-text); }
.knopf.zweit.aktiv { border-color: var(--gruen); background: var(--gruen-flaeche); color: var(--gruen-dunkel); }
.knopf.gefahr, button.gefahr { background: var(--knopf2-bg); color: var(--fehler); border-color: var(--fehler-rand); }
.knopf.gefahr:hover, button.gefahr:hover { background: var(--fehler-flaeche); border-color: var(--fehler); color: var(--fehler); }
.knopf.klein, button.klein { padding: .25rem .65rem; font-size: .82rem; white-space: nowrap; }
.aktionen input[type=search] { width: auto; min-width: 12rem; padding: .3rem .6rem; }
button:disabled { opacity: .45; cursor: not-allowed; }
.aktionen { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0; align-items: center; }

/* Tabellen */
.tabellen-rahmen { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th { text-align: left; font-weight: 500; color: var(--text-leise); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; padding: .45rem .6rem; border-bottom: 2px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: .5rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tabelle td.mono { white-space: nowrap; }
.tabelle tr.abweichung td { background: var(--warnung-flaeche); }
.tabelle tr.warnung td { background: var(--fehler-flaeche); }
.tabelle .notiz { color: var(--text-leise); font-size: .82rem; }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; }

/* Händlersicht: ruhige Flächen */
.konto-link { color: #fff; text-decoration: none; font-size: .85rem; padding: .15rem .6rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--radius-s); }
.konto-link:hover, .konto-link.aktiv { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.seitenkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.seitenkopf h1 { margin-bottom: 0; }
a.kachel { display: block; color: inherit; text-decoration: none; }
a.kachel:hover { border-color: var(--gruen); }
.status-zeile { margin: 1.6rem 0 0; font-size: .85rem; color: var(--text-leise); text-align: center; }
.status-zeile.ok::before { content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gruen); margin-right: .5rem; vertical-align: .05rem; }
.status-zeile.warn { color: var(--warnung); }

a.hinweis { display: inline-block; min-width: 1.15rem; height: 1.15rem; line-height: 1.15rem; text-align: center; border-radius: 50%; background: var(--warnung-flaeche); color: var(--warnung); border: 1px solid var(--warnung-rand); font-size: .75rem; font-weight: 700; text-decoration: none; margin-left: .3rem; }

/* Anmeldung */
.anmeldung { max-width: 24rem; margin: 3rem auto; }

/* Handy: Tabellen werden zu Karten */
@media (max-width: 640px) {
  .seite { padding: 1rem .9rem 3rem; }
  .kopf-innen { padding: .7rem .9rem .3rem; }
  .reiter { padding: 0 .5rem; }
  table.tabelle.stapel, .tabelle.stapel tbody, .tabelle.stapel tr, .tabelle.stapel td { display: block; width: 100%; }
  .tabelle.stapel thead { display: none; }
  .tabelle.stapel tr { border: 1px solid var(--linie); border-radius: var(--radius-s); margin-bottom: .6rem; padding: .35rem .2rem; background: var(--flaeche); }
  .tabelle.stapel td { border: 0; padding: .2rem .6rem; text-align: left; }
  .tabelle.stapel td::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .08em; }
  .tabelle.stapel td.zahl { text-align: left; }
  .tabelle.stapel tr.abweichung { background: var(--warnung-flaeche); }
  .tabelle.stapel tr.warnung { background: var(--fehler-flaeche); }
}

/* Live-Seite (Aufbau und Maße wie die Live-Tafel der Referenz) */
.tafel { display: grid; gap: 18px; }
.tafelkopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--text-leise); font-size: .85rem; }
.knopfreihe { display: flex; gap: .4rem; }
.haupt { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 22px 24px 26px; box-shadow: var(--schatten); }
.haupt::after { content: ""; position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--gruen); opacity: 0; pointer-events: none; transition: opacity .9s; }
.haupt.blitz::after { opacity: 1; transition: opacity .05s; }
.haupt h2, .feld h2 { margin: 0; font: 500 .78rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise); }
.gross { display: flex; align-items: flex-end; white-space: nowrap; font-family: var(--sans); font-weight: 700; line-height: .9; font-size: clamp(4.2rem, 16vw, 10.5rem); font-variant-numeric: tabular-nums; color: var(--gruen-dunkel); letter-spacing: .01em; padding-top: .08em; }
.gross .cent, .gross .eur { font-size: .42em; margin-bottom: .12em; font-weight: 700; }
.gross .cent { margin-left: .04em; }
.gross .eur { margin-left: .18em; opacity: .85; }
.walzen { display: inline-flex; align-items: flex-end; }
.walze { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; }
.walze span { display: block; transition: transform .9s cubic-bezier(.2, .75, .2, 1); }
.walze span i { display: block; height: 1em; font-style: normal; text-align: center; }
.fest { display: inline-block; }
.haupt .unter { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: .5rem 0 0; color: var(--text-leise); font-size: .98rem; }
.haupt .unter b { color: var(--text); font-weight: 600; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.vergleich.hoch { color: var(--gruen-dunkel); font-weight: 600; }
.vergleich.runter { color: var(--fehler); font-weight: 600; }
.ziel { display: grid; gap: 5px; margin-top: 10px; font-size: .85rem; color: var(--text-leise); }
.ziel progress { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--flaeche-2); overflow: hidden; }
.ziel progress::-webkit-progress-bar { background: var(--flaeche-2); border-radius: 4px; }
.ziel progress::-webkit-progress-value { background: var(--gruen); border-radius: 4px; transition: width .9s ease; }
.ziel progress::-moz-progress-bar { background: var(--gruen); border-radius: 4px; }
.leiste4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.leiste4 .kachel { display: block; color: inherit; text-decoration: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 14px 16px; min-width: 0; box-shadow: var(--schatten); }
.leiste4 a.kachel:hover { border-color: var(--gruen); }
.leiste4 .kachel h3 { margin: 0 0 .35rem; }
.leiste4 .wert { font-family: var(--sans); font-weight: 600; font-size: clamp(1.3rem, 5vw, 1.9rem); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.leiste4 .wert.warn { color: var(--warnung); }
.leiste4 .wert.err { color: var(--fehler); }
.leiste4 .wert.ok { color: var(--gruen-dunkel); }
.leiste4 .kachel p { margin: .3rem 0 0; font-size: .8rem; color: var(--text-leise); }
.unten { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.feld { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 16px; min-width: 0; box-shadow: var(--schatten); }
.feld h2 { margin-bottom: 12px; }
.ticker { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ticker li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 6px; background: var(--grund); border: 1px solid transparent; }
.ticker li.neu { border-color: var(--gruen); animation: rein .7s ease-out; }
@keyframes rein { from { transform: translateY(-8px); opacity: .2; } to { transform: none; opacity: 1; } }
.ticker .zeit { font: 500 .78rem var(--mono); color: var(--text-leise); }
.ticker .was { min-width: 0; display: flex; align-items: center; gap: 8px; }
.ticker .artikel { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker .kanal { flex: none; font: 600 .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; color: #fff; }
.ticker .kanal.shopify { background: var(--gruen-knopf); }
.ticker .kanal.etsy { background: #b45309; }
.ticker .betrag { font: 700 1.05rem var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticker li.storniert { opacity: .55; }
.ticker li.storniert .artikel { text-decoration: line-through; }
.feld .leer { margin: .4rem 0 0; color: var(--text-leise); font-size: .9rem; }
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .8rem; font-size: .9rem; color: var(--text-leise); }
.legende b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: .6rem; }
.legende .punkt { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.legende .punkt.heute { background: var(--gruen); }
.legende .punkt.gestern { background: var(--eingabe-rand); }
.verlauffeld { display: flex; flex-direction: column; }
.verlauf { display: flex; gap: .6rem; flex: 1; min-height: 11rem; }
.yachse { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: .72rem; color: var(--text-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.verlauf svg { flex: 1; min-width: 0; height: 100%; min-height: 11rem; overflow: visible; }
.verlauf .raster { stroke: var(--linie); stroke-width: 1; vector-effect: non-scaling-stroke; }
.verlauf path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.verlauf .gestern { stroke: var(--eingabe-rand); stroke-width: 2; stroke-dasharray: 5 4; }
.verlauf .heute { stroke: var(--gruen); stroke-width: 3.5; }
.verlauf .flaeche { fill: var(--gruen); fill-opacity: .12; stroke: none; }
.verlauf .marke { stroke: var(--gruen); stroke-width: 11; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.xachse { display: flex; justify-content: space-between; margin: 6px 0 0 3.6rem; font-size: .72rem; color: var(--text-leise); }
.knopf.ton.aktiv, button.ton.aktiv { border-color: var(--gruen); background: var(--gruen-flaeche); color: var(--gruen-dunkel); }
.vollbild-zu { position: fixed; bottom: 14px; right: 14px; z-index: 5; width: 2.6rem; height: 2.6rem; padding: 0; font-size: 1.5rem; line-height: 1; border-radius: 50%; background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); opacity: .7; }
.vollbild-zu:hover { opacity: 1; background: var(--flaeche); color: var(--text); }
/* Vollbild: nur die Tafel, ohne Kopf und Reiter (z. B. Tablet an der Wand) */
html.live-voll .kopf, html.live-voll .leiste, html.live-voll .meldung, html.live-voll .tafelkopf { display: none; }
html.live-voll .seite { max-width: none; padding: 16px 18px 24px; }
html.live-voll body { background: var(--grund); }
@media (max-width: 820px) {
  .leiste4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unten { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .haupt { padding: 18px 16px 20px; }
  .haupt .unter { flex-direction: column; }
  .haupt .unter .trenn { display: none; }
  /* Handy: erste Zeile Uhrzeit · Kanal · Betrag, zweite Zeile der Artikel in voller Breite */
  .ticker li { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 3px; column-gap: 10px; }
  .ticker .was { display: contents; }
  .ticker .kanal { grid-column: 2; grid-row: 1; justify-self: start; }
  .ticker .zeit { grid-column: 1; grid-row: 1; }
  .ticker .betrag { grid-column: 3; grid-row: 1; }
  .ticker .artikel { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .walze span, .ziel progress::-webkit-progress-value { transition: none; }
  .ticker li.neu { animation: none; }
  .haupt::after { transition: none; }
}

/* Bestand */
.tabelle.bestand td.bild { width: 3rem; padding-right: 0; }
.tabelle.bestand td.bild img, .bild-leer { display: flex; align-items: center; justify-content: center; color: var(--text-leise); font-weight: 600; font-size: 1rem; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-s); object-fit: cover; background: var(--flaeche-2); border: 1px solid var(--linie); }
.tabelle.bestand td.wahl { width: 2rem; padding-right: 0; }
form.nachfuellen { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
form.nachfuellen input[type=text] { width: 4.2rem; padding: .25rem .5rem; text-align: right; font-family: var(--mono); }
form.mehrfach { margin: 0 0 .6rem; }
.nur-lesen-weg { position: absolute; left: -9999px; }
ul.liste { margin: .4rem 0 1rem; padding-left: 1.2rem; }
@media (max-width: 640px) {
  .tabelle.stapel.bestand tr { display: grid; grid-template-columns: 1.6rem 2.5rem 1fr; column-gap: .5rem; align-items: center; }
  .tabelle.stapel.bestand td { grid-column: 1 / -1; }
  .tabelle.stapel.bestand td:empty { display: none; }
  .tabelle.stapel.bestand td.wahl { grid-column: 1; grid-row: 1; padding: 0 0 0 .6rem; }
  .tabelle.stapel.bestand td.bild { grid-column: 2; grid-row: 1; padding: .2rem 0; width: auto; }
  .tabelle.stapel.bestand td[data-label="Artikel"] { grid-column: 3; grid-row: 1; }
  .tabelle.stapel.bestand td[data-label="Artikel"]::before, .tabelle.stapel.bestand td.wahl::before { display: none; }
  .tabelle.stapel.bestand td[data-label="SKU"], .tabelle.stapel.bestand td[data-label="Shopify"], .tabelle.stapel.bestand td[data-label="Etsy"], .tabelle.stapel.bestand td[data-label="Status"] {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .1rem; padding-bottom: .1rem; }
  .tabelle.stapel.bestand td[data-label]::before { display: inline; }
  .tabelle.stapel.bestand td[data-label="Artikel"]::before { display: none; }
  form.nachfuellen input[type=text] { width: 5rem; padding: .5rem; }
  form.nachfuellen button { padding: .5rem .8rem; }
}
}

/* Verkäufe */
.aktionen .trenner { width: 1px; height: 1.4rem; background: var(--linie); margin: 0 .3rem; }
.tabelle tr.storniert td { color: var(--text-leise); }
.tabelle tr.storniert td:nth-child(3) { text-decoration: line-through; }
.aktionen label { display: inline-flex; align-items: center; gap: .4rem; }
.aktionen label input[type=text] { width: 8.5rem; padding: .3rem .6rem; }

/* Einrichtungs-Checkliste (Admin) */
ol.schritte { list-style: none; margin: .6rem 0 0; padding: 0; }
.schritt { display: flex; gap: .8rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.schritt:last-child { border-bottom: 0; }
.schritt .haken { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .1rem; border: 2px solid var(--eingabe-rand); border-radius: 50%; position: relative; }
.schritt.erledigt .haken { background: var(--gruen-knopf); border-color: var(--gruen-knopf); }
.schritt.erledigt .haken::after { content: ''; position: absolute; left: .38rem; top: .14rem; width: .3rem; height: .6rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.schritt.teilweise .haken { border-color: var(--warnung-rand); background: var(--warnung-flaeche); }