/* `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;

  --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);
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

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); }

.rumpf { max-width: 68rem; margin: 0 auto; padding: 1.75rem 1.25rem 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; }

.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; }
table.liste tbody tr:not([onclick]) { cursor: default; }
table.liste tbody tr:not([onclick]):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 { max-width: 1100px; margin: .6rem auto -.4rem; padding: 0 1.25rem; }
.zurueck-link { font-size: .8125rem; color: var(--text-2); text-decoration: none; }
.zurueck-link:hover { color: var(--text); }
.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:96px;position:relative}
.bz.ueber{border-color:var(--ac);background:var(--ac-weich)}
.bz-bild{position:relative;width:84px;height:84px;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:cover;display:block;cursor:zoom-in}
.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:84px;height:84px;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)}