/*
  Belege — Oberfläche

  Aufbau: Kopfzeile mit der aktiven Firma, darunter der Inhalt des gewählten
  Tabs, unten die Tab-Leiste. Das ist die Form, die man von einer App erwartet,
  und sie macht jederzeit sichtbar, für welche Firma man gerade arbeitet —
  bei getrennten Buchhaltungen ist das die wichtigste Information auf dem Schirm.

  Keine Webfonts: Die App muss offline in Millisekunden startklar sein.
  Ein Ladehänger an der Kasse kostet mehr als jede Typografie bringt.

  Farben: helles Papierweiß als Grund, Blau bis Cyan als Leitfarbe. Zwei
  Ausnahmen bleiben dunkel, und zwar aus einem Grund, nicht aus Nachlässigkeit:
  der Kamera-Sucher und die Bildfläche eines Belegs. Ein Sucher mit weißem
  Rahmen blendet im Dunkeln und verfälscht, was man vom Beleg sieht.
*/

:root {
  --bg: #f2f6fd;
  --flaeche: #ffffff;
  --flaeche-hoch: #e9f0ff;
  --rand: rgba(12, 38, 86, 0.10);
  --ink: #0b1b33;
  --ink-dim: #5b6b86;
  --ready: #0f6fff;
  --ready-weich: rgba(15, 111, 255, 0.11);
  --cyan: #00c2f0;
  /* Leitfarbe im Sucher: auf Schwarz muss sie leuchten, nicht nur stimmen. */
  --cam-ok: #27e0ff;
  --violett: #7b5cff;
  --warn: #c76a00;
  --warn-weich: rgba(199, 106, 0, 0.11);
  --rot: #d92d20;
  --rot-weich: rgba(217, 45, 32, 0.10);
  --idle: #93a1b5;
  --scrim: rgba(8, 22, 48, 0.42);
  --verlauf: linear-gradient(135deg, #0f6fff 0%, #00c2f0 100%);
  --verlauf-weich: linear-gradient(135deg, rgba(15,111,255,0.14), rgba(0,194,240,0.07));
  --glanz: 0 8px 26px rgba(15, 111, 255, 0.14);
  --glanz-hoch: 0 14px 40px rgba(15, 111, 255, 0.22);
  --radius: 14px;
  --radius-gross: 18px;
  --touch: 52px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Muss vor allen Layoutregeln stehen: ID-Regeln mit display schlagen sonst
   das hidden-Attribut, und kein Overlay liesse sich ausblenden. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background:
    radial-gradient(60rem 36rem at 12% -8%, rgba(15, 111, 255, 0.10), transparent 70%),
    radial-gradient(48rem 30rem at 94% 4%, rgba(0, 194, 240, 0.10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font-size: 22px; font-weight: 680; letter-spacing: -0.2px; }
h3 {
  margin: 22px 0 10px;
  font-size: 12.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-dim);
}

/* ---------- Gemeinsame Bausteine ---------- */

.haupt {
  min-height: var(--touch);
  padding: 0 22px;
  border-radius: 999px;
  background: var(--verlauf);
  color: #fff;
  font-size: 16px;
  font-weight: 650;
  box-shadow: var(--glanz);
  transition: transform 140ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 140ms;
}
.haupt:active { transform: translateY(1px) scale(0.985); box-shadow: var(--glanz-hoch); }
.haupt:disabled { background: var(--flaeche-hoch); color: var(--ink-dim); box-shadow: none; }

.leise {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  color: var(--ready);
  font-size: 15px;
  font-weight: 600;
}
.leise:active { background: var(--flaeche-hoch); }

.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; }
.knopfreihe > button { flex: 1; min-width: 140px; }

.hinweis {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.hinweis.klein { font-size: 11.5px; }
.fehlermeldung {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--rot-weich);
  color: var(--rot);
  font-size: 13.5px;
}

.karte {
  padding: 16px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  box-shadow: 0 2px 14px rgba(12, 38, 86, 0.05);
}

.feld { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.feld label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-dim);
}
.feld input, .feld select {
  min-height: 48px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1.5px solid var(--rand);
  background: var(--flaeche);
  color: var(--ink);
  font: inherit;
  font-size: 16px;            /* unter 16px zoomt Safari beim Tippen hinein */
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
}
.feld select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
                    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.feld input:focus, .feld select:focus {
  outline: none;
  border-color: var(--ready);
}
.feldpaar { display: flex; gap: 10px; }

