/*
 * samoGold — Oberfläche.
 *
 * GESTALTUNG: Das Erscheinungsbild des Kunden, nicht unseres. Farben und
 * Anmutung stammen aus dem Goldhaus-Auftritt (warmes Off-White, Champagner-
 * Gold, Tannengrün). Schrift durchgehend Arial — auf jedem Gerät vorhanden,
 * es wird nichts nachgeladen: kein Google, keine Wartezeit beim Start, keine
 * Datenschutzfrage.
 *
 * AUFBAU: wie ein aufgeschlagenes Kassenbuch. Eine Zeile je Stück, die Summe
 * wächst unten mit. Wer bisher mit Block und Stift gerechnet hat, findet sich
 * sofort zurecht — und der Bildschirm lässt sich dem Kunden zudrehen.
 *
 * DIE IOS-SAFARI-FALLEN, DIE HIER UMGANGEN WERDEN:
 * 1. Felder unter 16px lassen Safari beim Antippen HINEINZOOMEN, die Seite
 *    bleibt danach verschoben. Alle Felder haben mindestens 16px.
 * 2. 100vh rechnet die Adressleiste mit — 100dvh mit vh als Rückfall.
 * 3. Notch und Home-Balken: env(safe-area-inset-*).
 * 4. Antippbares mindestens 44x44pt (Apples eigene Richtlinie).
 * 5. touch-action: manipulation gegen den Doppeltipp-Zoom.
 */

:root {
  --bg: #F7F4EE;            /* warmes Off-White */
  --flaeche: #FBFAF6;
  --flaeche-2: #F2EEE4;     /* Sandton */
  --text: #1C1A16;
  --muted: #6E685C;
  --rand: #E3DCCD;
  --rand-weich: #ECE6D8;
  --gold: #C2A15C;          /* Champagner-Gold */
  --gold-hell: #E6D5AC;
  --gold-dunkel: #8A6C31;   /* lesbares Gold für Text */
  --trust: #1F3A34;         /* Tannengrün */
  --trust-weich: #E9EFEC;
  --warn: #8C2F1E;
  --warn-weich: #FBF0EC;
  --radius: 6px;
  --schrift: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--schrift);
  font-size: 16px; line-height: 1.5;
  color: var(--text); background: var(--bg);
  overscroll-behavior-y: none;
}
body { min-height: 100vh; min-height: 100dvh; }

/* ── Kopfleiste ─────────────────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: #14120F; color: #F7F4EE;
  padding: calc(env(safe-area-inset-top) + 11px) 16px 11px;
  display: flex; align-items: center; gap: 12px;
}
.kopf .marke { font-size: 18px; font-weight: bold; letter-spacing: 0.01em; }
.kopf .marke span { color: var(--gold); }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.kopf .wer { font-size: 13px; color: rgba(247,244,238,0.6); }

/* ── Reiter: auf dem Telefon unten (Daumen), auf dem Tablet oben ───────── */
.reiter {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  /* Fünf Spalten für fünf Reiter. Stand hier vier, rutschte die Auswertung in
     eine zweite Zeile und verdeckte die Fußleiste mit der Summe. */
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--flaeche); border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom);
}
.reiter button {
  appearance: none; border: 0; background: none;
  padding: 10px 4px 8px; min-height: 56px;
  font: inherit; font-size: 11px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  touch-action: manipulation; cursor: pointer;
}
.reiter button svg { width: 21px; height: 21px; stroke-width: 1.7; }
.reiter button[aria-selected="true"] { color: var(--gold-dunkel); font-weight: bold; }

