/* `hidden` muss immer wirken.
 *
 * Die eingebaute Regel des Browsers ist schwach: jede eigene Regel mit
 * `display` schlaegt sie. Ein `.knopf` mit `display: inline-flex` bleibt
 * dann sichtbar, obwohl `hidden` gesetzt ist — und man sucht den Fehler
 * im JavaScript. */
[hidden] { display: none !important; }

/* dlingu — Oberflaeche
   Calm UI: gedeckt, keine Signalfarben als Flaeche, Status als Punkt.
   Ein Akzent (Teal), sonst Graustufen. Dark Mode ueber data-theme. */

:root {
  --ac:      #0F6E56;
  --ac-weich:#E6F1ED;
  --ac-text: #0B5443;

  --bg:      #F2F2EE;
  --flaeche: #FFFFFF;
  --erhoben: #EAEAE4;
  --linie:   #CFCFC5;
  --linie-2: #ADACA1;

  --text:    #1A1A18;
  --text-2:  #4E4D48;
  --text-3:  #6E6D66;

  --ok:      #2F7D5C;
  --warn:    #A8761E;
  --stop:    #A63A32;

  /* v2.200.0: Datenreihen in Diagrammen (geprueft: Farbsehschwaeche, Kontrast) */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;

  --r:   6px;
  --r-2: 10px;
  --schatten: 0 1px 2px rgba(30,30,25,.06), 0 1px 3px rgba(30,30,25,.05);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --ac:      #2FA37D;
  --ac-weich:#14322A;
  --ac-text: #6FD3AE;

  --bg:      #15161A;
  --flaeche: #1B1D22;
  --erhoben: #22252B;
  --linie:   #2C3037;
  --linie-2: #3A3F48;

  --text:    #E8E8E5;
  --text-2:  #A2A5A9;
  --text-3:  #74787E;

  --ok:      #4FB483;
  --warn:    #D0A24C;
  --stop:    #D4726A;

  --schatten: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --serie-1: #3987e5;
  --serie-2: #d95926;
}

* { box-sizing: border-box; }

/* v2.179.1 (Frodo: "die Katalogleiste ist noch schwarz im hellen Modus"): color-scheme folgt dem gewaehlten
   Thema, nicht dem Betriebssystem — sonst zeichnet der Browser Eingabefelder ohne eigene Regel (type=search,
   type=number, Suchfelder ausserhalb von .feld) dunkel, waehrend die Seite hell ist. */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
/* Eingabefelder ohne .feld-Rahmen sehen aus wie die mit: gleiche Flaeche, Linie, Schrift. */
/* :where() haelt das Gewicht bei null — jede Seitenregel (.suchleiste input mit Platz fuer die Lupe, .feld input) gewinnt. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]), select, textarea) { font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r); padding: .45rem .6rem; }
:where(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { border-color: var(--ac); outline: none; box-shadow: 0 0 0 3px var(--ac-weich); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ac-text); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------- Anmeldung */

.anmeldung {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.anmeldung-karte {
  width: 100%;
  max-width: 22.5rem;
}

.anmeldung-marke {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.75rem;
  color: var(--ac);
}
.anmeldung-marke svg { width: 34px; height: auto; display: block; }
.anmeldung-marke b {
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -.015em;
  color: var(--text);
}

.anmeldung h1 {
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 0 0 .25rem;
}
.anmeldung p.hinweis {
  color: var(--text-2);
  font-size: .875rem;
  margin: 0 0 1.5rem;
}

/* ---------------------------------------------------- Formular */

.feld { margin-bottom: 1rem; }
.feld label {
  display: block;
  font-size: .8125rem;
  color: var(--text-2);
  margin-bottom: .35rem;
}

.feld input {
  width: 100%;
  padding: .6rem .75rem;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
  transition: border-color .12s ease;
}
.feld input:focus {
  border-color: var(--ac);
  outline: none;
  box-shadow: 0 0 0 3px var(--ac-weich);
}

.feld input.code {
  font: 1.35rem/1 var(--mono);
  letter-spacing: .45em;
  text-align: center;
  padding: .8rem .75rem;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  padding: .65rem 1rem;
  font: inherit;
  font-weight: 500;
  color: #fff;
  background: var(--ac);
  border: 1px solid var(--ac);
  border-radius: var(--r);
  cursor: pointer;
  transition: filter .12s ease;
}
.knopf:hover { filter: brightness(1.08); }
.knopf:active { filter: brightness(.94); }

.knopf.leise {
  color: var(--text-2);
  background: transparent;
  border-color: var(--linie-2);
}
.knopf.leise:hover { background: var(--erhoben); filter: none; }

.meldung {
  padding: .6rem .75rem;
  border-radius: var(--r);
  font-size: .875rem;
  margin-bottom: 1rem;
  border: 1px solid var(--linie-2);
  background: var(--erhoben);
  color: var(--text);
}
.meldung.stop  { border-color: var(--stop); color: var(--stop); background: transparent; }

/* ---------------------------------------------------- Mandantenwahl */

.wahl-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--flaeche);
}
.wahl-liste li + li { border-top: 1px solid var(--linie); }

.wahl-liste a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem .9rem;
  color: var(--text);
  text-decoration: none;
}
.wahl-liste a:hover { background: var(--erhoben); text-decoration: none; }

.wahl-liste .firma { flex: 1; min-width: 0; }
.wahl-liste .firma b { display: block; font-weight: 500; }
.wahl-liste .firma span {
  display: block;
  font-size: .8125rem;
  color: var(--text-3);
  font-family: var(--mono);
}

.punkt {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--text-3);
}
.punkt.aktiv  { background: var(--ok); }
.punkt.setup  { background: var(--warn); }
.punkt.sperre { background: var(--stop); }

/* ---------------------------------------------------- Rahmen */

.kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  height: 52px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 10;
}
.kopf .marke { display: flex; align-items: center; gap: .55rem; color: var(--ac); }
.kopf .marke svg { width: 22px; height: auto; display: block; }
.kopf .marke b { font-weight: 500; color: var(--text); letter-spacing: -.01em; }

.kopf .mandant {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .6rem;
  font-size: .875rem;
  color: var(--text-2);
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--r);
}
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: .35rem; }

.icon-knopf {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
}
.icon-knopf:hover { background: var(--erhoben); border-color: var(--linie); }

/* v2.196.0 (Frodo: „die eingeengte Ansicht macht keinen Sinn — die ganze Breite des Monitors nutzen"): Arbeitsflaeche
   ueber die volle Breite wie die Artikeluebersicht. Lesetexte begrenzen sich selbst (max-width in ch), nicht die Seite. */
.rumpf { max-width: none; margin: 0; padding: 1.5rem 1.5rem 4rem; }

.rumpf h1 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 .25rem;
}
.rumpf .unter { color: var(--text-2); font-size: .875rem; margin: 0 0 1.75rem; }

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .875rem;
}
.kachel {
  padding: 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  box-shadow: var(--schatten);
}
.kachel h2 {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-2);
  margin: 0 0 .5rem;
  text-transform: none;
}
.kachel .zahl {
  font: 500 1.75rem/1 var(--sans);
  letter-spacing: -.02em;
}
.kachel .fuss { font-size: .8125rem; color: var(--text-3); margin-top: .4rem; }

.leer {
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px dashed var(--linie-2);
  border-radius: var(--r-2);
}
.leer b { display: block; color: var(--text); font-weight: 500; margin-bottom: .25rem; }

code, .mono { font-family: var(--mono); font-size: .875em; }

@media (max-width: 640px) {
  .kopf { gap: .6rem; padding: 0 .875rem; }
  .kopf .mandant { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rumpf { padding: 1.25rem .875rem 3rem; }
}


/* ---------------------------------------------------- Navigation */

.kopf { gap: .75rem; }

.nav {
  display: flex;
  align-items: center;
  gap: .125rem;
  margin-left: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  position: relative;
  flex: none;
  padding: .4rem .6rem;
  font-size: .875rem;
  color: var(--text-2);
  border-radius: var(--r);
  white-space: nowrap;
  text-decoration: none;
}
.nav a:hover { background: var(--erhoben); color: var(--text); text-decoration: none; }

.nav a[aria-current="page"] { color: var(--text); font-weight: 500; }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .6rem; right: .6rem; bottom: -12px;
  height: 2px;
  background: var(--ac);
  border-radius: 2px 2px 0 0;
}

.kopf .trenner {
  width: 1px;
  height: 20px;
  background: var(--linie);
  flex: none;
}

.sprachwahl {
  appearance: none;
  padding: .3rem 1.5rem .3rem .5rem;
  font: inherit;
  font-size: .8125rem;
  color: var(--text-2);
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6D66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right .45rem center;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
}
.sprachwahl:hover { background-color: var(--erhoben); border-color: var(--linie); }

@media (max-width: 900px) {
  .kopf .marke b { display: none; }
  .kopf .mandant { display: none; }
}
@media (max-width: 640px) {
  .nav { margin-left: 0; }
  .nav a { padding: .4rem .5rem; }
  .sprachwahl { display: none; }
}


/* ---------------------------------------------------- Listen */

.listenkopf {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.listenkopf > div:first-child { flex: 1; min-width: 0; }
.listenkopf h1 { margin-bottom: .15rem; }
.listenkopf .unter { margin-bottom: 0; }
/* v2.181.0 (Frodo: "die Menuefuehrung oben soll beim Wechseln wenigstens annaehernd gleich bleiben"):
   Aktionen stehen auf jeder Listenseite an derselben Stelle — rechts im Kopf, Hauptknopf ganz rechts,
   leise Knoepfe links davon, alle gleich hoch. Hilfesatz dahinter nur auf "?" (lk-hilfe). */
.listenkopf .lk-aktionen { display: flex; align-items: center; gap: .5rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.listenkopf .lk-aktionen .knopf { height: 2.5rem; padding: 0 1rem; width: auto; white-space: nowrap; display: inline-flex; align-items: center; }
.listenkopf .lk-aktionen form { margin: 0; display: contents; }
.lk-hilfe { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--text-3); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; }
.lk-hilfe[aria-expanded="true"] { border-color: var(--ac); color: var(--ac-text); }
.lk-hilfetext { margin: 0 0 1rem; max-width: 60ch; }
.lk-hilfetext[hidden] { display: none; }
@media (max-width: 640px) { .listenkopf .lk-aktionen { width: 100%; justify-content: flex-start; } }

.knopf.schmal { width: auto; padding: .45rem .85rem; font-size: .875rem; flex: none; }

.abschnitt {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 0 0 .25rem;
}

.suchleiste {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.suchleiste input {
  flex: 1;
  min-width: 0;
  padding: .55rem .75rem;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
.suchleiste input:focus {
  border-color: var(--ac);
  outline: none;
  box-shadow: 0 0 0 3px var(--ac-weich);
}

table.liste {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  overflow: hidden;
  font-size: .9375rem;
}
table.liste thead th {
  padding: .55rem .75rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-3);
  text-align: left;
  background: var(--erhoben);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
table.liste td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}
table.liste tbody tr:last-child td { border-bottom: none; }
table.liste tbody tr { cursor: pointer; }
table.liste tbody tr:hover td { background: var(--erhoben); }

table.liste .zahl-sp { text-align: right; }
table.liste.schmal-zeilen td { padding: .4rem .75rem; font-size: .875rem; }
/* v2.317.7: Zeilen, die per Klick ein Blatt/eine Seite öffnen (data-kunde-auf, data-blatt-auf …), sind anklickbar – Hand + Überfahren */
table.liste tbody tr:not([onclick]):not([data-kunde-auf]):not([data-blatt-auf]):not([data-href]):not([data-auf]) { cursor: default; }
table.liste tbody tr:not([onclick]):not([data-kunde-auf]):not([data-blatt-auf]):not([data-href]):not([data-auf]):hover td { background: transparent; }

.neben {
  display: block;
  font-size: .8125rem;
  color: var(--text-3);
  margin-top: .1rem;
}

.marke-klein {
  display: inline-block;
  padding: .1rem .4rem;
  margin-right: .25rem;
  font-size: .75rem;
  color: var(--ac-text);
  background: var(--ac-weich);
  border-radius: 3px;
  white-space: nowrap;
}

.blaettern {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem .25rem;
  font-size: .875rem;
  color: var(--text-3);
}
.blaettern a { margin-left: auto; }
.blaettern a + a { margin-left: .75rem; }

.kette {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--linie-2);
}
.kette li { padding: .45rem 0 .45rem 1rem; position: relative; }
.kette li::before {
  content: "";
  position: absolute;
  left: -5px; top: .95rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ac);
}
.kette .neben { display: inline; margin-left: .5rem; }

/* ---------------------------------------------------- Formulare */

/* Ein einspaltiges Formular bleibt schmal: lange Zeilen sind schwerer zu
   lesen, und ein Feld ueber die ganze Breite wirkt verloren. */
.formular { max-width: 44rem; }

/* Formulare mit vielen Kaesten: zwei feste Spalten statt eines Flusses.
   Beim Fluss (`columns`) entscheidet die Hoehe der Kaesten, was wo landet
   — dann steht die Bankverbindung ueber der Anschrift und die Seite wirkt
   zusammengewuerfelt. Mit festen Spalten steht jeder Kasten dort, wo er
   inhaltlich hingehoert. */
.formular.spalten {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
  align-items: start;
}
.formular.spalten > .spalte > .karte { margin-bottom: 1rem; }
.formular.spalten > .ganze-breite { grid-column: 1 / -1; margin-top: 0; }

/* Der Logokasten steht ueber dem Formular und nutzt die volle Breite —
   vier Ablagen nebeneinander brauchen Platz. */