/* ---------- Vollbild-Ansichten ---------- */

.vollbild {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Der Belegbetrachter bleibt hell wie die App; nur die Bildfläche selbst
   liegt auf Dunkel, damit das Papier richtig zu beurteilen ist. */
.vollbild.dunkel { background: var(--bg); }

.vollbild .mitte {
  margin: auto;
  width: 100%;
  max-width: 26rem;
  padding: calc(env(safe-area-inset-top, 0px) + 32px)
           max(22px, env(safe-area-inset-right, 0px))
           calc(env(safe-area-inset-bottom, 0px) + 32px)
           max(22px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vollbild .logo { width: 62px; height: 62px; border-radius: 15px; }
.vollbild h1 { margin: 10px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
.unterzeile { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.5; }

#anmeldeform { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
#anmeldeform .haupt { margin-top: 6px; }

/* Firmenwahl */
#firmenliste { display: flex; flex-direction: column; gap: 11px; margin: 8px 0; }
#firmenliste button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding: 14px 18px;
  border: 1.5px solid var(--rand);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  text-align: left;
}
#firmenliste button:active { background: var(--flaeche-hoch); }
#firmenliste .fName { font-size: 18px; font-weight: 650; }
#firmenliste .fUnten { margin-top: 3px; font-size: 13px; color: var(--ink-dim); }
#firmenliste .fPfeil { color: var(--ready); font-size: 20px; }

/* ---------- Hauptgerüst ---------- */

#haupt {
  position: fixed;
  inset: 0;
  /* dvh statt nur inset: Auf dem iPhone wächst und schrumpft die sichtbare
     Fläche mit der Safari-Leiste. Mit inset allein ist die App zeitweise
     höher als das, was man sieht — und der Kamerasucher ragt unten unter
     die Leiste. 100dvh folgt der tatsächlich sichtbaren Höhe. */
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#kopf {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px)
           max(16px, env(safe-area-inset-right, 0px)) 10px
           max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--rand);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
}
#firmaWechseln {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--flaeche-hoch);
  font-size: 15px;
  font-weight: 650;
}
#firmaWechseln .pfeil { color: var(--ink-dim); font-size: 11px; }
#profilBtn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--flaeche-hoch);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-dim);
}

.tab {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inhalt {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) 24px
           max(16px, env(safe-area-inset-left, 0px));
}
.inhalt.listenraum { padding-top: 4px; }

/* ---------- Tab-Leiste ---------- */

#tableiste {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rand);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(140%);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#tableiste button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 7px 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-dim);
}
#tableiste button.an { color: var(--ready); }
#tableiste .tabIcon { font-size: 19px; line-height: 20px; }
#tableiste .punkt {
  position: absolute;
  top: 8px;
  right: calc(50% - 20px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
}

/* ---------- Start ---------- */

#begruessung { margin-bottom: 4px; }

#warnungen { display: flex; flex-direction: column; gap: 9px; margin: 14px 0 0; }
#warnungen .warnung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}
#warnungen .warnung.achtung { background: var(--warn-weich); color: var(--warn); }
#warnungen .warnung.ruhig   { background: var(--flaeche); color: var(--ink-dim); border: 1px solid var(--rand); }
#warnungen .warnung .pfeil { flex: none; opacity: 0.6; }

.kacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 18px;
}
.kachel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 104px;
  padding: 16px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  text-align: left;
}
.kachel:active { background: var(--flaeche-hoch); }
.kachel.gross {
  grid-column: 1 / -1;
  min-height: 92px;
  background: var(--verlauf);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--glanz);
}
.kachelIcon { font-size: 22px; line-height: 26px; color: var(--ready); }
.kachelZahl {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kachelZahl.achtung { color: var(--warn); }
.kachelTitel { font-size: 14.5px; font-weight: 620; margin-top: 2px; }
.kachelText { font-size: 12.5px; color: var(--ink-dim); line-height: 1.35; }

/* Beschriftung links, Wert rechts — gilt in jeder Karte, nicht nur auf
   der Startseite. */
.karte .zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-variant-numeric: tabular-nums;
}
.karte .zeile + .zeile { border-top: 1px solid var(--rand); }
.karte .gross { font-size: 25px; font-weight: 700; }
.karte .bez { font-size: 13.5px; color: var(--ink-dim); }

.haendlerkacheln { display: flex; flex-direction: column; gap: 8px; }
.haendlerkachel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  text-align: left;
}
.haendlerkachel:active { background: var(--flaeche-hoch); }
.haendlerkachel .hName { font-size: 15.5px; font-weight: 620; }
.haendlerkachel .hUnten { margin-top: 2px; font-size: 12.5px; color: var(--ink-dim); }
.haendlerkachel .hSumme {
  font-size: 15.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ---------- Belege ---------- */

.werkzeugleiste {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) 10px
           max(16px, env(safe-area-inset-left, 0px));
}
#suchfeld {
  min-height: 46px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1.5px solid var(--rand);
  background: var(--flaeche);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
}
#suchfeld:focus { outline: none; border-color: var(--ready); }

#ansichtswahl { display: flex; gap: 6px; }
#ansichtswahl button {
  flex: 1;
  min-height: 38px;
  border-radius: 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  color: var(--ink-dim);
  font-size: 13.5px;
  font-weight: 620;
}
#ansichtswahl button.an { background: var(--ready-weich); border-color: rgba(15,111,255,0.3); color: var(--ready); }

#filterleiste {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
#filterleiste:empty { display: none; }
#filterleiste button {
  flex: none;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
#filterleiste button.an { background: var(--verlauf); border-color: transparent; color: #fff; }

#belegeHinweis {
  flex: none;
  margin: 0;
  padding: 0 max(16px, env(safe-area-inset-left, 0px)) 8px;
}

.monatskopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0 7px;
  padding: 0 2px;
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--ink-dim);
}
.monatskopf:first-child { margin-top: 2px; }
.monatskopf span { font-variant-numeric: tabular-nums; }

.belegzeile {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  text-align: left;
}
.belegzeile:active { background: var(--flaeche-hoch); }
.belegzeile .bName { font-size: 15.5px; font-weight: 620; }
.belegzeile .bUnten {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.belegzeile .bBetrag {
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.belegzeile.pruefen { border-color: rgba(199, 106, 0, 0.45); }
.belegzeile.pruefen .bUnten { color: var(--warn); }
.belegzeile.wartet { opacity: 0.75; }

/* Auswahlkästchen im Arbeitsbereich */
.waehlen {
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 2px solid rgba(12, 38, 86, 0.22);
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  color: transparent;
  flex: none;
}
.waehlen.an { background: var(--ready); border-color: var(--ready); color: #fff; }

.leermeldung {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---------- Auswertung ---------- */

#zeitraumwahl {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-bottom: 14px;
  scrollbar-width: none;
}
#zeitraumwahl::-webkit-scrollbar { display: none; }
#zeitraumwahl button {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  color: var(--ink-dim);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
#zeitraumwahl button.an { background: var(--verlauf); border-color: transparent; color: #fff; }

.steuertabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.steuertabelle th {
  padding: 7px 6px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-dim);
  text-align: right;
  border-bottom: 1px solid var(--rand);
}
.steuertabelle th:first-child { text-align: left; }
.steuertabelle td {
  padding: 11px 6px;
  font-size: 15px;
  text-align: right;
  border-bottom: 1px solid var(--rand);
}
.steuertabelle td:first-child { text-align: left; font-weight: 620; }
.steuertabelle tr.gesamt td {
  border-bottom: 0;
  border-top: 2px solid var(--rand);
  font-weight: 700;
}
.steuertabelle .hervor { color: var(--ready); }

.verteilung { display: flex; flex-direction: column; gap: 8px; }
.verteilung .posten {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}
.verteilung .balken {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  background: var(--flaeche-hoch);
  overflow: hidden;
}
.verteilung .balken i { display: block; height: 100%; background: var(--verlauf); }
.verteilung .pName { font-size: 14px; }
.verteilung .pWert {
  font-size: 14px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

/* ---------- Kamera ---------- */

#tabScannen { position: relative; }
#buehne {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  /* Der Sucher ist die eine dunkle Fläche der App. Alles darüber erbt seine
     Schriftfarbe von hier — sonst stünde das Dunkelblau der App unlesbar
     auf dem Kamerabild. */
  color: #eaf3ff;
}
#cam {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* cover füllt die Fläche und schneidet den Überstand ab — genau so soll
     ein Sucher aussehen. Ohne object-position steht der Ausschnitt mittig,
     und das ist auch die Annahme, mit der bildLage() den Rahmen setzt. */
  object-fit: cover;
  object-position: center;
  background: #000;
}
#box {
  position: absolute;
  border: 2.5px solid var(--idle);
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28);
  transition: border-color 120ms linear;
  pointer-events: none;
}
#box.warn  { border-color: var(--warn); }
#box.ready {
  border-color: var(--cam-ok);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.12), 0 0 24px rgba(39,224,255,0.55);
}

