/*
 * reXla - Gestaltung. (c) Jucama KG.
 *
 * Angelehnt an terXtic (terxtic/public/assets/styles.css): grauer Grund,
 * weisse Flaechen, weisse Kopfzeile mit rotem Abschlussstrich, Rot als
 * Akzent, Systemschrift (terXtic hostet bewusst keine Webfonts - also hier
 * auch keine). Gleiche Farbwerte, gleiche Radien, 44px-Tippziele am Handy.
 *
 * Kein style= im HTML: die CSP verwirft es still.
 */
:root {
  --dunkel:      #1c1c1c;
  --rand:        #d0d0d0;
  --rand-hell:   #e6e6e6;
  --grund:       #f4f4f4;
  --weiss:       #ffffff;
  --text:        #171717;
  --leise:       #6b6b6b;
  --akzent:      #e20000;   /* Markenrot von terXtic */
  --akzent-tief: #b00000;
  --akzent-hell: #fff2f2;
  --blau:        #0077a8;
  --ok:          #15803d;
  --ok-hell:     #f0fdf4;
  --gefahr:      #b00000;
  --gefahr-hell: #fff2f2;
  --warn:        #92400e;
  --warn-hell:   #fffbeb;
  --radius:      8px;
  --breite:      1200px;
  /* Altname, von einzelnen Regeln weiter unten benutzt. */
  --linie:       var(--rand-hell);
  --flaeche:     var(--grund);

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--grund); -webkit-text-size-adjust: 100%; }
a { color: var(--akzent); }
a:hover { color: var(--dunkel); }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.5rem; margin: .4rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
code { font-size: .9em; background: var(--grund); padding: .1em .3em; border-radius: 4px; }
[hidden] { display: none !important; }

/* ==========================================================================
   Kopf und Navigation
   ========================================================================== */
.kopf {
  background: var(--weiss); color: var(--text);
  border-bottom: 3px solid var(--akzent);
  position: sticky; top: 0; z-index: 20;
}
.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: .6rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
}
/* Die Marke (1.3.0.0): der reXla-Stempel und der Schriftzug mit rotem X.
   Das terXtic-Logo gehoert nicht hierher, es ist eine andere Anwendung. */
.marke {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--text); font-weight: 700; font-size: 1.2rem; text-decoration: none;
  white-space: nowrap; line-height: 1.2;
}
.marke-symbol { flex: 0 0 auto; display: block; }
.marke-x { color: var(--akzent); }
.marke:hover { color: var(--akzent-tief); }

/* Menue am Handy: unsichtbares Kaestchen + Beschriftung, kein Skript.
   Nicht display:none - sonst ist es mit der Tastatur nicht erreichbar. */
.menue-schalter { position: absolute; opacity: 0; margin: 0; width: 1px; height: 1px; pointer-events: none; }
.menue-knopf {
  order: 2; margin-left: auto;
  display: flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: 0 .7rem;
  border: 1px solid var(--rand); border-radius: var(--radius);
  color: var(--leise); font-size: .85rem; font-weight: 600; cursor: pointer; user-select: none;
}
.menue-knopf:hover { background: var(--grund); color: var(--text); }
.menue-schalter:focus-visible + .menue-knopf { outline: 2px solid var(--akzent); outline-offset: 2px; }
.menue-striche, .menue-striche::before, .menue-striche::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
}
.menue-striche { position: relative; }
.menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; }
.menue-striche::before { top: -6px; }
.menue-striche::after { top: 6px; }
.menue-schalter:checked + .menue-knopf .menue-striche { background: transparent; }
.menue-schalter:checked + .menue-knopf .menue-striche::before { top: 0; transform: rotate(45deg); }
.menue-schalter:checked + .menue-knopf .menue-striche::after { top: 0; transform: rotate(-45deg); }