.logokarte .ablagen { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

@media (max-width: 900px) {
  .formular.spalten { grid-template-columns: 1fr; }
}

.karte {
  padding: 1.125rem;
  margin-bottom: 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
}
.karte .feld:last-child { margin-bottom: 0; }

.reihe { display: flex; gap: .75rem; }
.reihe .feld { flex: 1; min-width: 0; }
.reihe .feld.schmal { flex: 0 0 8rem; }

.feld select,
.feld textarea {
  width: 100%;
  padding: .6rem .75rem;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
.feld select:focus,
.feld textarea:focus {
  border-color: var(--ac);
  outline: none;
  box-shadow: 0 0 0 3px var(--ac-weich);
}
.feld textarea { resize: vertical; min-height: 4.5rem; }
.feld input[readonly] { background: var(--erhoben); color: var(--text-2); }

.hilfe {
  display: block;
  font-size: .8125rem;
  color: var(--text-3);
  margin-top: .3rem;
}

.schalter {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  font-size: .9375rem;
  color: var(--text);
  cursor: pointer;
}
.schalter input { width: 16px; height: 16px; accent-color: var(--ac); margin: 0; }

.mehr { margin-bottom: 1rem; }
.mehr > summary {
  padding: .55rem .75rem;
  font-size: .875rem;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  cursor: pointer;
  list-style: none;
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::before { content: "+ "; color: var(--text-3); }
.mehr[open] > summary { border-radius: var(--r-2) var(--r-2) 0 0; border-bottom: none; }
.mehr[open] > summary::before { content: "– "; }
.mehr[open] .karte:first-of-type { border-radius: 0; border-top: none; }

.formularfuss { display: flex; gap: .6rem; }
.formularfuss .knopf { width: auto; padding: .6rem 1.25rem; }

@media (max-width: 640px) {
  .reihe { flex-wrap: wrap; }
  .reihe .feld, .reihe .feld.schmal { flex: 1 1 100%; }
  table.liste { font-size: .875rem; }
  table.liste td, table.liste thead th { padding: .5rem .55rem; }
  .listenkopf { flex-wrap: wrap; }
}


/* ==================================================== Touch & Kontextmenue
   Siehe docs/systemkarte.md Abschnitt 7. */

/* Tippziele: Zeilen und Bedienelemente auf 44 px. */
table.liste td { min-height: 44px; }
@media (pointer: coarse) {
  table.liste td      { padding: .8rem .75rem; }
  .icon-knopf         { width: 40px; height: 40px; }
  .nav a              { padding: .6rem .7rem; }
  .schalter           { padding: .55rem 0; }
  .schalter input     { width: 20px; height: 20px; }
  .wahl-liste a       { padding: 1rem .9rem; }
}

/* iOS zoomt bei Fokus, wenn die Schrift kleiner als 16 px ist. */
.feld input, .feld select, .feld textarea, .suchleiste input {
  font-size: 16px;
}

/* Kein Textmarkieren beim Long-Press oder Zwei-Finger-Tipp.
   Muss auch fuer die Kinder gelten: im Kartenmodus sind die Zellen eigene
   Bloecke und erben user-select nicht zuverlaessig. */
table.liste tbody tr,
table.liste tbody tr * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Ausnahme: in Eingabefeldern innerhalb einer Zeile bleibt Auswahl moeglich. */
table.liste tbody tr input,
table.liste tbody tr textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* -------------------------------------------------- Tabelle → Karten */

@media (max-width: 700px) {
  table.liste, table.liste tbody, table.liste tr, table.liste td {
    display: block;
    width: 100%;
  }
  table.liste { border: none; background: transparent; overflow: visible; }
  table.liste thead { display: none; }

  table.liste tbody tr {
    position: relative;
    padding: .8rem .9rem;
    margin-bottom: .5rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--r-2);
  }
  table.liste tbody tr:hover td { background: transparent; }

  table.liste td {
    padding: 0;
    border: none;
    min-height: 0;
  }
  /* Erste Spalte (Nummer) klein ueber den Titel, Titel gross darunter. */
  table.liste td:first-child {
    font-size: .75rem;
    color: var(--text-3);
    margin-bottom: .15rem;
  }
  table.liste td:nth-child(2) { font-size: 1rem; margin-bottom: .35rem; }

  /* Kennzahlen nebeneinander in einer Zeile statt untereinander. */
  table.liste td:nth-child(n+3) {
    display: inline-block;
    width: auto;
    margin-right: 1rem;
    font-size: .8125rem;
    color: var(--text-2);
    text-align: left;
  }
  table.liste td.zahl-sp { text-align: left; }
  table.liste .neben { display: inline; margin-left: .4rem; }
}

/* -------------------------------------------------- Kontextmenue */

#ctxMenu {
  position: fixed;
  z-index: 200;
  min-width: 11rem;
  padding: .25rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r-2);
  box-shadow: 0 4px 14px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.1);
  display: none;
}
#ctxMenu.offen { display: block; }

#ctxMenu button {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 40px;
  padding: .5rem .65rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
}
#ctxMenu button:hover,
#ctxMenu button:focus-visible { background: var(--erhoben); }
#ctxMenu button.stop { color: var(--stop); }
#ctxMenu hr { margin: .25rem .4rem; border: none; border-top: 1px solid var(--linie); }

@media (pointer: coarse) {
  #ctxMenu { min-width: 13rem; }
  #ctxMenu button { min-height: 48px; font-size: 1rem; }
}

/* Zeile, auf der das Menue geoeffnet ist. */
tr.ctx-aktiv td { background: var(--ac-weich) !important; }

/* Im Kartenmodus die ganze Karte einfaerben, nicht die einzelnen Bloecke —
   sonst sieht die Markierung aus wie eine zerfranste Textauswahl. */
@media (max-width: 700px) {
  table.liste tbody tr.ctx-aktiv {
    background: var(--ac-weich);
    border-color: var(--ac);
  }
  table.liste tbody tr.ctx-aktiv td { background: transparent !important; }
}


/* ==================================================== Erfassungshilfen */

.vorschlaege {
  position: absolute;
  z-index: 60;
  top: 100%;
  left: 0; right: 0;
  margin-top: .2rem;
  max-height: 15rem;
  overflow-y: auto;
  padding: .2rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r-2);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  display: none;
}
.vorschlaege.offen { display: block; }

.vorschlaege button {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  width: 100%;
  min-height: 40px;
  padding: .45rem .6rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
}
.vorschlaege button b { font-weight: 500; }
.vorschlaege button span { font-size: .8125rem; color: var(--text-3); }
.vorschlaege button:hover,
.vorschlaege button.aktiv { background: var(--erhoben); }

/* Ergaenzte Felder sind sichtbar Vorschlag, nicht gepruefte Eingabe. */
input.ergaenzt {
  border-color: var(--ac) !important;
  background-image: linear-gradient(var(--ac-weich), var(--ac-weich));
}

.dublette {
  display: none;
  margin-top: .75rem;
  padding: .6rem .75rem;
  font-size: .875rem;
  background: var(--erhoben);
  border: 1px solid var(--linie-2);
  border-left: 3px solid var(--warn);
  border-radius: var(--r);
}
.dublette.offen { display: block; }
.dublette b { display: block; font-weight: 500; margin-bottom: .35rem; }
.dublette a {
  display: block;
  padding: .2rem 0;
  color: var(--text);
}
.dublette a span { color: var(--text-3); font-family: var(--mono); font-size: .8125rem; }

@media (pointer: coarse) {
  .vorschlaege button { min-height: 48px; font-size: 1rem; }
  .dublette a { padding: .45rem 0; }
}


/* ---------------------------------------------------- Kiosk im Backoffice */

.kopplungscode {
  font: 500 2.25rem/1 var(--mono);
  letter-spacing: .3em;
  text-align: center;
  padding: 1rem;
  color: var(--ac-text);
  background: var(--ac-weich);
  border-radius: var(--r-2);
}

.terminalleiste {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .6rem .75rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
}
.terminalleiste select {
  padding: .4rem .6rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
.terminalleiste .knopf { width: auto; }


/* ---------------------------------------------------- Klappmenue */

details.klappmenue { position: relative; }
details.klappmenue > summary {
  list-style: none;
  cursor: pointer;
}
details.klappmenue > summary::-webkit-details-marker { display: none; }
details.klappmenue.aktiv > summary { color: var(--ac-text); background: var(--ac-weich); }
details.klappmenue[open] > summary { background: var(--erhoben); border-color: var(--linie); }

.klappinhalt {
  position: absolute;
  z-index: 80;
  top: calc(100% + .4rem);
  right: 0;
  min-width: 13rem;
  padding: .3rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r-2);
  box-shadow: 0 6px 18px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.1);
}
.klapptitel {
  padding: .35rem .65rem .5rem;
  font-size: .75rem;
  color: var(--text-3);
}
.klappinhalt a {
  display: block;
  min-height: 40px;
  padding: .55rem .65rem;
  font-size: .9375rem;
  color: var(--text);
  border-radius: var(--r);
  text-decoration: none;
}
.klappinhalt a:hover { background: var(--erhoben); text-decoration: none; }
.klappinhalt hr { margin: .3rem .4rem; border: none; border-top: 1px solid var(--linie); }

@media (pointer: coarse) {
  .klappinhalt { min-width: 15rem; }
  .klappinhalt a { min-height: 48px; padding: .7rem .75rem; font-size: 1rem; }
}

/* ---------------------------------------------------- Zaehler in der Navigation */

.nav a .zaehler {
  display: inline-block;
  min-width: 18px;
  margin-left: .3rem;
  padding: 0 .3rem;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--ac);
  border-radius: 9px;
  vertical-align: 1px;
}

/* ---------------------------------------------------- Klickbare Kachel */

.kachel.klickbar {
  display: block;
  color: var(--text);
  text-decoration: none;
  transition: border-color .12s ease;
}
.kachel.klickbar:hover {
  border-color: var(--linie-2);
  background: var(--erhoben);
  text-decoration: none;
}
.kachel.klickbar h2 {
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}


/* ==================================================== Mobile Navigation
   Unter 700 px: Burger + Seitenmenue statt horizontal scrollender Leiste.
   Eine scrollende Leiste am Handy ist immer ein Kompromiss — man sieht
   nie, wie viel noch kommt, und trifft schlecht. */

/* Wackeln des Sticky-Headers verhindern: Richtungen sauber trennen. */
.kopf { touch-action: pan-y; }
.nav  { overscroll-behavior-x: contain; touch-action: pan-x; }

.burger { display: none; }

@media (max-width: 700px) {
  .kopf > .nav       { display: none; }
  .kopf .trenner     { display: none; }
  .kopf .klappmenue  { display: none; }   /* Einstellungen wandern ins Panel */

  .burger {
    display: grid;
    place-items: center;
    position: relative;
    width: 40px; height: 40px;
    flex: none;
    margin-left: -.25rem;
    color: var(--text-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r);
    cursor: pointer;
  }
  .burger:hover { background: var(--erhoben); }

  /* Zaehler am Burger — sichtbar, ohne das Menue zu oeffnen. */
  .burger .zaehler {
    position: absolute;
    top: 4px; right: 3px;
    min-width: 16px;
    padding: 0 .25rem;
    font-size: .625rem;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: var(--ac);
    border: 2px solid var(--flaeche);
    border-radius: 9px;
  }

  /* Logo als eigenstaendiges Tippziel — fuehrt zur Uebersicht. */
  .kopf .marke {
    min-height: 40px;
    padding: 0 .5rem;
    margin-left: .1rem;
    border-radius: var(--r);
  }
  .kopf .marke:active { background: var(--erhoben); }
}

.menuegrund {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15,15,13,.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.menuegrund.offen { opacity: 1; pointer-events: auto; }

.seitenmenue {
  position: fixed;
  z-index: 91;
  top: 0; bottom: 0; left: 0;
  width: min(19rem, 84vw);
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  transform: translateX(-100%);
  transition: transform .2s ease;
  overscroll-behavior: contain;
}
.seitenmenue.offen { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .menuegrund, .seitenmenue { transition: none; }
}

.seitenmenue .kopfzeile {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1rem .75rem;
  border-bottom: 1px solid var(--linie);
}
.seitenmenue .kopfzeile svg { width: 24px; height: auto; color: var(--ac); }
.seitenmenue .kopfzeile b { font-weight: 500; letter-spacing: -.01em; }
.seitenmenue .kopfzeile .firma {
  display: block;
  font-size: .8125rem;
  color: var(--text-3);
}

.seitenmenue nav {
  flex: 1;
  overflow-y: auto;
  padding: .5rem;
}
.seitenmenue nav a {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: .7rem .75rem;
  font-size: 1.0625rem;
  color: var(--text);
  border-radius: var(--r);
  text-decoration: none;
}
.seitenmenue nav a:active { background: var(--erhoben); text-decoration: none; }
.seitenmenue nav a[aria-current="page"] {
  font-weight: 500;
  color: var(--ac-text);
  background: var(--ac-weich);
}
.seitenmenue nav a .zaehler {
  min-width: 20px;
  margin-left: auto;
  padding: 0 .35rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: var(--ac);
  border-radius: 10px;
}

.seitenmenue .abschnittstitel {
  padding: 1rem .75rem .3rem;
  font-size: .75rem;
  color: var(--text-3);
  border-top: 1px solid var(--linie);
  margin-top: .5rem;
}
.seitenmenue nav a.leiser { font-size: .9375rem; color: var(--text-2); min-height: 46px; }


/* ---------------------------------------------------- Zwei-Finger-Tipp
   Safari macht aus zwei Fingern sonst eine Zoom-Geste, bevor das Skript
   ueberhaupt drankommt — dann wackelt die Ansicht und das Kontextmenue
   oeffnet nie. In Listen deshalb nur senkrechtes Scrollen erlauben. */

table.liste,
.wahl-liste,
.kacheln {
  touch-action: pan-y;
}
table.liste tbody tr {
  touch-action: pan-y;
  -webkit-touch-callout: none;
}


/* ---------------------------------------------------- Detailseiten */

/* Spalten statt Raster: Bloecke sind unterschiedlich hoch, ein starres
   Raster laesst sonst Loecher. */
.bloecke {
  columns: 2;
  column-gap: .875rem;
}
.bloecke > .karte {
  break-inside: avoid;
  margin: 0 0 .875rem;
}
.bloecke .abschnitt {
  margin-bottom: .5rem;
  color: var(--text-3);
  font-size: .75rem;
  font-weight: 500;
}

.wertzeile {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: .9375rem;
}
.wertzeile:last-child { border-bottom: none; padding-bottom: 0; }

/* Beschriftung nur so breit wie noetig — sonst steht der Wert weit rechts
   und die Zeile zerfaellt optisch in zwei Haelften. */
.wertzeile > span {
  flex: 0 0 7rem;
  color: var(--text-3);
  font-size: .875rem;
}
.wertzeile > b,
.wertzeile > a {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow-wrap: break-word;
}
.wertzeile > a { font-weight: 400; }

.notiz {
  margin: 0 0 .6rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--linie);
  white-space: pre-wrap;
  font-size: .9375rem;
}

.marke-klein.stop { color: var(--stop); background: transparent; border: 1px solid var(--stop); }

.listenkopf .unter .marke-klein { margin-left: .35rem; }

@media (max-width: 1100px) {
  .bloecke { columns: 2; }
}
@media (max-width: 760px) {
  .bloecke { columns: 1; }
}
@media (max-width: 480px) {
  .wertzeile { flex-wrap: wrap; gap: .1rem; }
  .wertzeile > span { flex: 1 1 100%; }
}