main {
  padding: 14px 16px calc(74px + env(safe-area-inset-bottom));
  max-width: 860px; margin: 0 auto;
}
@media (min-width: 820px) {
  .reiter {
    position: sticky; top: 0; bottom: auto;
    grid-template-columns: repeat(5, auto); justify-content: start;
    gap: 2px; padding: 5px 12px; border-top: 0; border-bottom: 1px solid var(--rand);
  }
  .reiter button {
    flex-direction: row; font-size: 14px; padding: 9px 15px;
    min-height: 44px; border-radius: 5px;
  }
  .reiter button[aria-selected="true"] { background: var(--flaeche-2); }
  main { padding: 18px 20px 40px; }
}

/* ── Kundenband: der Kopf des Vorgangs ─────────────────────────────────── */
.kundenband {
  background: var(--flaeche-2); border-left: 3px solid var(--gold);
  padding: 12px 14px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px; min-height: 60px;
}
.kundenband .name { font-size: 17px; font-weight: bold; }
.kundenband .meta { font-size: 13px; color: var(--muted); margin-top: 1px; }
.kundenband .zeichen { margin-left: auto; font-size: 13px; font-weight: bold; color: var(--trust); text-align: right; }
.kundenband .zeichen.fehlt { color: var(--warn); }
.kundenband.leer { border-left-color: var(--rand); color: var(--muted); }