.nav {
  display: none; order: 3; width: 100%; flex-direction: column; gap: .15rem;
  margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--rand);
  max-height: calc(100vh - 12rem); overflow-y: auto;
}
.menue-schalter:checked ~ .nav { display: flex; }
.nav a {
  color: var(--leise); text-decoration: none; padding: .45rem .7rem; border-radius: var(--radius);
  white-space: nowrap; font-size: .95rem; display: flex; align-items: center; min-height: 44px;
}
.nav a:hover { background: var(--grund); color: var(--text); }
.nav a.aktiv { background: var(--akzent); color: #fff; }

/* Wer angemeldet ist: am Handy im aufgeklappten Menue unten, am Rechner
   oben rechts. */
.wer {
  display: none; order: 4; width: 100%; align-items: center; justify-content: space-between; gap: .5rem;
  padding-top: .4rem; border-top: 1px solid var(--rand-hell); font-size: .9rem;
}
.menue-schalter:checked ~ .wer { display: flex; }
.wer > a {
  color: var(--text); font-weight: 600; text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center; padding: 0 .4rem; border-radius: var(--radius);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.wer > a:hover { background: var(--grund); }
.wer > a.aktiv { color: var(--akzent-tief); box-shadow: inset 0 -2px 0 var(--akzent); }
.kopf button.link {
  background: var(--weiss); color: var(--leise); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 0 .8rem; min-height: 44px; font-size: .85rem; text-decoration: none;
}
.kopf button.link:hover { background: var(--grund); color: var(--text); }

/* Posteingang (0.2.9.0): fester Knopf mit Zahl, Vorbild terXtic. Steht vor
   Menueknopf und Konto, deshalb nimmt ER den Abstand nach links. */
.fix-zugriff { display: flex; order: 1; margin-left: auto; }
.fix-zugriff ~ .menue-knopf { margin-left: 0; }
.schnell-knopf {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--rand); border-radius: var(--radius);
  color: var(--leise); text-decoration: none;
}
.schnell-knopf:hover { background: var(--grund); color: var(--text); }
.schnell-knopf.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.schnell-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.schnell-knopf .sym { width: 22px; height: 22px; }
.schnell-zahl {
  position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--akzent); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}
.schnell-knopf.an .schnell-zahl { background: var(--text); }

@media (min-width: 48rem) {
  .menue-knopf { display: none; }
  .schnell-knopf { width: 38px; height: 38px; }
  .fix-zugriff ~ .wer { margin-left: .5rem; }
  .nav {
    display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 0; padding-top: 0;
    border-top: 0; max-height: none; overflow: visible;
  }
  .nav a { min-height: 38px; padding: .35rem .7rem; }
  .wer {
    display: flex; order: 1; width: auto; margin-left: auto; padding-top: 0; border-top: 0;
    justify-content: flex-end;
  }
  .wer > a { min-height: 38px; max-width: 16rem; }
  .kopf button.link { min-height: 38px; }
}

.inhalt { max-width: var(--breite); margin: 0 auto; padding: 1rem; }
@media (min-width: 40rem) { .inhalt { padding: 1.5rem 1rem; } h1 { font-size: 1.75rem; } }
.fuss { margin-top: 2rem; border-top: 1px solid var(--rand-hell); color: var(--leise); font-size: .8rem; }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 1rem; }
.pfad { color: var(--leise); font-size: .9rem; margin: 0; }
.pfad a { text-decoration: none; }

/* Anmeldung und schmale Seiten: weisse Karte mit rotem Strich oben, wie
   die Anmeldekarte von terXtic. */
.schmal {
  max-width: 28rem; margin: 2rem auto; background: var(--weiss);
  border: 1px solid var(--rand-hell); border-top: 3px solid var(--akzent);
  border-radius: var(--radius); padding: 1.5rem;
}
.schmal h1 { font-size: 1.3rem; margin-top: 0; }

/* ==========================================================================
   Formulare
   ========================================================================== */