/* ---------------------------------------------------- Kundenkarte */

.kartenform {
  display: flex;
  gap: .5rem;
  margin-top: .25rem;
}
.kartenform input {
  flex: 1;
  min-width: 0;
  padding: .5rem .65rem;
  font: inherit;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
.kartenform input:focus {
  border-color: var(--ac);
  outline: none;
  box-shadow: 0 0 0 3px var(--ac-weich);
}
.kartenform .knopf { width: auto; flex: none; }


/* ---------------------------------------------------- Ablauf-Liste */

.ablauf {
  margin: 0;
  padding-left: 1.25rem;
  font-size: .9375rem;
  color: var(--text-2);
}
.ablauf li { padding: .2rem 0; }
.ablauf li::marker { color: var(--ac); font-weight: 500; }


/* ---------------------------------------------------- Kartendesigner */

.editor {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: 1.25rem;
  align-items: start;
}

.seitenwahl { display: flex; gap: .25rem; margin-bottom: .75rem; }
.seitenwahl button {
  padding: .45rem .9rem;
  font: inherit;
  font-size: .875rem;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  cursor: pointer;
}
.seitenwahl button.aktiv {
  color: var(--ac-text);
  background: var(--ac-weich);
  border-color: var(--ac);
}

/* Buehne und Vorschau liegen uebereinander: unten das gerenderte Ergebnis
   vom Server, darueber die verschiebbaren Rahmen. So sieht man beim
   Ziehen sofort, was herauskommt. */
.buehne-rahmen {
  position: relative;
  width: 100%;
  aspect-ratio: 90 / 58;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  overflow: hidden;
}

.vorschau { position: absolute; inset: 0; }
.vorschau .kartenseite {
  position: absolute; inset: 0;
  transform-origin: top left;
}

.buehne { position: absolute; inset: 0; z-index: 2; touch-action: none; }

.buehne .anschnitt,
.buehne .sicher { position: absolute; pointer-events: none; }
.buehne .anschnitt {
  top: 2.22%; right: 2.22%; bottom: 3.45%; left: 2.22%;
  outline: 1px dashed rgba(220,50,50,.45);
}
.buehne .sicher {
  top: 5.55%; right: 5.55%; bottom: 8.62%; left: 5.55%;
  outline: 1px dotted rgba(40,120,220,.4);
}

.buehne .el {
  position: absolute;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: grab;
}
.buehne .el:hover { border-color: rgba(40,120,220,.5); }
.buehne .el.gewaehlt {
  border-color: var(--ac);
  background: rgba(15,110,86,.07);
  cursor: grabbing;
}
.buehne .el .marke {
  position: absolute;
  top: -1.15rem; left: -1px;
  padding: 0 .3rem;
  font-size: .625rem;
  line-height: 1.1rem;
  color: #fff;
  background: var(--ac);
  border-radius: 3px 3px 0 0;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}
.buehne .el.gewaehlt .marke { opacity: 1; }

.buehne .el .griff {
  position: absolute;
  right: -5px; bottom: -5px;
  width: 11px; height: 11px;
  background: var(--flaeche);
  border: 2px solid var(--ac);
  border-radius: 2px;
  opacity: 0;
  cursor: nwse-resize;
}
.buehne .el.gewaehlt .griff { opacity: 1; }

/* ---- Seitenleiste */

/* Seitenleiste als abgesetzte Flaeche — wie die Werkzeugleiste oben.
   Ohne Absetzung schwimmen die Eintraege im Hintergrund. */
.editor-seite {
  padding: .75rem .8rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
}
.editor-seite section {
  margin-bottom: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--linie);
}
.editor-seite section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.editor-seite .abschnitt { font-size: .75rem; color: var(--text-3); margin-bottom: .5rem; }

/* Auf der abgesetzten Flaeche brauchen Eingaben einen eigenen Grund,
   sonst verschwimmen sie damit. */
.editor-seite input,
.editor-seite select { background: var(--bg); }


#eigenschaften .feld { margin-bottom: .6rem; }
#eigenschaften label { font-size: .8125rem; color: var(--text-3); }
#eigenschaften input,
#eigenschaften select {
  width: 100%;
  padding: .4rem .5rem;
  font: inherit; font-size: .875rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}

.farbwahl { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.farbfeld {
  padding: 0; line-height: 0;
  background: none; border: none; cursor: pointer;
  border-radius: 8px;
}
.farbfeld .tupfer {
  display: block;
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,.14);
}
.farbfeld.aktiv .tupfer { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--ac); }
.farbwahl input[type="color"] {
  width: 30px; height: 30px;
  padding: 0;
  border: 1px dashed var(--linie-2);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}

.editor-fuss { display: flex; gap: .5rem; }
.editor-fuss .knopf { width: auto; flex: 1; }

@media (max-width: 900px) {
  .editor { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .buehne .el .griff { width: 18px; height: 18px; right: -9px; bottom: -9px; opacity: 1; }
  .farbfeld .tupfer, .farbwahl input[type="color"] { width: 40px; height: 40px; }
}


/* ---------------------------------------------------- Reiter */

.reiter {
  display: flex;
  gap: .125rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--linie);
}
.reiter a {
  position: relative;
  padding: .55rem .85rem;
  font-size: .9375rem;
  color: var(--text-2);
  text-decoration: none;
}
.reiter a:hover { color: var(--text); text-decoration: none; }
.reiter a.aktiv { color: var(--text); font-weight: 500; }
.reiter a.aktiv::after {
  content: "";
  position: absolute;
  left: .5rem; right: .5rem; bottom: -1px;
  height: 2px;
  background: var(--ac);
  border-radius: 2px 2px 0 0;
}

.zahlenleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  color: var(--text-3);
}
.zahlenleiste b {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
  margin-right: .25rem;
}
.zahlenleiste .warn b { color: var(--warn); }

/* ---------------------------------------------------- Kartenpruefung */

.pruefergebnis {
  margin-top: 1rem;
  padding: 1rem 1.125rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie-2);
  border-radius: var(--r-2);
}
.pruefergebnis b { display: block; font-weight: 500; font-size: 1rem; }
.pruefergebnis p { margin: .3rem 0 .6rem; font-size: .9375rem; color: var(--text-2); }
.pruefergebnis .knopf { width: auto; }

.pruefergebnis.gut     { border-left-color: var(--ok); }
.pruefergebnis.gut b   { color: var(--ok); }
.pruefergebnis.neutral { border-left-color: var(--warn); }
.pruefergebnis.stop    { border-left-color: var(--stop); }
.pruefergebnis.stop b  { color: var(--stop); }

@media (max-width: 640px) {
  .reiter { overflow-x: auto; scrollbar-width: none; }
  .reiter::-webkit-scrollbar { display: none; }
  .reiter a { white-space: nowrap; }
}


/* ---------------------------------------------------- Farbeingabe */

.hexfeld { margin-top: .6rem; }
.hexreihe { display: flex; gap: .4rem; }
.hexreihe .farbfeld {
  flex: none;
  width: 38px; height: 38px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: var(--r);
}
.hexreihe .farbfeld.aktiv {
  box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--ac);
}

.hexreihe input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: .45rem .55rem;
  font-size: .9375rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
.hexreihe input[type="text"]:focus {
  border-color: var(--ac);
  outline: none;
  box-shadow: 0 0 0 3px var(--ac-weich);
}
.hexreihe input[type="text"].fehlt { border-color: var(--stop); }

/* Der Farbwaehler sah vorher aus wie ein weiterer Tupfer. Jetzt als
   eigener Knopf mit Rahmen, damit er als Werkzeug erkennbar ist. */
.hexreihe input[type="color"] {
  flex: none;
  width: 42px; height: 38px;
  padding: 3px;
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
  cursor: pointer;
}
.hexreihe input[type="color"]:hover { border-color: var(--ac); }

.elementname {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ac-text);
  padding: .2rem .45rem;
  background: var(--ac-weich);
  border-radius: var(--r);
  display: inline-block;
}


.vorschaufehler {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  margin: 0;
  padding: .5rem .75rem;
  font-size: .8125rem;
  color: #fff;
  background: var(--stop);
}


/* ---------------------------------------------------- Firmenseite */

.personenzeile {
  display: flex;
  gap: .5rem;
  margin-bottom: .5rem;
}
.personenzeile input {
  flex: 1;
  min-width: 0;
  padding: .5rem .65rem;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
.personenzeile input:focus {
  border-color: var(--ac); outline: none; box-shadow: 0 0 0 3px var(--ac-weich);
}
.personenzeile .weg { flex: none; width: auto; padding: .4rem .7rem; }

/* Schalter mit Erklaerung — bei steuerlichen Angaben muss klar sein, was
   das Haekchen bewirkt. Eigener Name, weil `.schalter` woanders schon
   einen schlichteren Entwurf hat. */
.schalter-erklaert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-top: .75rem;
  padding: .75rem .875rem;
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  cursor: pointer;
}
.schalter-erklaert input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ac); }
.schalter-erklaert span { font-size: .875rem; color: var(--text-3); line-height: 1.5; }
.schalter-erklaert b { display: block; font-weight: 500; color: var(--text); font-size: .9375rem; }

.druckhinweis { color: var(--text-3); font-style: italic; }


/* ---------------------------------------------------- Kartenentwuerfe */

.entwuerfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--linie);
}
.entwurfwahl {
  margin: 0;
  min-width: 13rem;
  padding: .45rem .6rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
.entwurfname {
  min-width: 11rem;
  padding: .45rem .6rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
.entwurfname:focus {
  border-color: var(--ac); outline: none; box-shadow: 0 0 0 3px var(--ac-weich);
}

.entwuerfe .knopf { width: auto; }
.entwuerfe .hilfe { margin: 0; }

/* Speicherstand. Ruhig gehalten: Autospeichern soll beilaeufig sein,
   nicht bei jeder Bewegung Alarm schlagen. */
.entwuerfe .merker {
  margin-left: auto;
  padding: .25rem .6rem;
  font-size: .8125rem;
  color: var(--text-3);
  border-radius: 999px;
  transition: color .15s ease;
}
.entwuerfe .merker.laeuft { color: var(--text-3); }
.entwuerfe .merker.gut    { color: var(--ok); }
.entwuerfe .merker.stop   { color: var(--stop); background: rgba(180,60,50,.1); }

@media (max-width: 640px) {
  .entwuerfe .merker { margin-left: 0; }
  .entwurfwahl { min-width: 0; flex: 1 1 100%; }
}


/* Textbearbeitung an Ort und Stelle. Bewusst als deutlich erkennbares
   Eingabefeld statt durchsichtig ueber dem Text: sonst weiss man nicht,
   ob man gerade tippt oder verschiebt. */
.buehne .el-eingabe {
  position: absolute;
  inset: -2px -4px;
  width: calc(100% + 8px);
  padding: 0 4px;
  font-family: inherit;
  line-height: 1.2;
  color: #141412;
  background: #fff;
  border: 2px solid var(--ac);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  z-index: 4;
}
.buehne .el-eingabe:focus { outline: none; }


/* Bedienhinweise eingeklappt — sie werden einmal gelesen, nicht staendig. */
.hinweise { margin-top: .75rem; }
.hinweise summary {
  font-size: .8125rem;
  color: var(--text-3);
  cursor: pointer;
  list-style: none;
}
.hinweise summary::-webkit-details-marker { display: none; }
.hinweise summary::before { content: "› "; }
.hinweise[open] summary::before { content: "⌄ "; }
.hinweise p {
  margin: .5rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-3);
}

@media (pointer: coarse) {
  .farbleiste .farbfeld .tupfer,
  .farbleiste #eigen_tupfer { width: 36px; height: 36px; }
}


/* Farbrolle als Hinweis statt als zweite Bedienstelle — gewaehlt wird
   sie im Kontextmenue. */
.elementfarbe {
  margin: .5rem 0 0;
  font-size: .8125rem;
  color: var(--text-3);
}




@media (pointer: coarse) {
  .elzeile { padding: .55rem .5rem; }
}


/* ------------------------------------------- Farbwahl am Element

   Die einzige Stelle, an der Elementfarben eingestellt werden. Karte
   oben, Form im Kontextmenue, Farbe hier. */

.feldtitel {
  display: block;
  margin: .75rem 0 .35rem;
  font-size: .8125rem;
  color: var(--text-3);
}
#eigenschaften .feldtitel:first-of-type { margin-top: .25rem; }

.elfarben {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .4rem;
}
.elfarben .farbfeld { padding: 0; border: none; background: none; cursor: pointer; }
.elfarben .tupfer {
  display: block;
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.18);
}
.elfarben .farbfeld.aktiv .tupfer {
  box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--ac);
}
/* Automatik: schraffiert, damit sie sich von einer Farbe unterscheidet */
.elfarben .auto .tupfer {
  background: repeating-linear-gradient(45deg,
    var(--erhoben) 0 4px, var(--linie-2) 4px 8px);
}

#eigenschaften .reihe { display: flex; gap: .4rem; }
#eigenschaften .reihe input {
  flex: 1; min-width: 0;
  padding: .4rem .5rem;
  font: inherit; font-size: .875rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
#eigenschaften .hexreihe { display: flex; gap: .4rem; }
#eigenschaften .hexreihe input[type="text"] {
  flex: 1; min-width: 0;
  padding: .4rem .5rem;
  font-size: .875rem;
  text-transform: uppercase;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
#eigenschaften .hexreihe input[type="color"] {
  flex: none; width: 34px; height: 32px;
  padding: 2px;
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
  cursor: pointer;
}

/* Elementliste.

   Bewusst ohne Kindelemente: eine Zeile ist ein Knopf mit Text, die Farbe
   steckt im linken Rand. Ein Farbtupfer als eigenes Element blaehte sich
   in der Flexbox auf und zog die Zeilen auseinander. */
#elementliste { display: block; }

.elzeile {
  display: block;
  width: 100%;
  margin: 0 0 2px;
  padding: .45rem .55rem;
  font: inherit;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--text-2);
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--r) var(--r) 0;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.elzeile:hover { background: var(--erhoben); }
.elzeile.aktiv {
  color: var(--ac-text);
  background: var(--ac-weich);
  font-weight: 500;
}


/* Karte als Eintrag in der Elementliste — sie liegt ja auch ganz unten. */
.elzeile.karte {
  margin-top: .35rem;
  padding-top: .5rem;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  color: var(--text-3);
}
.elzeile.karte.aktiv { color: var(--ac-text); background: var(--ac-weich); }