#blitz { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#blitz.feuer { animation: blitzen 260ms ease-out; }
@keyframes blitzen { 0% { opacity: 0.85; } 100% { opacity: 0; } }

#statusleiste {
  position: absolute;
  top: 12px;
  left: max(14px, env(safe-area-inset-left, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(8, 16, 30, 0.66);
  backdrop-filter: blur(12px);
  font-size: 15px;
  font-weight: 500;
}
#statuspunkt {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--idle);
  transition: background-color 120ms linear;
}
#statusleiste.warn  #statuspunkt { background: var(--warn); }
#statusleiste.ready #statuspunkt { background: var(--cam-ok); animation: pulsen 900ms ease-in-out infinite; }
@keyframes pulsen { 50% { transform: scale(1.5); opacity: 0.6; } }

#bestaetigung {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(10, 12, 15, 0.55);
  backdrop-filter: blur(3px);
}
#haken {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--verlauf);
  color: #fff;
  font-size: 53px;
  font-weight: 700;
  line-height: 92px;
  text-align: center;
  animation: aufpoppen 320ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes aufpoppen { from { transform: scale(0.4); opacity: 0; } }
#hakenText { margin-top: 10px; font-size: 20px; font-weight: 600; }
#teilAnhaengen {
  margin-top: 24px;
  min-height: var(--touch);
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  font-size: 15.5px;
  font-weight: 600;
}

#messwerte {
  position: absolute;
  top: 62px;
  left: max(14px, env(safe-area-inset-left, 0px));
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(8, 16, 30, 0.72);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  color: rgba(234, 243, 255, 0.72);
  pointer-events: none;
}
#messwerte b { color: #fff; font-weight: 600; }
#messwerte .ja { color: var(--cam-ok); }
#messwerte .nein { color: var(--warn); }

#kamerasteuerung {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 10px;
  padding: 16px max(16px, env(safe-area-inset-left, 0px)) 18px;
  background: linear-gradient(to top, rgba(8,10,13,0.85), rgba(8,10,13,0));
}
#ausloeser {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  transition: transform 90ms ease-out;
}
#ausloeser:active { transform: scale(0.92); }
#ausloeserRing {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 3px solid rgba(13, 15, 18, 0.22);
}
#ausloeser.ready { background: var(--cam-ok); }
.seite {
  min-width: var(--touch);
  min-height: var(--touch);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: rgba(234, 243, 255, 0.72);
}
.seite .klein { font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; }
#wartendZahl {
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
#wartendZahl.hat { color: var(--cam-ok); }
.zahnrad { font-size: 18px; line-height: 21px; }
#messwerteBtn.an { color: var(--cam-ok); }

.kameraFehler {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px;
  text-align: center;
  background: var(--bg);
}
.kameraFehler p { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; }
.kameraFehler code {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  font-family: var(--mono);
  font-size: 13px;
}

/* ---------- Belegansicht ---------- */