/* ── Das Kassenbuch ────────────────────────────────────────────────────── */
.buch { margin-bottom: 14px; }
.buchkopf {
  display: grid; grid-template-columns: 22px 1fr 76px 92px; gap: 10px;
  padding-bottom: 6px; border-bottom: 2px solid var(--text);
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.buchkopf .r { text-align: right; }
.buchzeile {
  display: grid; grid-template-columns: 22px 1fr 76px 92px; gap: 10px;
  align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rand-weich);
  min-height: 60px;
}
.buchzeile .idx { font-size: 17px; font-weight: bold; color: var(--gold-dunkel); }
.buchzeile .bez { font-size: 16px; font-weight: bold; }
.buchzeile .unter { font-size: 13px; color: var(--muted); margin-top: 1px; }
.buchzeile .fein { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.buchzeile .betrag { font-size: 18px; font-weight: bold; text-align: right; font-variant-numeric: tabular-nums; }
.buchzeile.offen { background: var(--flaeche); }

/* Zeile im Bearbeiten-Zustand: die Felder erscheinen unter der Kopfzeile. */
.zeilenfelder { grid-column: 1 / -1; display: grid; gap: 9px; padding: 4px 0 8px; }
@media (min-width: 560px) {
  .zeilenfelder.drei { grid-template-columns: 1fr 1fr 1fr; }
  .zeilenfelder.zwei { grid-template-columns: 1fr 1fr; }
}

/* ── Unterreiter ────────────────────────────────────────────────────────────
 * Zweite Ebene innerhalb eines Reiters. Bewusst KEIN sechster Hauptreiter:
 * Unten passen fünf nebeneinander, ab dem sechsten wird jeder schmaler als
 * ein Daumen. Was zusammengehört (Schmelze, Artikel, Abgänge, Preise sind
 * alle „Bestand"), steht deshalb eine Ebene tiefer und bleibt beieinander.
 */
.unterreiter {
  display: flex; gap: 4px; margin: 0 0 14px;
  padding: 3px; border-radius: var(--radius);
  background: var(--flaeche-2); border: 1px solid var(--rand-weich);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.unterreiter button {
  flex: 1 1 auto; min-height: 40px; padding: 8px 12px; white-space: nowrap;
  appearance: none; border: 0; border-radius: 4px; background: transparent;
  font: inherit; font-size: 15px; color: var(--muted);
  touch-action: manipulation; cursor: pointer;
}
.unterreiter button[aria-pressed="true"] {
  background: var(--flaeche); color: var(--text); font-weight: bold;
  box-shadow: 0 1px 2px rgba(28, 26, 22, 0.10);
}

/* ── Zeile mit Knöpfen am Ende (Artikel, Abgänge, Abschlüsse) ─────────── */
.liste li .taten { display: flex; gap: 6px; flex-shrink: 0; }
.liste li .taten button { min-height: 40px; }

/* Auf dem Telefon rutschen die Knöpfe in eine zweite Zeile. Nebeneinander
   bleiben für den Titel keine 150 px übrig — „S-2026-00004 · Silberarmband
   925, Königskette" stünde dann mit einem Wort je Zeile da. */
@media (max-width: 560px) {
  .liste li { flex-wrap: wrap; }
  .liste li .taten { flex-basis: 100%; justify-content: flex-end; }
}

/* Zahlenblock nebeneinander, z. B. im Abschluss */
.werte { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 8px; }
.werte .b { color: var(--muted); }
.werte .z { text-align: right; font-variant-numeric: tabular-nums; }
.werte .stark { font-weight: bold; border-top: 1px solid var(--rand); padding-top: 6px; }
.werte .stark + .stark { border-top: 0; padding-top: 0; }

/* ── Dialog ────────────────────────────────────────────────────────────────
 * Von unten hereinfahrend statt mittig: Auf dem Telefon ist der untere
 * Bildschirmrand mit dem Daumen erreichbar, die Mitte nicht.
 */
.dialog {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 18, 15, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 560px) { .dialog { align-items: center; } }
.dialogkasten {
  width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 16px);
}
@media (min-width: 560px) { .dialogkasten { border-radius: var(--radius); } }
.dialogkasten h2 { margin: 0 0 4px; font-size: 18px; }
.dialogkasten .d-erklaerung:empty { display: none; }
/* Der Erklärtext im Dialog trägt beim Kassieren mehrere Zeilen (Steuerart,
   Rohertrag, Rechnungshinweis). Ohne pre-line liefe das zu einem Block
   zusammen, in dem niemand die Umsatzsteuer findet. */
#dialogText { white-space: pre-line; }
.dialogtaten { display: flex; gap: 8px; margin-top: 16px; }
.dialogtaten .tat { flex: 1; }
.tat.leise { background: transparent; color: var(--text); border: 1px solid var(--rand); }

/* Vorschaubild eines Artikels */
.bildchen {
  width: 46px; height: 46px; flex-shrink: 0; margin-right: 10px;
  border-radius: 4px; object-fit: cover; background: var(--flaeche-2);
  border: 1px solid var(--rand-weich);
}

.zufuegen {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 0; min-height: 56px; width: 100%;
  appearance: none; border: 0; background: none; font: inherit;
  font-size: 16px; font-weight: bold; color: var(--gold-dunkel);
  touch-action: manipulation; cursor: pointer; text-align: left;
}
.zufuegen span.kreuz { font-size: 21px; line-height: 1; }

/* ── Fußleiste mit der Summe ───────────────────────────────────────────── */
.abschluss { border-top: 2px solid var(--text); padding-top: 12px; margin-top: 4px; }
.abschluss .zeile { display: flex; align-items: flex-end; gap: 12px; }
.abschluss .l { font-size: 14px; color: var(--muted); }
.abschluss .fein { font-size: 13px; color: var(--muted); margin-top: 2px; }
.abschluss .summe {
  margin-left: auto; font-size: 34px; font-weight: bold; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}

/* ── Felder ────────────────────────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: bold; color: var(--muted); margin: 0 0 4px; }
input, select, textarea {
  width: 100%;
  font-size: 16px;              /* darunter zoomt iOS hinein */
  font-family: inherit;
  padding: 12px; min-height: 48px;
  border: 1px solid var(--rand); border-radius: 5px;
  background: #fff; color: var(--text); appearance: none;
}
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold); }
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E685C' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
}
input.zahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: bold; }