/* Zwei Knoepfe nebeneinander, einer davon aktiv */
.wahlreihe { display: flex; gap: .3rem; margin-bottom: .3rem; }
.wahlreihe .wahl {
  flex: 1;
  padding: .4rem .5rem;
  font: inherit;
  font-size: .8125rem;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
  cursor: pointer;
}
.wahlreihe .wahl.aktiv {
  color: var(--ac-text);
  background: var(--ac-weich);
  border-color: var(--ac);
  font-weight: 500;
}

/* Mehr Platz in der Seitenleiste: das Scrollen war das eigentliche Aergernis. */
@media (min-width: 1100px) {
  .editor { grid-template-columns: 1fr 23rem; }
}


/* ================================================ Kartendesigner, Zeilen

   Werkzeuge und Farben liegen ueber der Buehne, wo Breite ist. Die
   Seitenleiste traegt nur Auswahl und Werte — dann muss man dort nicht
   scrollen. */

/* Werkzeuge und Farben als eine ruhige Leiste ueber der Buehne. Ohne
   Rahmen wirken die Knoepfe verstreut, mit Rahmen als Werkzeugkasten. */
.leiste-oben {
  padding: .5rem .6rem;
  margin-bottom: .75rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
}
.werkzeuge, .farbleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
}
.werkzeuge { margin-bottom: .45rem; padding-bottom: .45rem; border-bottom: 1px solid var(--linie); }
.werkzeuge .beschriftung,
.farbleiste .beschriftung {
  margin-right: .4rem;
  font-size: .8125rem;
  color: var(--text-3);
  white-space: nowrap;
}
/* Fester Platz fuer die Automatik: erscheint sie nur bei manchen
   Elementen, ruecken sonst alle Tupfer um eine Stelle. */
#farbautomatik {
  display: inline-block;
  width: 24px;
  height: 24px;
}

.werkzeug {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .5rem;
  font: inherit;
  font-size: .78rem;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
  cursor: pointer;
}
.werkzeug:hover { color: var(--text); border-color: var(--text-3); }
.werkzeug .plus { color: var(--ac); font-weight: 600; }

.farbleiste .farbfeld { padding: 0; background: none; border: none; cursor: pointer; }
.farbleiste .tupfer {
  display: block;
  width: 24px; height: 24px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.18);
}
.farbleiste .farbfeld.aktiv .tupfer {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ac);
}
.farbleiste .auto .tupfer {
  background: repeating-linear-gradient(45deg,
    var(--erhoben) 0 4px, var(--linie-2) 4px 8px);
}
.farbleiste .trennstrich {
  width: 1px; height: 20px;
  margin: 0 .25rem;
  background: var(--linie-2);
}
.farbleiste .hexklein {
  width: 6.5rem;
  padding: .3rem .45rem;
  font-size: .8125rem;
  text-transform: uppercase;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
}
.farbleiste .hexklein:focus {
  border-color: var(--ac); outline: none; box-shadow: 0 0 0 3px var(--ac-weich);
}
.farbleiste .hexklein.fehlt { border-color: var(--stop); }
.farbleiste input[type="color"] {
  width: 28px; height: 26px;
  padding: 2px;
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r);
  cursor: pointer;
}

/* Unter der Karte: Seitenwahl links, Speichern rechts */
.unterleiste {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}
.unterleiste .fuellen { flex: 1; }
.unterleiste .knopf { width: auto; }
.unterleiste .seitenwahl { margin: 0; }

@media (pointer: coarse) {
  .farbleiste .tupfer { width: 34px; height: 34px; }
  .werkzeug { padding: .5rem .7rem; }
}
@media (max-width: 640px) {
  .unterleiste { flex-wrap: wrap; }
  .unterleiste .fuellen { display: none; }
  .unterleiste .knopf { flex: 1; }
}


/* ---------------------------------------------------- Liste: Sperre und Ziehen */

.elzeile { position: relative; touch-action: none; }
.elzeile .schloss { margin-right: .35rem; font-size: .75rem; opacity: .7; }
.elzeile.gesperrt { color: var(--text-3); }

.elzeile.zieht { opacity: .5; }
.elzeile.zielt { box-shadow: inset 0 2px 0 var(--ac); }

/* Gesperrte Elemente auf der Buehne: sichtbar, aber nicht anfassbar */
.buehne .el.gesperrt { cursor: not-allowed; }
.buehne .el.gesperrt .griff { display: none; }
.buehne .el.gesperrt.gewaehlt {
  border-style: dashed;
  background: rgba(140,140,140,.08);
}


/* ==================================================== Ablageflaeche

   Ein Muster fuer alle Datei-Uploads. Ziehen oder tippen — beides muss
   gehen: am Schreibtisch zieht man, am Handy tippt man. */

/* Gleiche Breite wie die Formularkarten darunter — sonst ragt der Block
   heraus und die Seite wirkt schief. */

.ablagen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem;
}

.ablage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 7rem;
  padding: .65rem .5rem;
  text-align: center;
  background: var(--bg);
  border: 2px dashed var(--linie-2);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.ablage:hover  { border-color: var(--text-3); }
.ablage:focus  { outline: none; border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-weich); }

/* Beim Darueberziehen deutlich sichtbar — sonst weiss man nicht, ob man
   ueber der richtigen Flaeche ist. */
.ablage.bereit {
  border-color: var(--ac);
  border-style: solid;
  background: var(--ac-weich);
}
.ablage.laeuft { opacity: .6; pointer-events: none; }
.ablage.gefuellt { border-style: solid; border-color: var(--linie); }

.ablage-titel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  font-size: .75rem;
  line-height: 1.3;
  color: var(--text-3);
  text-align: center;
}

.ablage-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 100%;
}
.ablage-inhalt img {
  max-width: 100%;
  max-height: 4rem;
  object-fit: contain;
}

.ablage-leer b {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-2);
}
.ablage-leer span {
  font-size: .75rem;
  color: var(--text-3);
}

.ablage-name {
  font-size: .75rem;
  color: var(--text-3);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ablage-name span { margin-left: .35rem; opacity: .75; }

.ablage .knopf { width: auto; }

.ablage-meldung {
  margin: 0;
  font-size: .8125rem;
  color: var(--stop);
}


/* ==================================================== Hinweismarke

   Kurzerklaerung fuer Fachbegriffe. Kein `title`-Attribut: das erscheint
   erst nach einer Sekunde und gibt es am Handy gar nicht. */

.hinweis-marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  margin-left: .3rem;
  font-size: .625rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-3);
  background: var(--erhoben);
  border: 1px solid var(--linie-2);
  border-radius: 50%;
  cursor: help;
  position: relative;
  vertical-align: 1px;
}
.hinweis-marke:hover,
.hinweis-marke:focus { color: var(--ac-text); border-color: var(--ac); outline: none; }

.hinweis-marke::after {
  content: attr(data-hinweis);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  width: max-content;
  max-width: 17rem;
  padding: .5rem .65rem;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-2);
  border-radius: var(--r-2);
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.hinweis-marke:hover::after,
.hinweis-marke:focus::after { opacity: 1; }

/* Am oberen Rand nach unten klappen, sonst steht der Text ausserhalb */
.ablage .hinweis-marke::after { bottom: auto; top: calc(100% + 8px); }

@media (pointer: coarse) {
  .hinweis-marke { width: 20px; height: 20px; font-size: .75rem; }
}


/* ==================================================== Autospeichern

   Der Stand steht dort, wo frueher der Speicherknopf war: unten am Ende
   des Formulars. Wer fertig ausgefuellt hat, schaut dorthin. */

/* Steht in der Spalte unter dem letzten Kasten, nicht am Seitenende —
   dort saehe man den Speicherstand erst nach dem Scrollen. */
.fussleiste {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding: 0 .25rem;
}
.fussleiste .hilfe { margin: 0; line-height: 1.5; }
.fussleiste .speicherstand { padding-left: 0; }

.speicherstand {
  padding: .3rem .7rem;
  font-size: .8125rem;
  color: var(--text-3);
  border-radius: 999px;
  transition: color .15s ease;
}
.speicherstand.laeuft { color: var(--text-3); }
.speicherstand.gut    { color: var(--ok); background: rgba(20,150,110,.1); }
.speicherstand.stop   { color: var(--stop); background: rgba(180,60,50,.1); }


/* ------------------------------------------- Vorschau hochgeladener Logos

   Jede Fassung wird auf dem Untergrund gezeigt, fuer den sie gedacht ist.
   Ein weisses Logo auf heller Flaeche waere unsichtbar — dann weiss man
   nicht, ob ueberhaupt etwas angekommen ist. */

.vorschau-grund {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.4rem;
  padding: .4rem .6rem;
  border-radius: var(--r);
  border: 1px solid rgba(128,128,128,.25);
}
.vorschau-grund img {
  max-width: 100%;
  max-height: 3rem;
  object-fit: contain;
  display: block;
}

/* Vollfarbe und Bildmarke: heller, neutraler Grund wie auf Papier */
.grund-standard,
.grund-symbol { background: #F4F3F0; }

/* Helle Fassung gehoert auf Dunkles */
.grund-hell { background: #24222B; }

/* Dunkle Fassung gehoert auf Helles */
.grund-dunkel { background: #FFFFFF; }




/* Aktionen des eigenen Entwurfs — beim Betrachten einer Vorlage aus. */
.entwurfaktionen { display: contents; }
.entwurfaktionen[hidden] { display: none; }


/* Speichern in der Kopfzeile: farbig, damit es sich abhebt, aber so
   schmal wie die Nachbarn — ein grosser Knopf zwischen kleinen wirkt
   fehl am Platz. */
.entwuerfe #speichern {
  width: auto;
  padding: .38rem .95rem;
  font-size: .875rem;
}


/* Speicherstand ueber der Knopfreihe. Eigene Zeile mit fester Hoehe,
   damit der wechselnde Text nichts verschiebt — in der Knopfreihe
   sprang bei jedem Wechsel die halbe Seite. */
.standzeile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 1.6rem;
  margin: 0 0 .3rem;
}
.standzeile .merker { padding: .15rem .6rem; font-size: .8125rem; }


/* Speicherstand ueber der Knopfreihe, mit fester Hoehe. Der Text wechselt
   staendig ("Speichert …", "Gespeichert 04:32") — zwischen den Knoepfen
   wuerde er deren Breite aendern und die Seite bei jedem Speichern
   springen lassen. */
.standzeile {
  min-height: 1.4rem;
  margin-bottom: .35rem;
  font-size: .8125rem;
  line-height: 1.4rem;
}
.standzeile .merker {
  padding: 0;
  background: none;
  color: var(--text-3);
}
.standzeile .merker.gut  { color: var(--ok); }
.standzeile .merker.stop { color: var(--stop); }
.standzeile .merker.laeuft { color: var(--text-3); }

/* v2.18.0: Zahlen-Spinner systemweit gestrichen (Frodo: "die brauch keiner") */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* ------------------------------------------------------------------
   Lagerkopf — Zusammenfassung ueber der Artikelliste.
   Form nach FM-Vorbild (grosser Wert, kleines Etikett, Kachelreihe),
   Farben aus den dlingu-Tokens, damit ein spaeterer Token-Umbau die
   Kacheln automatisch mitnimmt. Bewusst NICHT klickbar — tote Klicks
   gibt es hier nicht; Filter kommen mit dem Tabellen-Stueck.
   ------------------------------------------------------------------ */
.lagerkopf {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0 0 18px;
}
.lagerkopf-kachel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  padding: 13px 15px;
  box-shadow: var(--schatten);
  min-width: 0;
}
.lagerkopf-kachel b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lagerkopf-kachel span {
  display: block;
  font-size: 11px;
  color: var(--text-2);
  margin-top: 5px;
}
@media (max-width: 860px) {
  .lagerkopf { grid-template-columns: repeat(2, 1fr); }
  .lagerkopf-kachel:last-child { grid-column: 1 / -1; }
}


/* ---- v2.25.0: Umgebungs-Badge + Wartungsbalken --------------------- */
.kopf .umgebung {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .5rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  color: var(--text-2); border: 1px solid var(--linie);
}
.kopf .umgebung .v { font-weight: 400; letter-spacing: 0; opacity: .8; }
.kopf .umgebung.stage { color: var(--warn); border-color: var(--warn); }
.kopf.umg-stage { box-shadow: inset 0 3px 0 var(--warn); }
.wartungsbalken {
  padding: .5rem 1.25rem; font-size: .875rem;
  background: color-mix(in srgb, var(--warn) 14%, var(--flaeche));
  border-bottom: 1px solid var(--warn); color: var(--text);
}
.wartungsbalken.laeuft { background: color-mix(in srgb, var(--stop) 14%, var(--flaeche)); border-color: var(--stop); }
@media (max-width: 720px) { .kopf .umgebung .v { display: none; } }

/* v2.74.0: Quicklink in die andere Umgebung (nur Betreiber) */
.kopf .umg-wechsel {
  display: inline-flex; align-items: center; gap: .2rem; margin-left: .35rem;
  padding: .15rem .5rem; border: 1px dashed var(--linie-2); border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text-2); text-decoration: none; white-space: nowrap;
}
.kopf .umg-wechsel:hover { border-style: solid; border-color: var(--ac); color: var(--ac-text); }
@media (max-width: 820px) { .kopf .umg-wechsel { display: none; } }

/* ---- v2.32.1: Zurueck-Leiste + Zeilen-x ------------------------------- */
.zurueckleiste { margin: .75rem 0 0; padding: 0 1.5rem; }   /* v2.196.0: buendig mit der vollen Breite */
/* v2.237.0 (Frodo: "der Knopf zurück ist deplatziert, ich muss ihn immer wieder suchen"): ein richtiger Knopf, auf jeder Seite gleich */
.zurueck-link { display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .85rem 0 .65rem; border: 1px solid var(--linie); border-radius: 9px;
  background: var(--flaeche); color: var(--ac-text); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color .15s cubic-bezier(.2,.7,.3,1), background-color .15s cubic-bezier(.2,.7,.3,1), transform .1s cubic-bezier(.2,.7,.3,1); }
.zurueck-link svg { flex: none; }
.zurueck-link:hover { border-color: var(--ac); background: var(--erhoben); color: var(--ac-text); }
.zurueck-link:active { transform: scale(.97); }
.zurueck-link:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .zurueck-link { transition: none; } .zurueck-link:active { transform: none; } }
.zeile-x { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--stop); font-size: .95rem; line-height: 1; cursor: pointer; padding: 0; }
.zeile-x:hover { border-color: var(--stop); }
@media (max-width: 720px) { .zurueckleiste { padding: 0 .875rem; } }