.ansichtKopf {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px)
           max(16px, env(safe-area-inset-right, 0px)) 10px
           max(16px, env(safe-area-inset-left, 0px));
}
#belegZurueck { min-height: 44px; font-size: 16px; font-weight: 600; color: var(--ready); }
#belegPos { font-size: 13.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

#belegBuehne {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#belegBild { width: 100%; max-height: 56vh; object-fit: contain; display: block; background: #000; }

#belegDaten {
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) 24px
           max(16px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
}
#belegDaten h3 { margin: 6px 0 -4px; }

#befunde { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
#befunde li { padding: 10px 12px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.45; }
#befunde li.fehler  { background: var(--rot-weich); color: var(--rot); }
#befunde li.hinweis { background: var(--flaeche-hoch); color: var(--ink-dim); }

.steuerzeile {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 34px;
  gap: 8px;
  align-items: end;
}
.steuerzeile .weg { min-height: 48px; border-radius: 11px; color: var(--ink-dim); font-size: 17px; }
.steuerzeile .weg:active { background: var(--rot-weich); color: var(--rot); }

#rechenprobe {
  padding: 11px 13px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
#rechenprobe.geht   { background: var(--ready-weich); color: var(--ready); }
#rechenprobe.klemmt { background: var(--warn-weich); color: var(--warn); }

.ansichtFuss {
  flex: none;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 10px;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 10px
           max(16px, env(safe-area-inset-left, 0px));
}
.ansichtFuss button:not(#belegTeilen) {
  min-height: var(--touch);
  border-radius: 11px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  font-size: 21px;
  line-height: 1;
}
.ansichtFuss button:disabled { opacity: 0.25; }
#belegTeilen {
  min-height: var(--touch);
  border-radius: 999px;
  background: var(--verlauf);
  color: #fff;
  font-size: 16px;
  font-weight: 650;
  box-shadow: var(--glanz);
}
#uebernehmenLeiste {
  flex: none;
  display: flex;
  padding: 0 max(16px, env(safe-area-inset-right, 0px))
           calc(env(safe-area-inset-bottom, 0px) + 14px)
           max(16px, env(safe-area-inset-left, 0px));
}
#uebernehmenLeiste button { flex: 1; }

/* ---------- Blatt von unten ---------- */

#schleier {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  animation: einblenden 160ms ease-out;
}
@keyframes einblenden { from { opacity: 0; } }
.blatt {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--flaeche);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--rand);
  animation: hochschieben 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes hochschieben { from { transform: translateY(100%); } }
.blattInhalt {
  padding: 22px max(18px, env(safe-area-inset-right, 0px))
           calc(env(safe-area-inset-bottom, 0px) + 20px)
           max(18px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 11px;
}
#kontoFirmen { display: flex; flex-direction: column; gap: 7px; margin: 6px 0; }
#kontoFirmen .fz {
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--flaeche-hoch);
  font-size: 14.5px;
}
#kontoFirmen .fz.an { background: var(--ready-weich); color: var(--ready); font-weight: 620; }


/* ---------- Belli, der Begleiter ---------- */
/*
  Die Zustände werden über [data-zustand] am Wrapper geschaltet, damit ein
  Wechsel nichts neu aufbaut. Alles läuft in der Kompositions-Ebene
  (transform/opacity) — das Scannen braucht die Rechenzeit für die
  Bildanalyse, nicht für Verzierung.
*/
.bot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: none;
}
.botBild { display: block; overflow: visible; }
.bot-gross .botBild  { width: 108px; }
.bot-mittel .botBild { width: 74px; }
.bot-klein .botBild  { width: 42px; }

.botAugen, .botFroh, .botFlach, .botSchatten, .botKopf, .botAntenne {
  transform-box: fill-box;
  transform-origin: center;
}
.botFroh, .botFlach, .botStreifen { opacity: 0; }

/* Ruhe: schweben, atmen, gelegentlich blinken. */
.botKopf, .botAntenne { animation: botSchweben 3.8s ease-in-out infinite; }
@keyframes botSchweben { 50% { transform: translateY(-3px); } }
.botSchatten { animation: botAtmen 3.8s ease-in-out infinite; }
@keyframes botAtmen { 50% { transform: scaleX(0.88); opacity: 0.65; } }
.botLampe { animation: botLampe 2.6s ease-in-out infinite; }
@keyframes botLampe { 50% { opacity: 0.4; } }