/* ── Schaltflächen ─────────────────────────────────────────────────────── */
button.tat {
  appearance: none; width: 100%; min-height: 54px;
  font: inherit; font-size: 17px; font-weight: bold;
  border: 0; border-radius: 5px;
  background: var(--gold); color: #1C1A16;
  padding: 15px 16px; touch-action: manipulation; cursor: pointer;
}
button.tat:active { transform: scale(0.99); }
button.tat[disabled] { background: var(--flaeche-2); color: #A9A296; }
button.tat.dunkel { background: var(--trust); color: #F7F4EE; }
button.tat.leise { background: transparent; color: var(--trust); border: 1px solid var(--rand); }
button.klein {
  appearance: none; font: inherit; font-size: 14px; font-weight: bold;
  min-height: 44px; padding: 10px 14px; border-radius: 5px;
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text);
  touch-action: manipulation; cursor: pointer;
}
/* Ein Herunterladen ist ein Verweis, kein Knopf — der Browser muss die Datei
   selbst holen. Aussehen soll er trotzdem wie einer. */
a.klein {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 14px; font-weight: bold;
  min-height: 44px; padding: 10px 14px; border-radius: 5px;
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text);
  text-decoration: none; touch-action: manipulation;
}

/* ── Hinweise ──────────────────────────────────────────────────────────── */
.hinweis { padding: 12px 14px; font-size: 14px; line-height: 1.5; margin-bottom: 12px; border-left: 3px solid; }
.hinweis.warn { background: var(--warn-weich); border-color: var(--warn); color: #7A3527; }
.hinweis.gut { background: var(--trust-weich); border-color: var(--trust); color: #15302A; }
.hinweis.info { background: var(--flaeche-2); border-color: var(--gold); color: #5A4A26; }
.hinweis strong { display: block; margin-bottom: 3px; font-size: 15px; }
.hinweis button.klein { width: 100%; margin-top: 9px; background: #fff; }

/* ── Listen (Kunden, Vorgänge, Bestand) ────────────────────────────────── */
.karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
}
/* overflow:hidden schließt den gefloateten Zusatz in die Überschrift ein.
   Ohne das ragt er bei langen Titeln auf schmalen Geräten nach unten heraus,
   und der Erklärtext der Karte fließt um ihn herum. */
.karte h2 { margin: 0 0 10px; font-size: 16px; font-weight: bold; overflow: hidden; }
.karte h2 .zusatz { float: right; font-weight: normal; font-size: 13px; color: var(--muted); margin-left: 10px; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; min-height: 60px; border-bottom: 1px solid var(--rand-weich);
  touch-action: manipulation;
}
.liste li:last-child { border-bottom: 0; }
.liste .haupt { flex: 1; min-width: 0; }
.liste .haupt .titel { font-weight: bold; font-size: 16px; }
.liste .haupt .unter { font-size: 13px; color: var(--muted); }
.liste .wert { font-weight: bold; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Meldung ───────────────────────────────────────────────────────────── */
.meldung {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 50;
  background: #14120F; color: #F7F4EE;
  padding: 14px 16px; border-radius: 5px; font-size: 15px;
  box-shadow: 0 8px 24px rgba(28,26,22,0.3);
  transform: translateY(150%); transition: transform 0.22s ease, visibility 0s linear 0.22s;
  /* 150 % sind 150 % der EIGENEN Höhe — bei bottom:74px schiebt das den Kasten
     nicht aus dem Bild, sondern genau auf die Reiterleiste. Sichtbar war das
     als schwarzer Balken über den Reitern; schlimmer war, dass er mit z-index 50
     dort die Fingertipps abfing, die den Reitern galten. */
  visibility: hidden; pointer-events: none;
}
.meldung.zeigen {
  transform: translateY(0); visibility: visible;
  transition: transform 0.22s ease, visibility 0s;
}
.meldung.warn { background: var(--warn); }
.meldung.gut { background: var(--trust); }
@media (min-width: 820px) { .meldung { left: auto; right: 20px; max-width: 420px; bottom: 20px; } }

/* ── Anmeldung ─────────────────────────────────────────────────────────── */
.anmeldung {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 24px; background: #14120F;
}
.anmeldung .kasten { width: 100%; max-width: 380px; background: var(--bg); border-radius: 8px; padding: 26px; }
.anmeldung .marke { font-size: 26px; font-weight: bold; margin-bottom: 3px; }
.anmeldung .marke span { color: var(--gold-dunkel); }
.anmeldung .unter { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.anmeldung label { margin-top: 14px; }
.anmeldung button.tat { margin-top: 20px; }
.anmeldung .fehler { color: var(--warn); font-size: 14px; margin-top: 12px; font-weight: bold; }
input.code {
  text-align: center; font-size: 28px; letter-spacing: 9px; font-weight: bold;
  font-variant-numeric: tabular-nums; padding: 14px; min-height: 62px;
}

/* ── Auswertung ────────────────────────────────────────────────────────── */
.zeitwahl { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.zeitwahl button { flex: none; }
.zeitwahl button[aria-pressed="true"] {
  background: var(--trust); color: #F7F4EE; border-color: var(--trust);
}

.kennzahlen {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px;
}
@media (min-width: 620px) { .kennzahlen { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .kennzahlen { grid-template-columns: repeat(6, 1fr); } }
.kennzahl {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 12px;
}
.kennzahl .k-name { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kennzahl .k-wert { font-size: 21px; font-weight: bold; margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.kennzahl .k-zusatz { font-size: 12px; color: var(--muted); min-height: 16px; }
.delta { font-weight: bold; }
.delta.auf { color: var(--trust); }
.delta.ab { color: var(--warn); }

.karte.diagramm { padding: 16px 14px 12px; }
.d-erklaerung { margin: -6px 0 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.d-flaeche { width: 100%; min-height: 40px; }

/* Legende unter dem Diagramm — außerhalb der Zeichenfläche, damit sie keine
   Datenpunkte verdeckt. */
.legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; padding-left: 62px; }
@media (max-width: 560px) { .legende { padding-left: 0; } }
.legende-eintrag { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.legende-eintrag i { width: 14px; height: 3px; border-radius: 1px; display: block; }

/* Anteile als Längen statt als Tortenstücke — Längen lassen sich vergleichen. */
.anteile { display: grid; gap: 12px; }
.anteil-kopf { display: flex; justify-content: space-between; align-items: baseline;
               font-size: 14px; margin-bottom: 5px; }
.anteil-kopf span:first-child { font-weight: bold; }
.anteil-wert { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.anteil-schiene { height: 10px; background: var(--flaeche-2); border: 1px solid var(--rand); overflow: hidden; }
.anteil-fuellung { height: 100%; }

.leer { text-align: center; color: var(--muted); padding: 30px 16px; font-size: 15px; }
.laedt { text-align: center; color: var(--muted); padding: 24px; font-size: 14px; }
.versteckt { display: none !important; }

/* ── Knöpfe in der Kopfleiste ──────────────────────────────────────────────
 * Auf dunklem Grund: durchsichtig mit hellem Rand. Das Zahnrad ist quadratisch,
 * damit es neben „Abmelden" nicht wie ein zweiter Textknopf aussieht.
 */
.kopf .kopfknopf {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.25);
}
.kopf .kopfknopf svg { display: block; }
#knopfEinstellungen { padding: 10px; min-width: 44px; }

/* Statuszeile: Ampel links, Sache in der Mitte, Wert rechts. */
.status-zeile {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid var(--rand-weich);
}
.status-zeile:last-child { border-bottom: 0; }
.status-zeile .ampel {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 6px;
}
.status-zeile .ampel.gut { background: var(--trust); }
.status-zeile .ampel.warn { background: var(--warn); }
.status-zeile .ampel.egal { background: var(--rand); }
.status-zeile .sache { flex: 1; min-width: 0; }
.status-zeile .sache .titel { font-weight: bold; font-size: 15px; }
.status-zeile .sache .unter { font-size: 13px; color: var(--muted); }