/* ---- v2.32.2: Bild-Modal (global) ---------------------------------- */
.bild-dialog { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); max-height: 96vh; }
.bild-dialog::backdrop { background: rgba(0,0,0,.75); }
.bild-dialog img { max-width: 96vw; max-height: 92vh; display: block; border-radius: var(--r-2); box-shadow: var(--schatten); }
.bild-dialog-zu { position: fixed; top: 12px; right: 16px; width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(255,255,255,.9); color: #000; font-size: 1.3rem; cursor: pointer; }
.rumpf img[src*="/dateien/"] { cursor: zoom-in; }

/* ---- v2.38.2: Einheit im Feld ------------------------------------ */
.mit-einheit{position:relative;display:block}.mit-einheit input{width:100%;padding-right:3.2rem}.mit-einheit .einheit{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:.75rem;pointer-events:none}

/* ---- v2.43.0: Bildzone ------------------------------------------- */
.bz{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start;padding:.5rem;border:1px dashed var(--linie-2);border-radius:var(--r);min-height:84px;position:relative}
.bz.ueber{border-color:var(--ac);background:var(--ac-weich)}
.bz-bild{position:relative;width:72px;height:72px;border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;background:var(--erhoben)}
.bz-bild.titel{border-color:var(--warn)}.bz-bild img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box;background:var(--flaeche);display:block;cursor:zoom-in}   /* v2.237.1 (Frodo: "Bilder kleiner, aber ganz zeigen") */
/* Knoepfe nur beim Ueberfahren — sonst verdecken sie das kleine Bild; auf Touch-Geraeten immer sichtbar */
@media (hover:hover){.bz-bild .bz-aktion,.bz-bild .bz-kat{opacity:0;transition:opacity .12s cubic-bezier(.2,.7,.3,1)}.bz-bild:hover .bz-aktion,.bz-bild:hover .bz-kat,.bz-bild:focus-within .bz-aktion{opacity:1}}
.bz-marke{position:absolute;top:2px;left:5px;color:var(--warn);font-size:.8rem;pointer-events:none}
.bz-aktion{position:absolute;margin:0}.bz-aktion button{width:20px;height:20px;border-radius:999px;border:1px solid var(--linie);background:var(--flaeche);color:var(--text);font-size:.8rem;line-height:1;cursor:pointer;padding:0}
.bz-aktion.loeschen{top:2px;right:2px}.bz-aktion.loeschen button{color:var(--stop)}.bz-aktion.titel{bottom:2px;left:2px}.bz-aktion.titel button{color:var(--warn)}
.bz-neu{width:72px;height:72px;border:1px dashed var(--linie-2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--text-2);cursor:pointer}
.bz-hinweis{flex-basis:100%;margin:0;font-size:.75rem;color:var(--text-3)}.bz-status{flex-basis:100%;margin:0;font-size:.8125rem;color:var(--ac-text)}

/* v2.95.1: Ein gesperrter Knopf muss gesperrt aussehen. Bisher war er vom
   freigegebenen nicht zu unterscheiden — im Ankauf-Assistenten ist "Weiter"
   aber oft gesperrt, und wer den Unterschied nicht sieht, klickt ins Leere
   und haelt die Seite fuer kaputt. */
.knopf:disabled,
.knopf[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.knopf:disabled:hover,
.knopf[disabled]:hover { filter: none; }

/* v2.117.6: Breite Tabellen (Betreiber-Matrix, Sicherungen, Kataloge …)
   scrollen auf schmalen Schirmen in SICH — die Seite bleibt am Rand, statt
   waagerecht wegzurutschen. Fund Frodo: Betreiber + Entwicklung am Handy.
   display:block macht die Tabelle selbst zum Scrollrahmen; width:max-content
   (hoehere Spezifitaet als das seitenlokale .tabelle{width:100%}) laesst sie
   auf ihre Inhaltsbreite wachsen, max-width haelt sie sonst am Rand. */
@media (max-width: 760px) {
  table.tabelle {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* v2.178.9 (Frodo: "leicht versetzte Knoepfe triggern mich"): Zeilen aus Feld + Knopf (.reihe mit .feld.schmal).
   .karte .feld:last-child nahm nur dem letzten Feld der Zeile den unteren Abstand – der Knopf hing dann 1rem tiefer
   als das Eingabefeld. Jetzt teilen alle Felder EINER Zeile denselben Abstand, und der Knopf bricht nie um. */
.reihe > .feld { margin-bottom: 1rem; }
.karte > .reihe:last-child > .feld, .karte > form > .reihe:last-child > .feld, .karte form.reihe:last-child > .feld { margin-bottom: 0; }
.reihe > .feld.schmal { flex: 0 0 auto; min-width: 8rem; }
.reihe > .feld.schmal:not(:has(label)) { display: flex; align-items: flex-end; }   /* nur reine Knopf-Felder: Knopf auf die Unterkante des Nachbarfelds */
.reihe > .feld.schmal > .knopf { white-space: nowrap; }

/* ==================================================== Seitenblatt (v2.184.3)
   Das rechte Blatt: Einstellungen, Zusatzfelder, Aktionen. Schiebt sich ueber die Seite,
   die Seite bleibt stehen. Markup: App\Web\Blatt, Verhalten: assets/blatt.js. */
.blatt-grund{position:fixed;inset:0;background:rgba(20,20,18,.18);z-index:45;opacity:0;pointer-events:none;transition:opacity .2s}
.blatt-grund.offen{opacity:1;pointer-events:auto}
.blatt{position:fixed;top:0;right:0;bottom:0;width:min(28rem,100vw);z-index:46;background:var(--flaeche);border-left:1px solid var(--linie);box-shadow:-12px 0 32px rgba(0,0,0,.12);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s cubic-bezier(.2,.7,.2,1);overscroll-behavior:contain}
.blatt[hidden]{display:flex}
.blatt.offen{transform:none}
.blatt-breit{width:min(46rem,100vw)}
.blatt-kopf{display:flex;gap:.75rem;align-items:flex-start;justify-content:space-between;padding:1.1rem 1.5rem .9rem;border-bottom:1px solid var(--erhoben)}
.blatt-kopf b{display:block;font-size:1.0625rem;font-weight:600}.blatt-kopf .unter{display:block;margin-top:.15rem;font-size:.875rem}
.blatt-zu{flex:none;width:2.25rem;height:2.25rem;border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche);color:var(--text-2);font-size:1.25rem;line-height:1;cursor:pointer}
.blatt-zu:hover{background:var(--erhoben);color:var(--text)}
.blatt-inhalt{padding:1rem 1.5rem 1.5rem;overflow:auto;display:flex;flex-direction:column;gap:1rem;flex:1}
.blatt-inhalt .feld{margin:0}.blatt-inhalt .feld input,.blatt-inhalt .feld select,.blatt-inhalt .feld textarea{width:100%}
.blatt-fuss{display:flex;gap:.5rem;justify-content:flex-end;padding-top:.75rem;border-top:1px solid var(--erhoben);margin-top:auto}
.blatt-stand{display:flex;align-items:center;gap:.5rem;font-size:.9375rem}
.blatt-stand .punkt{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--linie-2)}.blatt-stand .punkt.ok{background:var(--ok)}.blatt-stand .punkt.warn{background:var(--warn)}
@media(prefers-reduced-motion:reduce){.blatt,.blatt-grund{transition:none}}

/* ==================================================== Verkauf (v2.187.0, Design-Runde)
   Ein Rahmen fuer Angebote, Einstellen, Bestellungen, Rueckgaben, Nachrichten, Versand.
   Markup: App\Web\Verkauf. Feste Umschaltleiste, Zaehler mit festen Positionen, Status als Punkt + Wort. */
.vk-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .75rem;min-height:2.5rem}
.vk-kopf h1{margin:0;font-size:1.375rem}
.vk-aktionen{display:flex;align-items:center;gap:.5rem;flex:none}
.vk-aktionen .knopf{width:auto;height:2.5rem;padding:0 1rem;white-space:nowrap}
.vk-rund{flex:none;width:2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--linie-2);border-radius:var(--r);background:var(--flaeche);color:var(--text-2);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;transition:background .12s cubic-bezier(.2,.7,.2,1)}
.vk-rund:hover{background:var(--erhoben);color:var(--text)}
.vk-rund:active{transform:scale(.96)}
.vk-leiste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(7.5rem,1fr);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche);overflow:hidden;margin:0 0 1rem}
.vk-seg{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;height:2.75rem;padding:0 .75rem;color:var(--text-2);text-decoration:none;font-size:.9375rem;white-space:nowrap;border-right:1px solid var(--linie);transition:background .12s cubic-bezier(.2,.7,.2,1)}
.vk-seg:last-child{border-right:0}
.vk-seg:hover{background:var(--erhoben);color:var(--text)}
.vk-seg.an{color:var(--ac-text);background:var(--ac-weich);font-weight:600}
.vk-seg.an::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ac)}
.vk-n{min-width:1.5rem;padding:0 .4rem;height:1.25rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);background:var(--erhoben);color:var(--text-2);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}
.vk-seg.an .vk-n{background:var(--ac);color:#fff}
.vk-n.null{opacity:.45}
.vk-seg.an .vk-n.null{opacity:.75}
@media(max-width:760px){.vk-leiste{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.vk-leiste::-webkit-scrollbar{display:none}.vk-seg{flex:0 0 auto;min-width:7rem}.vk-kopf{flex-wrap:wrap}}
.vk-hilfetext{font-size:.9375rem;line-height:1.55;color:var(--text-2);max-width:60ch}
/* Status: Punkt + Wort */
.vk-st{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;color:var(--text-2);white-space:nowrap}
.vk-st::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--linie-2);flex:none}
.vk-st.ok{color:var(--ok)}.vk-st.ok::before{background:var(--ok)}
.vk-st.warn{color:var(--warn)}.vk-st.warn::before{background:var(--warn)}
.vk-st.stop{color:var(--stop)}.vk-st.stop::before{background:var(--stop)}
.vk-st.plan{color:var(--ac-text)}.vk-st.plan::before{background:var(--ac)}
.vk-st.leise{color:var(--text-3)}
.vk-st-zusatz{display:block;color:var(--text-3);font-size:.8125rem;font-variant-numeric:tabular-nums;margin-top:.1rem}
.vk-ico{vertical-align:-.15em;flex:none}
.vk-ext{display:inline-flex;align-items:center;gap:.3rem}
/* Listen im Verkauf: ruhig, Zeile oeffnet das Blatt */
.vk-werkzeug{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem;min-height:2.5rem}
.vk-werkzeug .vk-filter{display:inline-grid;grid-auto-flow:column;border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;background:var(--flaeche)}
.vk-werkzeug .vk-filter a{display:inline-flex;align-items:center;gap:.4rem;height:2.25rem;padding:0 .75rem;font-size:.875rem;color:var(--text-2);text-decoration:none;border-right:1px solid var(--linie);white-space:nowrap}
.vk-werkzeug .vk-filter a:last-child{border-right:0}
.vk-werkzeug .vk-filter a:hover{background:var(--erhoben);color:var(--text)}
.vk-werkzeug .vk-filter a.an{background:var(--erhoben);color:var(--text);font-weight:600}
.vk-werkzeug .vk-filter a b{font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
.vk-werkzeug .vk-filter a.an b{color:var(--text-2)}
.vk-werkzeug input[type=search]{margin-left:auto;height:2.25rem;min-width:14rem;max-width:20rem}
.vk-werkzeug form{margin:0;display:contents}
.vk-werkzeug .knopf{width:auto;height:2.25rem;padding:0 .85rem;font-size:.875rem}
@media(max-width:760px){.vk-werkzeug{flex-wrap:wrap}.vk-werkzeug input[type=search]{margin-left:0;width:100%;max-width:none}.vk-werkzeug .vk-filter{overflow-x:auto;max-width:100%}}
table.liste.vk-liste td{vertical-align:middle}
table.liste.vk-liste td.r,table.liste.vk-liste th.r{text-align:right}
table.liste.vk-liste td.mono{white-space:nowrap;font-variant-numeric:tabular-nums}
table.liste.vk-liste td.vk-bild{width:3rem;padding-right:0}
table.liste.vk-liste td.vk-bild img,table.liste.vk-liste td.vk-bild span{display:block;width:2.5rem;height:2.5rem;border-radius:var(--r);object-fit:contain;background:var(--flaeche)}
table.liste.vk-liste tr[data-blatt-auf]{cursor:pointer}
table.liste.vk-liste td .unter{display:block;font-size:.8125rem}
table.liste.vk-liste td.vk-akt{width:1%;white-space:nowrap;text-align:right}
table.liste.vk-liste td.vk-akt .knopf{width:auto;height:2.1rem;padding:0 .75rem;font-size:.8125rem}
.vk-leer{padding:2.5rem 1rem;text-align:center;color:var(--text-3)}
.vk-leer b{display:block;color:var(--text);margin-bottom:.25rem}
.vk-leer .knopf{width:auto;margin-top:1rem}
/* Blatt-Inhalte im Verkauf */
.vk-bl-h{margin:.25rem 0 .25rem;font-size:.8125rem;font-weight:600;color:var(--text-3);letter-spacing:.02em;text-transform:uppercase}
.vk-bl-zeile{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--erhoben);font-size:.9375rem}
.vk-bl-zeile:last-child{border-bottom:0}
.vk-bl-zeile span:first-child{color:var(--text-2)}
.vk-bl-zeile b{font-weight:500;text-align:right}
.vk-bl-knoepfe{display:grid;gap:.5rem}
.vk-bl-knoepfe form{margin:0;display:contents}.vk-bl-knoepfe form.vk-bl-reihe{display:grid}
.vk-bl-knoepfe .knopf{height:2.5rem;padding:0 1rem}
.vk-bl-reihe{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:end}
.vk-bl-reihe .feld{margin:0}
.vk-bl-reihe .knopf{height:2.5rem;width:auto;padding:0 1rem}
.vk-bl-pos{border:1px solid var(--linie);border-radius:var(--r);padding:.5rem .75rem;display:grid;gap:.4rem}
.vk-bl-pos > div{display:flex;justify-content:space-between;gap:.75rem;align-items:center;font-size:.9375rem}
.vk-bl-pos .mono{font-size:.8125rem;white-space:nowrap}
.vk-bl-hinweis{font-size:.875rem;color:var(--text-3);line-height:1.5}
.vk-bl-scan{display:grid;grid-template-columns:1fr auto;gap:.4rem}
.vk-bl-scan input{height:2.25rem}
.vk-bl-scan .knopf{width:auto;height:2.25rem;padding:0 .75rem}
.knopf.gefahr{color:var(--stop);border-color:var(--stop);background:transparent}
.knopf.gefahr:hover{background:var(--erhoben);filter:none}
.vk-werkzeug > span,.vk-werkzeug > label{display:inline-flex;align-items:center;height:2.25rem;margin:0}
.vk-werkzeug .knopf:disabled{opacity:.45;cursor:default}
.vk-h1-unter{font-weight:400;color:var(--text-3);font-size:1.125rem}
.vk-leiste-klein{grid-auto-columns:9.5rem;display:inline-grid}
.vk-leiste-klein .vk-seg{height:2.5rem;font-size:.9rem}
.vk-karte h2{font-size:1rem;margin:0 0 .75rem;display:flex;align-items:center;gap:.5rem}
.vk-h2{margin:1.25rem 0 .5rem;font-size:1rem}