[data-zustand="ruhig"] .botAugen { animation: botBlinken 5.4s infinite; }
@keyframes botBlinken {
  0%, 93%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.12); }
}

/* Suchen: der Blick wandert, ein Streifen läuft durchs Visier. */
[data-zustand="suchen"] .botAugen { animation: botSuchen 2s ease-in-out infinite; }
@keyframes botSuchen {
  0%, 100% { transform: translateX(-2.5px); }
  50%      { transform: translateX(2.5px); }
}
[data-zustand="suchen"] .botStreifen {
  opacity: 1;
  animation: botStreifen 1.5s linear infinite;
}
@keyframes botStreifen { from { transform: translateX(0); } to { transform: translateX(29px); } }

/* Lesen: zeilenweise, mit Rücksprung — wie echtes Lesen. */
[data-zustand="lesen"] .botAugen { animation: botLesen 1.5s steps(24, end) infinite; }
@keyframes botLesen {
  0%        { transform: translate(-3px, -1.5px); }
  42%       { transform: translate(3px, -1.5px); }
  44%       { transform: translate(-3px, 1.5px); }
  86%       { transform: translate(3px, 1.5px); }
  88%, 100% { transform: translate(-3px, -1.5px); }
}
[data-zustand="lesen"] .botKopf {
  animation: botSchweben 3.8s ease-in-out infinite,
             botDenken 1.5s ease-in-out infinite;
}
@keyframes botDenken { 50% { filter: drop-shadow(0 0 9px rgba(39, 224, 255, 0.65)); } }

/* Erfolg und Fehler sind kurz: sie fallen von selbst auf Ruhe zurück. */
[data-zustand="erfolg"] .botAugen { opacity: 0; }
[data-zustand="erfolg"] .botFroh  { opacity: 1; }
[data-zustand="erfolg"] .botKopf  { animation: botHuepfer 620ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes botHuepfer {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-8px); }
  60%  { transform: translateY(0); }
  78%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
[data-zustand="fehler"] .botAugen { opacity: 0; }
[data-zustand="fehler"] .botFlach { opacity: 1; }
[data-zustand="fehler"] .botKopf  { animation: botKopfschuetteln 520ms ease-in-out; }
@keyframes botKopfschuetteln {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.botBlase {
  margin: 0;
  max-width: 17rem;
  padding: 9px 14px;
  border-radius: 14px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  box-shadow: var(--glanz);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-dim);
  text-align: center;
  animation: botBlaseAuf 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes botBlaseAuf {
  from { opacity: 0; transform: translateY(-5px) scale(0.96); }
}

/* Belli im Sucher: klein, oben links, über dem Kamerabild. */
#botSucher {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  right: 14px;
  z-index: 3;
  pointer-events: none;
}
#botSucher .botBlase {
  background: rgba(10, 18, 32, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e8f3ff;
  backdrop-filter: blur(8px);
  box-shadow: none;
  font-size: 12px;
  max-width: 11rem;
}

/* ---------- Startseite: Begrüßung mit Belli ---------- */
.botKarte {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 17px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  background:
    radial-gradient(22rem 12rem at 108% -30%, rgba(0, 194, 240, 0.14), transparent 70%),
    var(--flaeche);
  box-shadow: 0 2px 16px rgba(12, 38, 86, 0.06);
}
.botKarte .bot { width: 74px; }
.botKarteText { min-width: 0; }
.botKarteText h2 { font-size: 21px; }
.botSpruch {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-dim);
}

/* ---------- Anmelden und Registrieren ---------- */
#anmeldeWechsel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--flaeche-hoch);
  margin-top: 4px;
}
#anmeldeWechsel button {
  min-height: 40px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 620;
  color: var(--ink-dim);
  transition: background 160ms, color 160ms, box-shadow 160ms;
}
#anmeldeWechsel button.an {
  background: var(--flaeche);
  color: var(--ready);
  box-shadow: 0 2px 10px rgba(12, 38, 86, 0.10);
}
#registrierform { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
#registrierform .haupt { margin-top: 6px; }