.formular label { display: block; margin: 0 0 .9rem; font-size: .9rem; font-weight: 600; color: var(--text); }
.formular input:not([type=checkbox]):not([type=radio]), .formular select, .formular textarea,
.filter input, .filter select, .positionen input, .positionen textarea {
  display: block; width: 100%; font: inherit; font-weight: 400; color: var(--text);
  padding: .55rem .7rem; min-height: 44px; margin-top: .25rem;
  border: 1px solid var(--rand); border-radius: var(--radius); background: var(--weiss);
}
.formular textarea, .positionen textarea { line-height: 1.5; resize: vertical; }
.formular input[type=file] { border-style: dashed; background: var(--grund); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
/* Die Hauptformulare einer Seite stehen als weisse Karte auf dem Grund. */
.inhalt > .formular, .inhalt > form > fieldset {
  background: var(--weiss); border: 1px solid var(--rand-hell); border-radius: var(--radius);
  padding: 1rem; margin-bottom: 1rem;
}
.formular.breit { max-width: none; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1rem; }
.raster.lesen { gap: 1rem; margin-bottom: 1rem; }
label.haken { display: flex; align-items: flex-start; gap: .5rem; color: var(--text); font-weight: 400; cursor: pointer; }
label.haken input { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; flex: none; }
fieldset { border: 1px solid var(--rand-hell); border-radius: var(--radius); margin: 0 0 1rem; background: var(--weiss); }
legend { font-weight: 600; padding: 0 .3rem; }
.filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filter input, .filter select { width: auto; margin: 0; }

/* ==========================================================================
   Schaltflaechen
   ========================================================================== */
button, .knopf {
  display: inline-block; font: inherit; font-size: .95rem; padding: .55rem 1rem; min-height: 44px;
  border: 1px solid var(--rand); border-radius: var(--radius); background: var(--weiss); color: var(--text);
  cursor: pointer; text-decoration: none; line-height: 1.3; text-align: center;
}
a.knopf { display: inline-flex; align-items: center; justify-content: center; }
button:hover, .knopf:hover { background: var(--grund); color: var(--text); }
button:focus-visible, .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
button.haupt, .knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
button.haupt:hover, .knopf.haupt:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); color: #fff; }
button.gefahr, .knopf.gefahr { color: var(--gefahr); border-color: #f0bcbc; background: var(--gefahr-hell); }
button.gefahr:hover, .knopf.gefahr:hover { background: #ffe6e6; color: var(--gefahr); }
button.klein, .knopf.klein { padding: .3rem .7rem; min-height: 36px; font-size: .85rem; }
button.link { background: none; border: 0; color: var(--akzent); text-decoration: underline; padding: 0; min-height: 0; }
button.link:hover { background: none; color: var(--dunkel); }
form.inline { display: inline; }
.inline-zeile { margin: 1rem 0; }
.inline-zeile select { display: inline-block; width: auto; }
.knopfleiste { margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Aufklapper: Dreieck, das sich beim Oeffnen dreht - wie in terXtic. */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸"; display: inline-block; margin-right: .4rem; color: var(--leise); transition: transform .15s ease; }
details[open] > summary::before { transform: rotate(90deg); }

/* ==========================================================================
   Tabellen
   ========================================================================== */
.liste {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: .93rem;
  background: var(--weiss); border: 1px solid var(--rand-hell); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 1rem;
}
.liste th, .liste td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rand-hell); vertical-align: top; }
.liste tr:last-child td { border-bottom: 0; }
.liste th { color: var(--leise); font-weight: 600; font-size: .85rem; background: var(--grund); }
.liste tbody tr:hover td { background: #fafafa; }
.zahl { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.minus { color: var(--gefahr); font-weight: 600; }
.knapp { color: var(--warn); font-weight: 600; }
.leer { color: var(--leise); text-align: center !important; }
tr.still td { color: #9a9a9a; }
.klein { font-size: .82rem; color: var(--leise); }

.positionen { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.positionen th { text-align: left; font-size: .8rem; color: var(--leise); padding: 0 .3rem; }
.positionen td { padding: .25rem .3rem; vertical-align: top; border-bottom: 1px solid var(--rand-hell); }
.positionen textarea { font-size: .85rem; margin-top: .25rem; min-height: 2.6rem; }
.positionen .kurz { max-width: 7rem; }
.positionen input.zahl { text-align: right; }

/* ==========================================================================
   Meldungen und Hinweise
   ========================================================================== */
.meldung { padding: .7rem .9rem; border-radius: var(--radius); margin: 0 0 1rem; border: 1px solid transparent; font-size: .95rem; }
.meldung.ok { background: var(--ok-hell); border-color: #bbf7d0; color: var(--ok); }
.meldung.warnung { background: var(--warn-hell); border-color: #f5d98b; color: var(--warn); }
.meldung.fehler { background: var(--gefahr-hell); border-color: #f0bcbc; color: var(--gefahr); }
.meldung.info { background: var(--akzent-hell); border-color: #f5c2c2; color: var(--akzent-tief); }
.meldung ul { margin: 0; padding-left: 1.2rem; }
.hinweis { color: var(--leise); font-size: .88rem; }
.summe { font-size: 1.02rem; margin: .6rem 0; }
.schluessel { font-size: 1rem; word-break: break-all; display: block; padding: .5rem; }

/* Abzeichen als Pillen - wie .status-schild / .marke in terXtic. */
.marke-status, .marke-zahlung {
  display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .55rem;
  border-radius: 999px; border: 1px solid var(--rand-hell); background: var(--grund); color: var(--leise);
  vertical-align: middle; white-space: nowrap; line-height: 1.4;
}
.marke-status.entwurf { background: var(--warn-hell); border-color: #fde68a; color: var(--warn); }
.marke-status.gestellt { background: var(--ok-hell); border-color: #bbf7d0; color: var(--ok); }
.marke-status.storniert { background: var(--gefahr-hell); border-color: #f0bcbc; color: var(--gefahr); }

/* ==========================================================================
   Kacheln (Uebersicht)
   ========================================================================== */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kachel {
  display: block; background: var(--weiss); border: 1px solid var(--rand-hell); border-radius: var(--radius);
  padding: 1rem; text-decoration: none; color: var(--text);
}
a.kachel:hover { border-color: var(--akzent); background: var(--akzent-hell); color: var(--text); }
.kachel b { display: block; font-size: 2rem; line-height: 1.1; margin-bottom: .2rem; }
.kachel span { color: var(--leise); font-size: .9rem; }
.gefahrzone { margin-top: 1.5rem; border: 1px solid #f0bcbc; background: var(--weiss); border-radius: var(--radius); padding: .6rem 1rem; }
.gefahrzone summary { color: var(--gefahr); font-weight: 600; min-height: 36px; display: flex; align-items: center; }

@media (max-width: 760px) {
  .positionen thead { display: none; }
  /* Positionen als nummerierte Karte im Raster (1.3.2.0): Art.-Nr. und
     Bezeichnung ueber die ganze Breite, Menge | Einheit | Preis und
     Rabatt | USt nebeneinander - vorher stand jedes Feld allein in einer
     Zeile und eine Position war rund 600 px hoch. */
  .positionen { counter-reset: pos; }
  .positionen tbody tr {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem .5rem; counter-increment: pos;
    border: 1px solid var(--rand-hell); border-radius: var(--radius); margin-bottom: .6rem; padding: .5rem .6rem .6rem; background: var(--weiss);
  }
  .positionen tbody tr::before { content: "Position " counter(pos); grid-column: 1 / -1; font-weight: 600; font-size: .85rem; }
  .positionen td { display: block; border: 0; padding: 0; min-width: 0; }
  .positionen .kurz { max-width: none; }
  .positionen td.sp-nr, .positionen td.sp-bez { grid-column: 1 / -1; }
  .positionen td.sp-menge, .positionen td.sp-einheit, .positionen td.sp-preis { grid-column: span 2; }
  .positionen td.sp-rabatt, .positionen td.sp-ust { grid-column: span 3; }
  .positionen.ohne-preise td.sp-menge, .positionen.ohne-preise td.sp-einheit { grid-column: span 3; }
  .positionen td.sp-preis input { max-width: none; }
  .positionen td.sp-preis input::placeholder { font-size: .78rem; }
  .positionen td.sp-nr { display: grid; grid-template-columns: 1fr auto; column-gap: .4rem; align-items: end; }
  .positionen td.sp-nr::before, .positionen td.sp-nr .lagerinfo { grid-column: 1 / -1; }
  .positionen td.sp-nr .artikel-suche-knopf { min-height: 44px; }
  .positionen td.sp-bez textarea { margin-top: .3rem; }
  .zeile-dazu { width: 100%; min-height: 44px; margin-bottom: 1rem; }
  /* Kopf des Belegs: breite Felder ueber die ganze Zeile, kurze paarweise. */
  #belegformular > .raster { grid-template-columns: 1fr 1fr; gap: 0 .6rem; align-items: end; }
  #belegformular > .raster > label.voll { grid-column: 1 / -1; }
  /* Speichern, Vorschau und Stellen bleiben am unteren Rand erreichbar. */
  #belegformular .beleg-knoepfe {
    position: sticky; bottom: 0; z-index: 5; margin: 1rem -1rem -1rem; padding: .6rem 1rem;
    background: var(--weiss); border-top: 1px solid var(--rand-hell); box-shadow: 0 -4px 10px rgba(0, 0, 0, .06);
  }
  #belegformular .beleg-knoepfe > * { flex: 1 1 auto; }
  .zaehlliste tr:first-child { display: none; }
  .zaehlliste tr { display: block; border-bottom: 1px solid var(--rand-hell); padding: .4rem 0; }
  .zaehlliste td { display: flex; justify-content: space-between; align-items: center; border: 0; padding: .15rem 0; }
  .zaehlliste td[data-label]::before { content: attr(data-label); font-size: .75rem; color: var(--leise); margin-right: .5rem; }
  .positionen td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--leise); margin-bottom: .1rem; }
}

/* Die Bezeichnung braucht den Platz, nicht der Preis. */
/* Nur am breiten Fenster: am Handy steht jede Zelle als eigene Zeile, dort
   machten 38 % das Bezeichnungsfeld unbedienbar schmal. */
@media (min-width: 761px) { .positionen td:nth-child(2), .positionen th:nth-child(2) { width: 38%; } }
.positionen td:nth-child(5) input { max-width: 9rem; margin-left: auto; }
.liste td:nth-child(2) { white-space: nowrap; }

details.eintrag { background: var(--weiss); border: 1px solid var(--rand-hell); border-radius: var(--radius); padding: .5rem .8rem; margin-bottom: .5rem; }
details.eintrag summary, details.eintrag-zelle summary { cursor: pointer; }
details.eintrag[open] summary { margin-bottom: .6rem; font-weight: 600; }
.schmal-tabelle { max-width: 44rem; margin-bottom: .6rem; }
.ebene-2 { padding-left: 1.6rem !important; }
.ebene-3 { padding-left: 3.2rem !important; }
.preise input.zahl { max-width: 9rem; margin-left: auto; text-align: right; }
.kalkulator {
  background: var(--weiss); border: 1px solid var(--rand-hell); border-radius: var(--radius); padding: .6rem .8rem; margin: .6rem 0 1rem;
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
}
.kalkulator label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.kalkulator input, .kalkulator select { display: inline-block; width: auto; max-width: 8rem; margin: 0; }
.artikelbild { max-width: 260px; max-height: 260px; border: 1px solid var(--rand-hell); border-radius: var(--radius); background: var(--weiss); }
.lagerinfo, .mindestinfo { display: block; font-size: .78rem; color: var(--leise); white-space: nowrap; font-weight: 400; }
.mindestinfo { color: var(--warn); }

/* ==========================================================================
   Zahlungen und Verzug - Verzug bleibt rot, Storno durchgestrichen.
   ========================================================================== */
.marke-zahlung { margin-top: .15rem; }
.marke-zahlung.offen { background: #eaf4f9; border-color: #b8dceb; color: var(--blau); }
.marke-zahlung.teilbezahlt { background: var(--warn-hell); border-color: #fde68a; color: var(--warn); }
.marke-zahlung.bezahlt { background: var(--ok-hell); border-color: #bbf7d0; color: var(--ok); }
.marke-zahlung.verzug { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }
.liste tr.verzug td { background: var(--gefahr-hell); }
.liste tr.verzug.lange td { background: #fbdcdc; font-weight: 600; }
.liste tr.verzug td:first-child { box-shadow: inset 3px 0 0 var(--gefahr); }
.verzug-titel { color: var(--gefahr); }
.kachel.warnung { border-color: var(--gefahr); background: var(--gefahr-hell); }
.kachel.warnung b { color: var(--gefahr); }
tr.durchgestrichen td { color: var(--leise); text-decoration: line-through; }
tr.durchgestrichen td:last-child { text-decoration: none; }
.betrag-ein { color: var(--ok); }
.betrag-aus { color: var(--gefahr); }
.liste .stand-zeile td, .stand-zeile td { font-weight: 600; background: var(--grund); }

/* ==========================================================================
   Anmeldung, Konto
   ========================================================================== */
.inhalt button.link { color: var(--akzent); margin-top: .6rem; }
.passkey-weg { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rand-hell); }
.schmal-form { max-width: 28rem; }
.codeblock {
  background: var(--grund); border: 1px solid var(--rand-hell); padding: .7rem .9rem; border-radius: var(--radius);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.zf-einrichten { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.qr svg { width: 15rem; max-width: 100%; height: auto; background: #fff; display: block; border: 1px solid var(--rand-hell); border-radius: var(--radius); padding: .5rem; }
/* Belegnummern (KA-2026-0001, EB-2026-0002 …) nie mitten im Wort umbrechen. */
table.liste td:first-child, table.liste th:first-child { white-space: nowrap; }

/* Breite Tabellen am Handy: waagrecht rollen statt die Seite zu sprengen. */
@media (max-width: 40rem) {
  .liste { display: block; overflow-x: auto; }
  .inhalt > .formular, .schmal { padding: 1rem; }
  .schmal { margin: 1rem auto; }
}

/* Listen als Karten am Handy (1.3.1.0): Belege, Belege beim Kunden, Ausgaben,
   Einnahmen. Statt neun Spalten nebeneinander (Kundennamen ueber fuenf Zeilen,
   Betrag und Status nur durch Wischen) wird jede Zeile eine Karte, jede Zelle
   eine Zeile mit ihrer Beschriftung links (data-label, wie beim
   Positionsformular). Leere Zellen fallen weg. Am Desktop bleibt die Tabelle. */
@media (max-width: 40rem) {
  .liste.karten { display: block; overflow: visible; border: 0; background: transparent; font-size: .95rem; }
  .karten thead { display: none; }
  .karten tbody { display: block; }
  .karten tr {
    display: block; background: var(--weiss); border: 1px solid var(--rand-hell); border-radius: var(--radius);
    margin-bottom: .6rem; padding: .35rem .7rem;
  }
  .liste.karten td {
    display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: baseline; gap: .2rem .4rem;
    border: 0; padding: .2rem 0; white-space: normal; text-align: right; background: transparent; box-shadow: none;
  }
  .karten td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto; margin-right: auto; padding-right: .6rem; text-align: left; font-size: .78rem; font-weight: 400; color: var(--leise); white-space: nowrap;
  }
  .karten td:empty { display: none; }
  .karten td[data-label="Nummer"], .karten td[data-label="Nr."] { font-weight: 600; }
  .karten td.leer { display: block; text-align: center; }
  .karten tr.verzug { background: var(--gefahr-hell); box-shadow: inset 3px 0 0 var(--gefahr); }
  .liste.karten tr.verzug td:first-child { box-shadow: none; }
  .karten tr.verzug.lange { background: #fbdcdc; }
  .karten tr.stand-zeile { background: var(--grund); font-weight: 600; }
  .karten tr.stand-zeile td[colspan] { display: inline; }
  .karten tr.stand-zeile td.zahl { display: inline; float: right; }
}

@media print {
  .kopf, .fuss, .knopfleiste, .filter { display: none !important; }
  body { background: #fff; }
  .liste, .kachel, .inhalt > .formular { border-color: #ccc; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Mail ---- */
.mailtext { white-space: pre-wrap; word-break: break-word; background: var(--weiss); border: 1px solid var(--rand-hell); border-radius: var(--radius); padding: 1rem; font: inherit; max-height: 40rem; overflow: auto; }
.mailversand { margin: 1rem 0; }

/* Belegnummern und Ähnliches nicht mitten im Bindestrich umbrechen. */
.einzeilig { white-space: nowrap; }

/* ---- Kassabuch: gegengebuchte Zeilen ---------------------------------------
   Betrag und Text durchgestrichen, der Stand nicht: Er ist der Kassastand
   NACH dieser Buchung und war zu dem Zeitpunkt richtig. */
tr.gegengebucht td { color: var(--leise); }
tr.gegengebucht td.betrag-ein, tr.gegengebucht td.betrag-aus { text-decoration: line-through; }

/* ---- Fußzeile ---------------------------------------------------------------- */
.fuss a { color: inherit; }
.fuss a:hover { color: var(--akzent); }

/* ---- Untermenü in der Navigation (<details>, siehe nav_gruppe()) ------------- */
.nav-gruppe > summary {
  list-style: none; cursor: pointer; color: var(--leise); padding: .45rem .7rem; border-radius: var(--radius);
  white-space: nowrap; font-size: .95rem; display: flex; align-items: center; gap: .35rem; min-height: 44px;
}
.nav-gruppe > summary::-webkit-details-marker { display: none; }
.nav-gruppe > summary::before { content: none; }
.nav-gruppe > summary::after { content: "▾"; font-size: .75rem; }
.nav-gruppe[open] > summary::after { content: "▴"; }
.nav-gruppe > summary:hover { background: var(--grund); color: var(--text); }
.nav-gruppe > summary.aktiv { background: var(--akzent); color: #fff; }
.nav-gruppe > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.nav-unter { display: flex; flex-direction: column; gap: .1rem; padding: .2rem 0 .2rem 1rem; }
.nav-unter a.aktiv { background: var(--akzent-hell); color: var(--akzent-tief); }
.nav-trenner { display: block; height: 0; border-top: 1px solid var(--rand); margin: .3rem .4rem; }
@media (min-width: 48rem) {
  .nav-gruppe { position: relative; }
  .nav-gruppe > summary { min-height: 38px; padding: .35rem .7rem; }
  .nav-unter {
    position: absolute; top: calc(100% + .3rem); left: 0; z-index: 20; min-width: 12rem; padding: .35rem;
    background: var(--weiss); border: 1px solid var(--rand-hell); border-top: 3px solid var(--akzent);
    border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  }
}

/* ---- Rückfrage im eigenen Fenster statt window.confirm() --------------------
   Wie in terXtic (.frage-dialog): blauer Rand für gewöhnliche Fragen, roter
   für alles, was etwas wegnimmt. */
.frage-dialog {
  max-width: 28rem; width: calc(100% - 2rem); border: 1px solid var(--rand); border-top: 4px solid var(--blau);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; background: var(--weiss); color: var(--text);
}
.frage-dialog.gefahr { border-top-color: var(--akzent); }
.frage-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.frage-dialog h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.frage-dialog p { margin: 0 0 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.frage-knoepfe { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.frage-knoepfe button { min-height: 44px; }

/* ---- Auswertung: Balkenbild (SVG mit Attributen, kein style - CSP) ----------- */
.ea-rahmen { background: var(--weiss); border: 1px solid var(--rand-hell); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.ea-bild { width: 100%; height: auto; display: block; }
.ea-bild text { font-size: 12px; fill: var(--leise); }
.ea-bild .ea-achse { stroke: var(--rand); stroke-width: 1; }
.ea-e { fill: var(--ok); background: var(--ok); }
.ea-a { fill: var(--akzent); background: var(--akzent); }
/* Statistik (1.1.0.0): Balken als SVG, Breite über das Attribut. */
.stat-anteil { white-space: nowrap; min-width: 9rem; }
.stat-balken { display: inline-block; width: 6rem; height: .55rem; vertical-align: middle; background: var(--grund); border-radius: 2px; }
.ea-punkt { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; margin: 0 .25rem 0 .6rem; }
tr.leise td { color: var(--leise); }

/* Abgeleiteter Status: aus diesem Beleg ist ein anderer entstanden. */
.marke-status.umgewandelt { background: #eef6fb; border-color: #bfdbea; color: var(--blau); }

/* ---- An den Kunden übermitteln: QR-Code (Freigabelink) -------------------------
   Groß genug, dass eine Handykamera ihn aus Armlänge liest, auch am Handy
   des Verkäufers selbst (der Kunde scannt das Display). Weißer Rand ist
   Pflicht - ohne Ruhezone erkennen viele Kameras den Code nicht. */
.uebermitteln { background: var(--weiss); border: 1px solid var(--rand-hell); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.uebermitteln h2 { margin-top: 0; }
.qr-gross { background: #fff; display: flex; justify-content: center; padding: .5rem; }
.qr-gross svg { width: min(80vw, 20rem); height: auto; display: block; }
.qr-text { text-align: center; }

/* Nummernkreise: Startnummer ist eine kurze Zahl */
.nummer-eingabe { max-width: 8rem; }

/* Lizenz: Balken im Lesemodus (ausserhalb von <main>, siehe inc/lizenz.php). */
.lizenz-balken { background: var(--warn-hell); border-bottom: 1px solid #f5d98b; color: var(--warn); padding: .55rem 1rem; text-align: center; font-size: .95rem; }
.lizenz-balken a { color: inherit; font-weight: 600; }
.jucama-hinweis { font-weight: 600; }
.lizenz-balken.update { background: var(--gefahr-hell); border-bottom-color: #f0bcbc; color: var(--gefahr); }

/* Logo-Vorschau (Einstellungen -> Logo): auf Papierweiss mit Rahmen, damit
   Transparenz und Ränder zu sehen sind. */
.logo-vorschau img { max-width: 100%; max-height: 120px; background: #fff; border: 1px solid var(--linie, #ddd); padding: .5rem; }

/* Artikelsuche in den Belegpositionen */
.artikel-suche-knopf { margin-top: .25rem; }
.artikel-suche { width: min(40rem, calc(100vw - 2rem)); }
.artikel-suche input[type=search] { width: 100%; margin-bottom: .6rem; }
.artikel-treffer { max-height: 55vh; overflow-y: auto; margin-bottom: .8rem; }
.artikel-treffer button { display: block; width: 100%; text-align: left; min-height: 44px; margin-bottom: .3rem; padding: .4rem .6rem; }
.artikel-treffer .treffer-titel { display: block; font-weight: 600; }
.artikel-treffer .treffer-info { display: block; font-size: .8rem; color: var(--leise); }

/* Bankabgleich (0.2.7.0) */
.bank-vorschlag { display: block; margin: 0 0 .3rem; }
.bank-vorschlag button { text-align: left; white-space: normal; }
.bank-weitere { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-top: .2rem; }
details.inline { display: inline-block; }
details.inline .inline-zeile { margin: .3rem 0; }
.breit-rollen { overflow-x: auto; max-width: 100%; }
input.kurz { max-width: 8rem; }
.antwort { margin: 1.5rem 0; } .antwort > summary { display: inline-block; cursor: pointer; }
.bank-wahl { margin: .3rem 0; } .bank-wahl input { width: auto; max-width: 14rem; display: inline-block; }