/* ==================================================== Dichtes Formularraster (.ag) + Einstellungsseiten (v2.188.0)
   12 Spalten, kleine Felder, Beschriftung klein darüber. Angebotsseite, Vorlagen-Editor, Einstellungen. */
.ag{display:grid;gap:.75rem}.ag-karte{padding:.9rem 1rem}
.ag-zeile{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.5rem .75rem;align-items:end}.ag-zeile + .ag-zeile{margin-top:.6rem}
.ag-w1{grid-column:span 1}.ag-w2{grid-column:span 2}.ag-w3{grid-column:span 3}.ag-w4{grid-column:span 4}.ag-w5{grid-column:span 5}.ag-w6{grid-column:span 6}.ag-w7{grid-column:span 7}.ag-w8{grid-column:span 8}.ag-w9{grid-column:span 9}.ag-w10{grid-column:span 10}.ag-w12{grid-column:span 12}
@media(max-width:900px){.ag-w1,.ag-w2,.ag-w3,.ag-w4{grid-column:span 4}.ag-w5,.ag-w6,.ag-w7,.ag-w8,.ag-w9,.ag-w10{grid-column:span 12}}
@media(max-width:560px){.ag-w1,.ag-w2,.ag-w3,.ag-w4{grid-column:span 6}}
.ag-f{min-width:0;display:flex;flex-direction:column;gap:.2rem}
.ag-f > label{font-size:.75rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;justify-content:space-between;gap:.5rem;min-height:1rem}
.ag-f input:not([type=checkbox]):not([type=color]):not([type=radio]),.ag-f select,.ag-f textarea,.ag-wert{height:2.25rem;padding:0 .6rem;font:inherit;font-size:.9rem;border:1px solid var(--linie-2);border-radius:var(--r);background:var(--flaeche);color:var(--text);width:100%;min-width:0;box-sizing:border-box;margin:0}
.ag-f textarea{height:auto;padding:.45rem .6rem;line-height:1.45;resize:vertical}
.ag-f input.r{text-align:right;font-variant-numeric:tabular-nums}
.ag-f input:focus,.ag-f select:focus,.ag-f textarea:focus{outline:2px solid var(--ac);outline-offset:-1px;border-color:var(--ac)}
.ag-f input[readonly]{color:var(--text-3);background:var(--erhoben)}
.ag-zaehler{font-variant-numeric:tabular-nums;color:var(--text-3);font-weight:400}
.ag-wert{display:flex;align-items:center;justify-content:space-between;gap:.5rem;cursor:pointer;text-align:left}
.ag-wert span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-wert:hover{background:var(--erhoben)}.ag-wert.warn{border-color:var(--warn);color:var(--warn)}
.ag-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--erhoben)}
.ag-chip{height:1.9rem;padding:0 .6rem;border:1px solid var(--linie);border-radius:var(--r);background:var(--flaeche);font:inherit;font-size:.8125rem;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.ag-chip-w{color:var(--text-3);font-weight:400}.ag-chip:hover{background:var(--erhoben);color:var(--text)}
.ag-schalter{display:inline-flex;align-items:center;gap:.4rem;height:2.25rem;font-size:.9rem;white-space:nowrap;margin:0}
.ag-schalterzeile{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.ag-farbe{display:flex;gap:.4rem;align-items:center;height:2.25rem}.ag-farbe input{width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--linie-2);border-radius:var(--r);background:transparent}.ag-farbe code{font-size:.8rem;color:var(--text-2)}
.ag-h{font-size:.75rem;font-weight:600;color:var(--text-3);letter-spacing:.02em;text-transform:uppercase;margin:0 0 .5rem}
.ag-karte .ag-h + .ag-zeile{margin-top:0}
.ag-trenn{border-top:1px solid var(--erhoben);margin:.9rem 0 .75rem}
/* Einstellungsseite: Kopf mit Wofür-Zeile, Stand-Karte links */
.es-kopf .vk-titel h1{margin-bottom:.1rem}
.es-wofuer{margin:0;font-size:.9rem;color:var(--text-2);max-width:60ch}
.es-zwei{display:grid;grid-template-columns:minmax(16rem,22rem) minmax(0,1fr);gap:.75rem;align-items:start}
@media(max-width:64rem){.es-zwei{grid-template-columns:1fr}}
.es-links{position:sticky;top:calc(52px + .75rem);display:grid;gap:.75rem;max-height:calc(100vh - 52px - 1.5rem);overflow:auto}
@media(max-width:64rem){.es-links{position:static}}
.es-stand{display:grid;gap:.1rem}
.es-stand-z{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .25rem;border:0;border-bottom:1px solid var(--erhoben);background:transparent;font:inherit;color:inherit;text-decoration:none;text-align:left;width:100%;cursor:default}
.es-stand-z:last-child{border-bottom:0}
a.es-stand-z,button.es-stand-z{cursor:pointer}a.es-stand-z:hover,button.es-stand-z:hover{background:var(--erhoben);border-radius:var(--r)}
.es-stand-z .vk-ico{color:var(--text-3)}
/* Briefkopf-Vorschau: so steht es auf Rechnung und Karte */
.es-brief{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:1rem 1.1rem;font-size:.8125rem;line-height:1.45;color:var(--text-2);min-height:9rem;position:relative}
.es-brief img{max-height:2.25rem;max-width:10rem;object-fit:contain;display:block;margin-bottom:.6rem}
.es-brief b{display:block;font-size:1rem;color:var(--text)}
.es-brief .es-brief-z{display:block}
.es-brief .es-brief-klein{margin-top:.6rem;font-size:.75rem;color:var(--text-3)}
.es-brief .fehlt{color:var(--warn)}
.es-zwei > *{min-width:0}.es-stand .vk-st{white-space:normal;font-size:.8125rem;line-height:1.35}.es-stand .vk-st::before{margin-top:.1rem;align-self:flex-start}
.ag-schalter > span{font-size:.875rem;line-height:1.35}
.ag-f > label.ag-schalter{justify-content:flex-start;overflow:visible;white-space:normal;font-size:.875rem;color:var(--text)}
.ag-knopf{width:auto;height:2.25rem;padding:0 .9rem;font-size:.9rem;white-space:nowrap}
.ag-knoepfe{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.75rem}
/* Baumlisten (Kategorien, Lagerplaetze): Zeile = Knopf, oeffnet das Blatt */
.baum{display:grid}
.baum-z{display:grid;grid-template-columns:auto auto minmax(0,1fr) 3rem 1rem;gap:.5rem;align-items:center;width:100%;padding:.5rem .4rem;padding-left:calc(.4rem + var(--tiefe,0) * 1.5rem);border:0;border-bottom:1px solid var(--erhoben);background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:var(--r)}
.baum-z:last-child{border-bottom:0}.baum-z:hover{background:var(--erhoben)}.baum-z.aus{opacity:.55}
.baum-ast{width:.6rem;height:.6rem;border-left:1.5px solid var(--linie-2);border-bottom:1.5px solid var(--linie-2);border-radius:0 0 0 3px;margin:0 .1rem .3rem .1rem}
.baum-z[style*="--tiefe:0"] .baum-ast{visibility:hidden}
.baum-art{font-size:.6875rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--text-3);min-width:4rem}
.baum-name{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baum-n{text-align:right;font-size:.8125rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.baum-z .vk-ico{color:var(--text-3)}
.vk-werkzeug > *{min-width:0}.vk-werkzeug .vk-filter{max-width:100%;overflow-x:auto;scrollbar-width:thin}.es-zwei .ag{min-width:0}
.ag > *{min-width:0}.ag > .karte{overflow:hidden}.es-zwei table.liste{width:100%;max-width:100%}
.es-brief-klein{display:block}

/* v2.190.2: Verkauf-Einstellungen — Kopf mit fester Höhe, Reiter bleiben beim Wechsel an Ort und Stelle */
.vk-kopf-fest{min-height:2.5rem;align-items:center}
.vk-kopf-fest .vk-titel h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vk-kopf-fest .vk-aktionen{flex-wrap:nowrap}

/* v2.199.0: universeller Scanner — Knopf oben in der Leiste, Fenster mit QR-Code, kurze Meldung unten rechts */
.scan-wrap { position: relative; display: inline-flex; }
/* v2.204.0 (Frodo: „das Scanner-Zeichen etwas präsenter — ich möchte nicht immer die Frage beantworten, wo der
   Scanner-Knopf sitzt"): beschrifteter Knopf in der Markenfarbe statt eines grauen Symbols; Punkt = Handy verbunden. */
.scan-knopf { position: relative; display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .85rem 0 .7rem;
  border: 1px solid var(--ac); border-radius: 999px; background: var(--ac-weich); color: var(--ac-text); font: inherit; font-size: .875rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background-color .15s cubic-bezier(.2,.7,.3,1), color .15s cubic-bezier(.2,.7,.3,1); }
.scan-knopf:hover { background: var(--ac); color: #fff; }
.scan-knopf:active { transform: scale(.96); }
.scan-knopf:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.scan-knopf svg { flex: none; }
.scan-knopf .scan-punkt { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1.5px currentColor; opacity: .55; }
.scan-knopf.je .scan-punkt { opacity: .55; }
.scan-knopf.da .scan-punkt { background: var(--ok); box-shadow: 0 0 0 2px var(--flaeche); opacity: 1; }
.scan-knopf[aria-expanded="true"] { background: var(--ac); color: #fff; }
@media (max-width: 700px) { .scan-knopf { padding: 0 .6rem; } .scan-knopf-text { display: none; } }
/* v2.204.0: Ablage-Zahl am Knopf und die Ablage als Blatt von rechts */
.scan-zahl { position: absolute; right: -5px; top: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--ac); color: #fff;
  font-size: .6875rem; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--flaeche);
  transition: transform .18s cubic-bezier(.2,.7,.3,1); }
.scan-zahl.puls { transform: scale(1.3); }
.scan-blatt { width: min(32rem, 100vw); }
.scan-b { gap: .75rem; }
.scan-b-leiste { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.scan-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border: 1px solid var(--linie); border-radius: 8px; background: var(--bg); }
.scan-seg button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 6.5rem; min-height: 2rem; padding: 0 .9rem; border: 0; border-radius: 6px;
  background: none; color: var(--text-2); font: inherit; font-size: .875rem; cursor: pointer; }
.scan-seg button[aria-selected="true"] { background: var(--flaeche); color: var(--ac-text); font-weight: 600; box-shadow: 0 0 0 1.5px var(--ac); }
.scan-seg-n { font-size: .6875rem; font-weight: 700; border-radius: 999px; padding: 0 6px; background: var(--ac); color: #fff; font-variant-numeric: tabular-nums; }
.scan-b-alle { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--text-2); cursor: pointer; }
.scan-b-hilfe-k { margin-left: auto; width: 1.75rem; height: 1.75rem; border: 1px solid var(--linie); border-radius: 50%; background: var(--flaeche); color: var(--text-2);
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.scan-b-hilfe-k[aria-expanded="true"] { color: var(--ac-text); border-color: var(--ac); }
.scan-b-hilfe { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--text-2); }
.scan-reihe { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: var(--r); background: var(--ac-weich); color: var(--ac-text); font-size: .875rem; }
.scan-reihe span { margin-right: auto; font-weight: 600; }
.scan-ablage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.scan-ablage li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .7rem; border: 1px solid var(--linie);
  border-radius: var(--r-2); background: var(--flaeche); }
.scan-ablage li.naechster { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); }
.scan-a-bild { width: 48px; height: 48px; border-radius: 6px; background: var(--erhoben); object-fit: contain; display: flex; align-items: center; justify-content: center; color: var(--text-3); }
img.scan-a-bild { background: #fff; }
.scan-a-text { min-width: 0; }
.scan-a-text b { display: block; font-size: .9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-a-text b .n { font-weight: 700; color: var(--ac-text); margin-left: .35rem; font-variant-numeric: tabular-nums; }
.scan-a-text small { display: block; font-size: .8125rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scan-a-text code { font-family: var(--mono); font-size: .75rem; }
.scan-a-stand.bestand { color: var(--ok); }
.scan-a-stand.unbekannt { color: var(--warn); }
.scan-a-k { display: flex; gap: .35rem; align-items: center; }
.scan-a-weg { width: 2rem; height: 2rem; border: 1px solid var(--linie); border-radius: var(--r); background: none; color: var(--text-3); font-size: 1.0625rem; line-height: 1; cursor: pointer; }
.scan-a-weg:hover { color: var(--stop); border-color: var(--stop); }
.scan-a-weg:active, .scan-ablage .knopf:active { transform: scale(.96); }
.scan-ablage li.scan-leer { display: block; padding: 1rem; color: var(--text-2); font-size: .875rem; line-height: 1.5; border-style: dashed; background: none; }
.scan-b-fuss { display: flex; gap: .5rem; align-items: center; }
.scan-b-fuss #scanLeeren { margin-left: auto; }
.scan-koppeln { border-top: 1px solid var(--erhoben); padding-top: .75rem; margin-top: auto; }
.scan-koppeln summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--text-2); margin-bottom: .6rem; }
.scan-reihe-leiste { position: fixed; left: 50%; bottom: 1rem; z-index: 40; display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem 1rem; max-width: calc(100vw - 2rem);
  background: var(--flaeche); border: 1px solid var(--ac); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.14); font-size: .875rem; transform: translateX(-50%); }