/* ---------- Zugang wartet auf Freigabe ---------- */
#wartet .mitte { gap: 18px; text-align: center; align-items: center; }
#wartet .wartenKarte {
  width: 100%;
  padding: 18px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  box-shadow: var(--glanz);
}
#wartet .wartenKarte h2 { margin-bottom: 7px; }

/* ---------- Zugänge freigeben ---------- */
#zugaengeBlatt .blattInhalt { max-height: 82vh; overflow-y: auto; }
.zugang {
  padding: 13px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.zugang.neu {
  border-color: rgba(15, 111, 255, 0.35);
  background: var(--verlauf-weich);
}
.zugangKopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.zugangName { font-size: 15.5px; font-weight: 650; }
.zugangMail { font-size: 12.5px; color: var(--ink-dim); word-break: break-all; }
.zugangRolle {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--flaeche-hoch);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-dim);
}
.zugang.neu .zugangRolle { background: var(--ready); color: #fff; }
.firmenhaken { display: flex; flex-wrap: wrap; gap: 7px; }
.firmenhaken label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: 14px;
  font-weight: 600;
}
.firmenhaken input { width: 18px; height: 18px; accent-color: var(--ready); }
.firmenhaken label:has(input:checked) {
  border-color: rgba(15, 111, 255, 0.45);
  background: var(--ready-weich);
  color: var(--ready);
}
.zugangKnoepfe { display: flex; gap: 8px; }
.zugangKnoepfe button { flex: 1; min-height: 44px; border-radius: 999px; font-size: 14.5px; font-weight: 620; }
.zugangKnoepfe .ja { background: var(--verlauf); color: #fff; box-shadow: var(--glanz); }
.zugangKnoepfe .nein { background: var(--flaeche-hoch); color: var(--rot); }

.lesebot {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid rgba(15, 111, 255, 0.3);
  border-radius: var(--radius-gross);
  background: var(--verlauf-weich);
  animation: auftauchen 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.lesebot .botBlase {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  text-align: left;
  color: var(--ink);
  animation: none;
}

/* ---------- Futuristische Kleinigkeiten ---------- */
/* Die große Kachel trägt jetzt den Verlauf, also muss ihr Text hell sein. */
.kachel.gross .kachelTitel, .kachel.gross .kachelText, .kachel.gross .kachelIcon {
  color: #fff;
}
.kachel.gross .kachelText { opacity: 0.88; }
.kachel {
  transition: transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 160ms;
}
.kachel:active { transform: scale(0.982); }
.kachel.gross:active { transform: scale(0.985); box-shadow: var(--glanz-hoch); }

/* Der aktive Tab bekommt einen leuchtenden Balken statt nur Farbe. */
#tableiste button.an::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--verlauf);
  box-shadow: 0 0 10px rgba(15, 111, 255, 0.6);
}

/* Inhalte steigen beim Tabwechsel kurz auf — ein einziger, kurzer Griff.
   Gestaffelt wird nur über die ersten Kinder, damit lange Listen nicht
   nachrucken. */
.tab:not([hidden]) > .inhalt > * { animation: auftauchen 300ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.tab:not([hidden]) > .inhalt > *:nth-child(2) { animation-delay: 40ms; }
.tab:not([hidden]) > .inhalt > *:nth-child(3) { animation-delay: 80ms; }
.tab:not([hidden]) > .inhalt > *:nth-child(n+4) { animation-delay: 110ms; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(7px); } }

/* Zahlen in den Kacheln zählen nicht hoch, aber sie kommen mit Nachdruck. */
.kachelZahl { animation: zahlRein 420ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes zahlRein { from { opacity: 0; transform: scale(0.8); } }

/* Auf schmalen Geräten stehen zwei Knöpfe nebeneinander zu eng und brechen
   mitten im Wort um — dann lieber untereinander. */
@media (max-width: 420px) {
  .knopfreihe > button { flex-basis: 100%; }
}

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