/* ==========================================================================
   BAUWAGEN Kasse — screens.css
   Aufbau des Geräts und der vier Screens. Nur Anordnung, keine neuen
   Bausteine — die stehen in components.css.

   Zustände am Wurzelelement .geraet, alle von app.js gesetzt:
     data-modus = "start" | "inbetriebnahme" | "kasse"
     data-tab   = "zapfen" | "deckel" | "buch" | "wagen"
     data-ziel  = "ich" | "fremd"        (Buchungsziel, §7.3)
     data-admin = "aus" | "an"           (Schlüssel, §8.5)
   ========================================================================== */

/* ==========================================================================
   1. Das Gerät — vier Bänder übereinander (§7.2)
   Statusleiste · Bühne · Storno-Leiste · Tab-Leiste
   ========================================================================== */
.geraet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100%;
  background: var(--bg);
}

.buehne {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s32);
  background: var(--bg);
}

/* Registerwechsel: Inhalt hart getauscht, danach opacity .6 -> 1 (§9).
   Kein Slide.                                                              */
.screen:not([hidden]) {
  animation: register-ein var(--t-register) var(--e-linear) both;
}

@keyframes register-ein {
  from { opacity: .6; }
  to   { opacity: 1; }
}

.abschnitt {
  background: var(--bg);
}

/* ==========================================================================
   2. Zustände des Geräts
   ========================================================================== */

/* Buchungsziel ist jemand anderes: Signal-Oberkante über allen Zapftasten. */
.geraet[data-ziel="fremd"] .taste--zapf::before { display: block; }

/* „zurück zu mir" steht nur, solange der Zustand gilt (§7.3, kein Timer). */
.geraet:not([data-ziel="fremd"]) .plaettchen--zurueck { display: none; }

/* Erststart (§10): keine Register, keine Storno-Leiste. */
.geraet[data-modus="start"] .tableiste,
.geraet[data-modus="start"] .stornoleiste,
.geraet[data-modus="inbetriebnahme"] .tableiste,
.geraet[data-modus="inbetriebnahme"] .stornoleiste {
  display: none;
}

/* Der Schlüssel zeigt sich nur, wenn er steckt. */
.geraet:not([data-admin="an"]) .schluesselmarke { display: none; }

/* ==========================================================================
   3. Zapfen — der Hauptbildschirm (§7.2)
   Reihenfolge: Zählwerk · Namensschiene · Zapftasten · Runde
   ========================================================================== */
.platte--zapf {
  /* Grundton, damit die eingesunkene Taste oben eine echte Fuge zeigt. */
  background: var(--bg);
}

.zeile--runde {
  border-bottom: var(--kante) solid var(--rule-hard);
}

/* Inbetriebnahme liegt über dem Zapfen-Screen (§10.2). */
.inbetriebnahme {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
}

.inbetriebnahme__frage {
  padding: var(--s24) max(var(--zeile-x), env(safe-area-inset-right))
           var(--s16) max(var(--zeile-x), env(safe-area-inset-left));
  font-family: var(--font-text);
  font-size: var(--fs-gross);
  font-weight: 700;
  line-height: var(--lh-eng);
}

/* ==========================================================================
   4. Deckel (§7.5)
   Durchgehende Platte, darunter die Abrechnungen als eigener Abschnitt.
   ========================================================================== */
.zeile--person {
  padding-left: calc(var(--kantenstreifen) + var(--s12));
}

.zeile--abrechnung .zeile__betrag { color: var(--gruen); }

/* ==========================================================================
   5. Buch — das Kassenbuch (§7.7)
   13px-Zeilen mit linkem Typbalken, Tagestrenner als Schild.
   ========================================================================== */
.zeile--buch {
  align-items: flex-start;
  gap: var(--s12);
  min-height: 44px;
  padding-top: var(--s8);
  padding-bottom: var(--s8);
  padding-left: calc(var(--kantenstreifen) + var(--s12));
}

.zeile--buch .zeile__zeit {
  font-family: var(--font-num);
  font-size: var(--fs-meta);
  line-height: var(--lh-eng);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* §1.7 bleibt auch im Kassenbuch gültig: Text in Atkinson, Zahlen in Mono.
   Die 13px aus §7.7 gelten für die ganze Zeile.                            */
.zeile--buch .zeile__text {
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  line-height: var(--lh-text);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.zeile--buch .zeile__betrag {
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

.zeile--buch[data-typ="storno"] .zeile__betrag  { color: var(--rot); }
.zeile--buch[data-typ="bezahlt"] .zeile__betrag { color: var(--gruen); }

/* ==========================================================================
   6. Wagen — Einstellungen (§7.8)
   ========================================================================== */
.wagen__gruppe {
  padding-bottom: var(--s16);
}

.zeile--diagnose {
  border-bottom: 0;
}

.wagen__taste {
  margin: var(--s12) max(var(--zeile-x), env(safe-area-inset-right))
          0 max(var(--zeile-x), env(safe-area-inset-left));
  width: auto;
}

/* ==========================================================================
   7. Sheets — Inhalte (§7.6, §8.6, §8.7, §8.8)
   Die Hülle steht in components.css; hier nur, was in ihr liegt.
   ========================================================================== */
.sheet__kopfwerk {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s12);
  padding: var(--s16) max(var(--zeile-x), env(safe-area-inset-right))
           var(--s12) max(var(--zeile-x), env(safe-area-inset-left));
  border-bottom: var(--kante-fein) solid var(--rule);
  background: var(--bg);
}

/* Person-Sheet: Striche, neueste zuerst. Abgerechnete bleiben stehen (§7.6). */
.zeile--strich {
  padding-left: calc(var(--kantenstreifen) + var(--s12));
}

.zeile--strich[data-abgerechnet="ja"] {
  color: var(--ink-muted);
}
.zeile--strich[data-abgerechnet="ja"] .zeile__name,
.zeile--strich[data-abgerechnet="ja"] .zeile__betrag {
  color: var(--ink-muted);
}

/* PIN-Sheet */
.sheet--pin .sheet__koerper {
  padding-top: var(--s8);
}

/* ==========================================================================
   8. Erster Start ohne Raum (§10.1)
   Eine Platte. Kein zentrierter Hero, keine Erklärabsätze.
   ========================================================================== */
.screen--start {
  padding-top: var(--s16);
}

.start__titel {
  padding: 0 max(var(--zeile-x), env(safe-area-inset-right))
           var(--s16) max(var(--zeile-x), env(safe-area-inset-left));
  font-family: var(--font-text);
  font-size: var(--fs-gross);
  font-weight: 700;
  line-height: var(--lh-eng);
}

.start__taste {
  margin: var(--s16) max(var(--zeile-x), env(safe-area-inset-right))
          0 max(var(--zeile-x), env(safe-area-inset-left));
  width: auto;
}