.scan-reihe-leiste b { color: var(--ac-text); font-variant-numeric: tabular-nums; }
.scan-reihe-leiste .knopf { border-radius: 999px; }
.scan-reihe-leiste .scan-a-weg { border-radius: 50%; }
@media (max-width: 560px) { .scan-ablage li { grid-template-columns: 40px minmax(0, 1fr); } .scan-a-k { grid-column: 1 / -1; justify-content: flex-end; } }
.scan-p-qr { display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem; align-items: start; }
.scan-qr { width: 8.5rem; height: 8.5rem; background: #fff; border-radius: var(--r); padding: 2px; }
.scan-qr svg { width: 100%; height: 100%; display: block; }
.scan-p-text p { margin: 0 0 .5rem; font-size: .8125rem; color: var(--text-2); line-height: 1.45; }
.scan-link { display: block; margin: 0 0 .45rem; font-size: .6875rem; color: var(--text-3); word-break: break-all; max-height: 2.6em; overflow: hidden; }
.scan-p-fuss { display: flex; justify-content: flex-end; margin: .6rem 0 0; }
.scan-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; display: flex; gap: .7rem; align-items: center; max-width: min(26rem, calc(100vw - 2rem));
  padding: .7rem .85rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-2); box-shadow: var(--schatten);
  font-size: .875rem; opacity: 0; transform: translateY(100%) scale(.95); pointer-events: none;
  transition: opacity .16s cubic-bezier(.2,.7,.3,1), transform .16s cubic-bezier(.2,.7,.3,1); }
.scan-toast.an { opacity: 1; transform: none; pointer-events: auto; }
.scan-toast img { width: 44px; height: 44px; object-fit: contain; border-radius: var(--r); flex: none; }
.scan-toast b { font-family: var(--mono); font-weight: 500; }
.scan-toast-k { display: flex; gap: .4rem; margin-top: .45rem; }
@media (prefers-reduced-motion: reduce) { .scan-zahl, .scan-toast { transition: none; } }

/* v2.202.1: Wortmarke — das Zeichen ist das d von dlingu („lingu“ folgt), kein doppeltes d mehr */
.marke-wort svg { display: block; width: auto; height: 30px; }
.marke-wort .wm-zeichen { color: var(--ac); }
.marke-wort .wm-wort { fill: var(--text); }
.kopf .marke .marke-wort svg { width: auto; height: 30px; }
.kopf .marke-zeichen { display: none; }
@media (max-width: 900px) {
  .kopf .marke-wort { display: none; }
  .kopf .marke-zeichen { display: block; }
}
.seitenmenue .kopfzeile .marke-wort svg { width: auto; height: 30px; }

