/*
 * 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 als Schriftzug mit rotem Balken - das terXtic-Logo gehoert
   nicht hierher, es ist eine andere Anwendung. */
.marke {
  color: var(--text); font-weight: 700; font-size: 1.1rem; text-decoration: none;
  white-space: nowrap; border-left: 4px solid var(--akzent); padding-left: .5rem; line-height: 1.2;
}
.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); }

@media (min-width: 48rem) {
  .menue-knopf { display: none; }
  .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 tr { display: block; border: 1px solid var(--rand-hell); border-radius: var(--radius); margin-bottom: .6rem; padding: .3rem; background: var(--weiss); }
  .positionen td { display: block; border: 0; }
  .positionen .kurz { max-width: none; }
}

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

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