/* ─── v2.210.0 Assistent (Kopfleiste, Blatt, Seite) ─────────────────────────────────────────────── */
.as-knopf { margin-left: .4rem; padding: 0 .6rem; border-color: var(--linie-2); background: var(--flaeche); color: var(--text-2); }
.as-knopf .scan-knopf-text { display: none; }   /* nur das Zeichen — die Kopfleiste ist eng, Name im Tooltip */
.as-knopf:hover { background: var(--erhoben); color: var(--text); }
.as-blatt { width: min(30rem, 100vw); }
.blatt-inhalt.as-b { padding: 0; gap: 0; overflow: hidden; }
.as { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.as-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; scroll-behavior: smooth; }
.as-blase { max-width: 92%; display: flex; flex-direction: column; gap: .5rem; position: relative; }
.as-du { align-self: flex-end; background: var(--ac-weich); color: var(--text); border-radius: 14px 14px 4px 14px; padding: .6rem .85rem; }
.as-ki { align-self: flex-start; width: 92%; }
.as-ki > .as-text { padding: .1rem 0; }
.as-text p { margin: 0 0 .45rem; line-height: 1.5; }
.as-text p:last-child { margin-bottom: 0; }
.as-fehler .as-text { color: var(--stop); }
.as-zeit { font-size: .72rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.as-du .as-zeit { align-self: flex-end; }
.as-denkt { min-height: 1.5rem; justify-content: center; }
.as-punkte { display: inline-block; width: 2.4rem; height: .5rem; background: radial-gradient(circle, var(--text-3) 40%, transparent 42%) 0 50% / .8rem .5rem repeat-x; animation: as-puls 1.2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes as-puls { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .as-punkte { animation: none; opacity: .7 } .as-liste { scroll-behavior: auto } }
.as-karte { border: 1px solid var(--linie); border-radius: var(--r-2); background: var(--flaeche); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .35rem; }
.as-k-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.as-k-status { font-size: .75rem; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-k-unter { font-size: .85rem; color: var(--text-2); }
.as-k-zeilen { display: flex; flex-direction: column; }
.as-k-zeile { display: grid; grid-template-columns: 1fr auto; gap: .75rem; padding: .35rem 0; border-top: 1px solid var(--erhoben); font-size: .9rem; }
.as-k-zeile small { display: block; color: var(--text-3); font-size: .78rem; }
.as-k-betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-k-summe { display: grid; grid-template-columns: 1fr auto; padding-top: .4rem; border-top: 1.5px solid var(--text); font-variant-numeric: tabular-nums; }
.as-k-leiste { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.as-k-leiste .knopf.schmal { height: 2rem; padding: 0 .7rem; font-size: .82rem; }
.as-k-leiste .voll { background: var(--ac); color: #fff; border-color: var(--ac); }
.as-leer { margin: auto 0; display: flex; flex-direction: column; gap: .75rem; color: var(--text-2); }
.as-leer p { margin: 0; line-height: 1.5; }
.as-vorschlaege { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.as-vorschlaege .knopf { text-align: left; white-space: normal; height: auto; padding: .45rem .75rem; }
.as-hinweis { color: var(--warn); font-size: .875rem; }
.as-eingabe { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; padding: .75rem 1.25rem .5rem; border-top: 1px solid var(--erhoben); background: var(--flaeche); }
.as-eingabe textarea { resize: none; min-height: 2.6rem; max-height: 10rem; line-height: 1.4; padding: .55rem .75rem; border-radius: 12px; }
.as-senden { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: var(--ac); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.as-senden:active { transform: scale(.94); }
.as-senden:disabled { opacity: .45; cursor: default; }
.as-fuss { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 0 1.25rem calc(.6rem + env(safe-area-inset-bottom, 0px)); font-size: .75rem; color: var(--text-3); background: var(--flaeche); }
.as-neu { white-space: nowrap; border: 0; background: none; color: var(--ac-text); font: inherit; font-size: .8rem; cursor: pointer; padding: .2rem 0; }
.as-seite { max-width: 46rem; margin: 0 auto; height: calc(100dvh - 7.5rem); display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: var(--r-2); background: var(--bg); overflow: hidden; }
.as-seite-kopf { padding: .75rem 1.25rem; border-bottom: 1px solid var(--erhoben); background: var(--flaeche); }
.as-seite-kopf h1 { margin: 0; font-size: 1.1rem; }
@media (max-width: 760px) { .as-seite { height: calc(100dvh - 6rem); border-radius: 0; border-left: 0; border-right: 0; } }

/* ─── v2.210.0 Belege ───────────────────────────────────────────────────────────────────────────── */
.bel-werkzeug .suchleiste { margin: 0 0 0 auto; }
table.liste td.zahl, table.liste th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.bel-status { display: inline-block; font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--linie); color: var(--text-2); white-space: nowrap; }
.bel-st-offen, .bel-st-entwurf { border-color: var(--warn); color: var(--warn); }
.bel-st-angenommen, .bel-st-festgeschrieben { border-color: var(--ok); color: var(--ok); }
.bel-st-abgelehnt, .bel-st-storniert { border-color: var(--stop); color: var(--stop); }
.bel-kopf h1 .mono { font-variant-numeric: tabular-nums; }
.bel { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; align-items: start; }
.bel-haupt { display: flex; flex-direction: column; gap: .9rem; }
.bel-t { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: .35rem; }
.bel-kunde { display: flex; flex-direction: column; gap: .2rem; position: relative; }
.bel-kunde a { color: var(--text); text-decoration: none; }
.bel-kunde-wahl { margin-top: .35rem; position: relative; max-width: 22rem; }
.bel-kunde-wahl input { width: 100%; }
.bel-kunde-treffer { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); display: flex; flex-direction: column; }
.bel-kunde-treffer button { text-align: left; border: 0; background: none; font: inherit; padding: .5rem .7rem; cursor: pointer; color: var(--text); }
.bel-kunde-treffer button:hover { background: var(--erhoben); }
.bel-haupt > .feld { margin: 0; }
.bel-haupt > .feld input { width: 100%; }
.bel-zeilen { display: flex; flex-direction: column; }
.bel-z { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 6.5rem 6.5rem 1.75rem; gap: .5rem; align-items: start; padding: .45rem 0; border-top: 1px solid var(--erhoben); }
.bel-z-kopf { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border-top: 0; padding-bottom: .2rem; }
.bel-z .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.bel-z input { width: 100%; min-width: 0; }
.bel-z input[readonly] { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
.bel-z-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.bel-z-unter { font-size: .82rem; color: var(--text-2); padding-top: .25rem !important; padding-bottom: .25rem !important; }
.bel-z-betrag { padding-top: .5rem; white-space: nowrap; }
.bel-z-weg { width: 1.75rem; height: 2.2rem; border: 0; background: none; color: var(--text-3); font-size: 1.1rem; cursor: pointer; border-radius: var(--r); }
.bel-z-weg:hover { background: var(--erhoben); color: var(--stop); }
.bel-summe { display: grid; grid-template-columns: 1fr auto; padding-top: .55rem; border-top: 1.5px solid var(--text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bel-steuer { display: grid; grid-template-columns: 1fr auto; font-variant-numeric: tabular-nums; margin-top: -.5rem; }
.bel-texte summary { cursor: pointer; color: var(--text-2); font-size: .9rem; }
.bel-texte[open] { display: flex; flex-direction: column; gap: .6rem; }
.bel-texte .feld { margin: 0; }
.bel-texte textarea { width: 100%; }
.bel-gueltig input { max-width: 12rem; }
.bel-meld { min-height: 1.2em; margin: 0; }
.bel-meld.stop { color: var(--stop); }
.bel-seite { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 4.5rem); }
.bel-seite .karte { margin: 0; }
.bel-knoepfe { display: flex; flex-direction: column; gap: .45rem; }
.bel-knoepfe .knopf { width: 100%; justify-content: center; text-align: center; }
.bel-knoepfe p { margin: .1rem 0 0; }
.bel-loeschen { color: var(--stop); }
@media (max-width: 900px) { .bel { grid-template-columns: 1fr; } .bel-seite { position: static; } }
@media (max-width: 560px) { .bel-z { grid-template-columns: minmax(0, 1fr) 3.5rem 5.5rem 1.75rem; } .bel-z > .bel-z-betrag { display: none; } .bel-z-kopf > span:nth-child(4) { display: none; } }
/* v2.214.1 Assistent am iPhone (Frodo: "wenn ich tippen gehe, verzieht sich das Fenster komplett"):
   1) Eingabe mit 16 px — darunter zoomt Safari beim Antippen in die Seite (rechts abgeschnitten, Seite verrutscht).
   2) Unter 760 px fuellt das Blatt genau den sichtbaren Bereich ueber der Tastatur (--as-h/--as-top aus visualViewport).
   3) Der Hinweis unter dem Feld ist am Handy weg — Platz fuer den Verlauf. */
@media (pointer: coarse) { .as-eingabe textarea { font-size: 16px; } }
@media (max-width: 760px) {
  .as-blatt { width: 100vw; top: var(--as-top, 0px); bottom: auto; height: var(--as-h, 100dvh); border-left: 0; }
  .as-blatt .blatt-kopf { padding: .7rem 1rem .6rem; }
  .as-liste { padding: .75rem 1rem; }
  .as-eingabe { padding: .6rem .75rem .4rem; }
  .as-fuss { padding: 0 .75rem calc(.4rem + env(safe-area-inset-bottom, 0px)); }
  .as-fuss > span:not(.as-fuss-k) { display: none; }
  .as-seite { height: var(--as-h, calc(100dvh - 6rem)); }
  body.as-offen { overflow: hidden; }
}
/* v2.214.2: Kopfleiste am Handy passte nicht mehr in 390 px (Seite wurde breiter als der Bildschirm, Blaetter hingen rechts ueber):
   Umgebungs-Badge nur als Punkt, Betriebsname gekuerzt, engere Abstaende. */
@media (max-width: 520px) {
  .kopf .rechts { gap: .2rem; min-width: 0; }
  .kopf .umgebung { font-size: 0; padding: 0; width: .7rem; height: .7rem; min-width: 0; border-radius: 50%; background: currentColor; border: 0; }
  .kopf .mandantwahl summary.mandant { max-width: 4.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: .45rem; padding-right: .45rem; }
  .kopf .mandantwahl .mw-pfeil { display: none; }
  .as-knopf { margin-left: 0; }
  .kopf .umgebung { display: none; }
  #scanKnopf .scan-punkt { display: none; }
  #scanKnopf { padding: 0 .6rem; }
}
/* v2.214.3: Assistent am Handy als feste Vollbild-Seite (statt Blatt) — kein Flackern, Hintergrund bleibt stehen */
.as-seite-kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.as-seite-zu { display: none; }
@media (max-width: 760px) {
  html.as-gesperrt, html.as-gesperrt body { overflow: hidden; height: 100%; overscroll-behavior: none; }
  html.as-gesperrt body { position: fixed; inset: 0; width: 100%; }
  .as-seite { position: fixed; left: 0; right: 0; top: 0; z-index: 60; max-width: none; height: 100dvh; border: 0; border-radius: 0; will-change: transform; }
  .as-seite-kopf { padding: calc(.6rem + env(safe-area-inset-top, 0px)) 1rem .6rem; }
  .as-seite-zu { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--linie); border-radius: var(--r); color: var(--text-2); text-decoration: none; font-size: 1.35rem; line-height: 1; }
  .as-seite .as-liste { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
/* v2.215.2: Anhaenge im Assistenten */
.as-eingabe { grid-template-columns: auto 1fr auto; }
.as-klammer { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-2); cursor: pointer; border: 1px solid var(--linie); background: var(--flaeche); }
.as-klammer:hover { color: var(--text); border-color: var(--ac); }
.as-anhaenge { display: flex; gap: .4rem; flex-wrap: wrap; padding: .5rem 1.25rem 0; background: var(--flaeche); border-top: 1px solid var(--erhoben); }
.as-anh { display: inline-flex; align-items: center; gap: .35rem; max-width: 12rem; padding: .2rem .25rem .2rem .2rem; border: 1px solid var(--linie); border-radius: 10px; background: var(--erhoben); font-size: .75rem; }
.as-anh img { width: 2.2rem; height: 2.2rem; object-fit: contain; border-radius: 6px; }
.as-anh-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-anh-x { border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; }
.as-anh-pdf { font-size: .7rem; font-weight: 600; color: var(--stop); padding: .15rem .35rem; border: 1px solid currentColor; border-radius: 4px; }
.as-b-anh { display: flex; gap: .35rem; flex-wrap: wrap; }
.as-b-anh img { width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: 8px; border: 1px solid var(--linie); }
.as.as-ziehen .as-liste { outline: 2px dashed var(--ac); outline-offset: -6px; }
@media (max-width: 760px) { .as-anhaenge { padding: .4rem .75rem 0; } .as-eingabe { gap: .4rem; } }

/* v2.221.0: Assistent — fruehere Gespraeche nachlesen */
.as-fuss-k { display: inline-flex; gap: 1.1rem; }
.as-gl { display: flex; flex-direction: column; gap: .4rem; padding: .25rem 0; }
.as-gl button { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; text-align: left; width: 100%; padding: .65rem .8rem; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: inherit; font: inherit; cursor: pointer; }
.as-gl button:hover { border-color: var(--ac-text); }
.as-gl b { font-weight: 600; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-gl small { color: var(--text-3); font-size: .75rem; white-space: nowrap; }
.as-gl small + small { grid-column: 1 / -1; }
.as-kopfz { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem 0; margin-bottom: .25rem; background: var(--flaeche); font-size: .8rem; color: var(--text-3); border-bottom: 1px solid var(--linie); }
.as-kopfz button { border: 0; background: none; color: var(--ac-text); font: inherit; cursor: pointer; padding: .2rem 0; white-space: nowrap; }
.as.as-lesen .as-eingabe, .as.as-lesen .as-anhaenge { opacity: .45; pointer-events: none; }

/* v2.223.0: Hinweis auf ein Erklaervideo oben im „?“-Blatt */
.vk-video-tipp { display: flex; gap: .75rem; align-items: center; padding: .7rem .9rem; margin: 0 0 1rem; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: inherit; text-decoration: none; }
.vk-video-tipp:hover { border-color: var(--ac); }
.vk-video-tipp b { display: block; font-size: .9rem; }
.vk-video-tipp small { display: block; font-size: .75rem; color: var(--text-3); margin-top: .1rem; }
.vk-vt-play { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ac); color: #fff; display: flex; align-items: center; justify-content: center; }

/* v2.224.1: Bilder per Ziehen sortieren */
.bz-bild[draggable] { cursor: grab; }
.bz-bild.zieht { opacity: .35; }

/* v2.225.0: Arbeiten im Hintergrund — feste Leiste unten links (schiebt nichts), Protokoll im Blatt */
.hg-leiste { position: fixed; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; max-width: min(28rem, calc(100vw - 2rem)); border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.hg-leiste[hidden] { display: none; }
.hg-knopf { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; padding: .55rem .4rem .55rem .9rem; border: 0; background: none; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.hg-zu { flex: none; width: 2rem; height: 2rem; margin-right: .3rem; border: 0; border-radius: 50%; background: none; color: var(--text-3); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.hg-zu:hover { background: var(--erhoben); color: var(--text); }
.hg-knopf .hg-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.hg-knopf .hg-balken { flex: none; width: 4.5rem; }
.hg-balken { display: block; height: .35rem; border-radius: 999px; background: var(--linie); overflow: hidden; }
.hg-balken i { display: block; height: 100%; width: 0; background: var(--ac); transition: width .4s cubic-bezier(.2,.7,.2,1); }
.hg-balken.gross { height: .5rem; margin: .5rem 0 .75rem; }
.hg-dreh { flex: none; width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--ac); }
.hg-knopf.laeuft .hg-dreh { border-right-color: transparent; animation: hgDreh .9s linear infinite; }
.hg-leiste:has(.hg-knopf.fehler) { border-color: var(--stop); } .hg-knopf.fehler .hg-dreh { border-color: var(--stop); } .hg-knopf.fehler .hg-balken i { background: var(--stop); }
@keyframes hgDreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hg-knopf.laeuft .hg-dreh { animation: none; } }
.hg-a { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.hg-a-kopf { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.hg-a-kopf .unter { display: block; font-size: .8rem; }
.hg-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.hg-s { display: grid; grid-template-columns: 1.2rem 1fr auto; gap: .5rem; align-items: baseline; padding: .3rem 0; font-size: .85rem; border-bottom: 1px solid var(--linie); }
.hg-s small { display: block; font-size: .78rem; color: var(--text-3); word-break: break-word; }
.hg-s.fehler small { color: var(--stop); }
.hg-ok { color: var(--ok); } .hg-f { color: var(--stop); } .hg-o { color: var(--text-3); }
.hg-ext { font-size: .78rem; white-space: nowrap; }


/* v2.237.3 (Frodo: "Vorschaubilder überall ganz zeigen, nicht abschneiden"): jedes Artikel-/Katalogbild — egal auf welcher
   Seite und mit welchem eigenen Stil — wird eingepasst statt beschnitten. Gilt fuer Katalogbilder (/m/…) und eigene Fotos (/dateien/…). */
img[src^="/m/"], img[src*="/dateien/"] { object-fit: contain !important; background-color: var(--flaeche); }

/* v2.239.5 (Frodo, iPhone: „tippe ich in die Suche, zoomt die Seite ran und ich komme nicht mehr raus“): Safari zoomt bei
   Eingabefeldern unter 16 px automatisch — auf Touch-Geräten haben alle Eingaben deshalb mindestens 16 px. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1em) !important; }
}
/* v2.239.5: Suchfelder in einer Pille — der Fokus zeigt sich am Rahmen der Pille, nicht als zweiter grüner Kasten innen */
.al-suche input, .al-suche input:focus, .al-suche input:focus-visible { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; }

/* v2.240.0: Rückweg-Knopf (z. B. zurück zum eBay-Entwurf) — schwebt unten, verschiebt nichts */
.heimweg{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:950;display:flex;align-items:stretch;max-width:calc(100vw - 32px);background:var(--text);color:var(--bg);border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.22);overflow:hidden;font-size:.92rem}
.heimweg a{color:inherit;text-decoration:none;padding:.65rem .9rem .65rem 1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.heimweg button{background:none;border:0;border-left:1px solid rgba(127,127,127,.35);color:inherit;padding:0 .9rem;font-size:1.1rem;cursor:pointer}
@media print{.heimweg{display:none}}
.ev-stp{display:block;margin-top:.35rem;background:none;border:0;padding:0;color:var(--ok);font:inherit;font-size:.85rem;cursor:pointer;text-align:left}


/* ======================================================================================================
   v2.250.2 — Fundament-Prüfung 18.10.2026 (automatischer Rundgang über PC, Laptop, iPad hoch/quer, iPhone, kleines Android)
   Ein Block für alles, was auf schmalen Geräten aus dem Bild lief. Ziel: keine Seite scrollt waagerecht.
   ====================================================================================================== */
/* Kopfleiste: Konto-Kreis bleibt immer sichtbar. Scanner nur als Zeichen, sobald es eng wird (iPad hoch: 846 > 820 px) */
.kopf .rechts > *{flex-shrink:0}
.kopf .rechts .mandantwahl{flex-shrink:1;min-width:0}
@media (max-width: 1100px){.kopf .scan-knopf{padding:0 .6rem}.kopf .scan-knopf .scan-knopf-text{display:none}}
/* Handy mit Betriebswahl: das Zahnrad steckt auch im Menü links — hier weg, sonst rutscht das Konto raus (360 px) */
@media (max-width: 420px){.kopf .rechts:has(.mandantwahl) .einst-knopf{display:none}.kopf .rechts{gap:.15rem}}

/* Reiterleisten (Verkauf/Einstellungen): auf dem Handy wischbar statt über den Rand (bis 624 px breit) */
@media (max-width: 760px){
  .vk-leiste.vk-leiste-klein{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .vk-leiste.vk-leiste-klein::-webkit-scrollbar{display:none}
  .vk-leiste.vk-leiste-klein .vk-seg{flex:0 0 auto;min-width:8rem}
  /* Knopfreihen neben Überschriften brechen um, statt rechts herauszuragen (Kasse, Arbeitsplatz, Packliste, Felder) */
  .vk-kopf .vk-aktionen,.vk-kopf-fest .vk-aktionen{flex-wrap:wrap;flex:1 1 100%;min-width:0}
  .vk-aktionen .knopf{padding:0 .8rem}
  .ak-aktionen{flex-wrap:wrap;white-space:normal;min-width:0}
  .vs-eb-k{flex-wrap:wrap}
  .lz-seg{display:grid;width:100%;grid-auto-columns:1fr}.lz-seg a{min-width:0;padding:.35rem .5rem}
}
/* Mein Konto: Feldreihen (.zr) hatten außerhalb der Artikelseite kein Raster — lange Adressen liefen aus der Karte */
.konto-karte .zr{display:grid;grid-template-columns:minmax(9rem,32%) minmax(0,1fr);gap:.5rem 1rem;align-items:center;padding:.35rem 0}
.konto-karte .zr .act{display:none}
.konto-karte .zr .v>input{width:100%;min-width:0}
.zr-fest{overflow-wrap:anywhere}
@media (max-width: 640px){.konto-karte .zr{grid-template-columns:1fr;gap:.2rem}}
/* v2.250.4 — Rest aus dem zweiten Rundgang */
@media (max-width: 760px){
  .formularfuss{flex-wrap:wrap}
  body .lz-seg a{min-width:0;padding:.35rem .5rem}
  .wa-zettel-k{flex-wrap:wrap}
  .ak-aktionen>*{flex:0 1 auto;min-width:0}
}
/* breite Listen (Kasse, Werkstatt-Leistungen) scrollen in sich, statt die ganze Seite breit zu machen (iPad hoch) */
@media (max-width: 1100px){
  table.ka-liste,table.wa-leist{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wa-gz,.spalte{min-width:0}
}
/* v2.250.5 — dritter Rundgang: Betriebswahl-Liste, Werkstatt-Auftrag (werkbank.css lädt später, darum body-Vorrang), Posten bearbeiten */
.kopf .mw-inhalt{overflow-x:hidden}.kopf .mw-inhalt a{white-space:normal;overflow-wrap:anywhere}
@media (max-width: 1100px){body .spalte{min-width:0}body .reihe{flex-wrap:wrap}}
@media (max-width: 760px){body .wa-zettel-k{flex-wrap:wrap}body .ak-aktionen{flex-wrap:wrap;white-space:normal;min-width:0}body .ak-aktionen .knopf{width:auto;max-width:100%}}
/* v2.250.6 — Werkstatt-Auftrag am Handy: Kennzahlen umbrechen, Zettel-Knöpfe in eigene Zeile, Kopf-Mitte darf schmal werden */
@media (max-width: 760px){body .wa-zahlen{flex-wrap:wrap;gap:.6rem 1.25rem}body .wa-zahlen .wa-zettel{flex:1 1 100%}body .ak-mitte{min-width:0}}
@media (max-width: 1100px){body .wa-j{min-width:0}body .wa-j>div:last-child{min-width:0;overflow-wrap:anywhere}body .ap-zk-sum{min-width:0}body .ap-zk-sum .unter{overflow-wrap:anywhere}}
@media (max-width: 760px){body .wa-ak .ak-aktionen{flex:1 1 100%;max-width:100%;box-sizing:border-box}}

/* v2.283.5 (Frodo, 26.10.2026: „checken, ob wir die Probleme noch irgendwo haben“ — Handy-Prüflauf über alle Seiten):
   „?“-Erklärungen klappten nach rechts auf und wurden am Bildschirmrand abgeschnitten; die unsichtbaren Texte der
   „?“-Marken machten Seiten zudem breiter als den Bildschirm. Am Handy erscheint jede Erklärung deshalb unten als
   Leiste über die volle Breite — für die Marke (.hinweis-marke) und alle Klappen <details class="…-frage">. */
@media (max-width: 760px) {
  .hinweis-marke::after { position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; transform: none; width: auto; max-width: none; }
  details[class$="-frage"][open] > div { position: fixed !important; left: 16px !important; right: 16px !important; top: auto !important; bottom: 16px !important; width: auto !important; max-width: none !important; max-height: 60vh; overflow: auto; z-index: 95; }
}

/* ─── v2.285.0 Kopfleiste am Handy (Frodo, 26.10.2026: „Icons von Größe und Optik gestaucht, nicht optimal ausgerichtet"):
   ein Raster für alles rechts — 40-px-Tippfläche, Zeichen 20 px, Strich 1,75; Scanner als runder Knopf statt gequetschter Pille,
   „wechseln" als Zeichen. Höhe bleibt 52 px (andere Leisten kleben darunter). ─── */
.wechsel-link{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem}
.wechsel-link svg{display:none}
@media (max-width: 760px){
  header.kopf{padding:0 .5rem;gap:.25rem}
  header.kopf .burger{width:40px;height:40px;margin-left:0;border-radius:50%}
  header.kopf .burger svg{width:22px;height:22px;stroke-width:1.75}
  header.kopf .marke{display:flex;align-items:center;height:40px;padding:0 .25rem}
  header.kopf .rechts{gap:.25rem}
  header.kopf .rechts .icon-knopf,header.kopf .rechts #scanKnopf,header.kopf .rechts .as-knopf,header.kopf .rechts .wechsel-link{
    width:40px;min-width:40px;height:40px;padding:0;margin:0;justify-content:center;border-radius:50%;display:inline-flex;align-items:center;gap:0}
  header.kopf .rechts .icon-knopf svg,header.kopf .rechts #scanKnopf svg,header.kopf .rechts .as-knopf svg,header.kopf .rechts .wechsel-link svg{width:20px;height:20px;stroke-width:1.75}
  header.kopf .rechts .wechsel-link{color:var(--text-2)}
  header.kopf .rechts .wechsel-link svg{display:block}
  header.kopf .rechts .wechsel-link span,header.kopf .rechts #scanKnopf .scan-knopf-text{display:none}
  header.kopf .rechts .wechsel-link:active,header.kopf .rechts .icon-knopf:active{background:var(--erhoben)}
  header.kopf #scanKnopf .scan-punkt{position:absolute;top:5px;right:5px;width:8px;height:8px}
  header.kopf #scanKnopf .scan-zahl{position:absolute;top:-3px;right:-3px}
  header.kopf .konto-kreis{width:34px;height:34px;margin:3px;font-size:.75rem}
}