/* Vereinskasse — Oberfläche für Tablet und Rechner.
   Bedienziele mindestens 44 px, damit sie auch mit klammen Fingern
   getroffen werden. Keine Inline-Styles: die Sicherheitsregeln der Seite
   verbieten sie (siehe web/security_headers.py). */

:root {
  --blau: #1f6aa5;
  --blau-dunkel: #17527f;
  --gruen: #1a7f37;
  --gruen-dunkel: #145f28;
  --rot: #c0392b;
  --rot-dunkel: #96271a;
  --gelb: #b9770e;
  --grund: #eef1f4;
  --karte: #ffffff;
  --rand: #d6dde4;
  --text: #1a1d21;
  --text-leise: #6a7480;
  --radius: 10px;
  --schatten: 0 1px 3px rgba(0, 0, 0, .12);

  /* Fluide Maße für den Verkaufsbildschirm.
     Feste Pixelwerte gingen auf dem iPad auf, zwangen auf Android-Tablets aber
     zum Scrollen: Die entscheidende Größe ist nicht die Bildschirmdiagonale,
     sondern die Höhe in CSS-Pixeln — ein 1920×1200-Gerät mit doppelter
     Punktdichte hat davon nur 600. Alles, was Höhe kostet, hängt deshalb an
     `vh` und wird nach unten wie nach oben begrenzt. */
  --summe-groesse: clamp(1.6rem, 5.2vh, 2.6rem);
  --rueckgeld-groesse: clamp(1rem, 3vh, 1.45rem);
  --taste-hoehe: clamp(30px, 5.4vh, 46px);
  --taste-schrift: clamp(.85rem, 2.2vh, 1.15rem);
  --aktion-hoehe: clamp(38px, 7vh, 58px);
  --aktion-schrift: clamp(.85rem, 2.1vh, 1.05rem);
  --feld-hoehe: clamp(34px, 6vh, 46px);
  --karte-polster: clamp(6px, 1.6vh, 16px);
  --luecke: clamp(4px, 1vh, 8px);
  --artikel-hoehe: clamp(46px, 8.5vh, 68px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--grund);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

/* Verhindert das Hineinzoomen beim Doppeltippen auf dem Tablet. */
button, .knopf { touch-action: manipulation; }

/* ---------------------------------------------------------- Grundbausteine */

button, .knopf {
  font: inherit;
  border: 0;
  border-radius: var(--radius);
  padding: 12px 16px;
  min-height: 44px;
  background: var(--blau);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button:hover, .knopf:hover { background: var(--blau-dunkel); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }

button.grau { background: #6b7580; }
button.grau:hover { background: #55606b; }
button.gruen { background: var(--gruen); }
button.gruen:hover { background: var(--gruen-dunkel); }
button.rot { background: var(--rot); }
button.rot:hover { background: var(--rot-dunkel); }
button.klein { padding: 6px 10px; min-height: 36px; font-size: .9rem; }

input, select {
  font: inherit;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  max-width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--blau); border-color: var(--blau); }

.karte {
  background: var(--karte);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 16px;
}

.leise { color: var(--text-leise); }
.rechts { text-align: right; }
.verborgen { display: none !important; }

/* ---------------------------------------------------------- Kopfleiste */

.kopf {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.4vh, 12px);
  padding: clamp(3px, .9vh, 8px) 12px;
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  flex-wrap: wrap;
}
.kopf h1 { font-size: clamp(.85rem, 2.2vh, 1.05rem); margin: 0; font-weight: 700; }
/* Auf flachen Bildschirmen frisst eine 44 px hohe Leiste spürbar Platz. */
body.kassenansicht .kopf button,
body.kassenansicht .kopf .knopf {
  min-height: clamp(28px, 5vh, 40px);
  padding: 2px 10px;
  font-size: clamp(.72rem, 1.9vh, .9rem);
}
.kopf .fueller { flex: 1; }

.zustand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  background: #e6f4ea;
  color: var(--gruen);
}
.zustand::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.zustand.warnung { background: #fdf3e2; color: var(--gelb); }
.zustand.fehler  { background: #fbeae8; color: var(--rot); }

/* ---------------------------------------------------------- Verkauf */

/* Der Verkaufsbildschirm füllt genau ein Fenster und scrollt nicht.
   `dvh` statt `vh`: Auf Android rechnet `vh` mit der Höhe OHNE ein- und
   ausblendende Systemleisten — der Inhalt ragte dadurch unten heraus.
   Die Kopfzeile wird nicht abgezogen, sondern per Flexbox ausgemessen; sie
   darf umbrechen, ohne dass das Layout kippt. */
/* Beide Elemente, nicht nur der body: Stand `overflow: hidden` allein am body,
   blieb das Wurzelelement scrollbar. Kehrte man dann aus der Verwaltung
   zurück — wo man weit nach unten gescrollt hatte —, stellte der Browser die
   Scrollposition wieder her und schob Artikelraster wie Kassierknöpfe nach
   oben aus dem Bild. Erst ein Neustart der Anwendung räumte das auf.

   Auch die Höhe muss an beiden hängen: `html { height: 100% }` und
   `body { height: 100dvh }` laufen auseinander, sobald sich die Systemleisten
   ein- oder ausblenden — der body wird dann höher als sein Elternelement und
   ragt unten heraus. */
html.kassenansicht,
body.kassenansicht {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;      /* kein Gummiband-Effekt beim Wischen */
}
body.kassenansicht {
  display: flex;
  flex-direction: column;
}
body.kassenansicht .kopf { flex: 0 0 auto; }

.verkauf {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: var(--luecke);
  padding: var(--luecke);
}
/* Unterhalb dieser Breite passen zwei Spalten nicht mehr sinnvoll
   nebeneinander — dann untereinander und scrollbar. Gilt vor allem für
   Hochformat; für den Verkauf ist Querformat gedacht (siehe Manifest). */
@media (max-width: 700px) {
  html.kassenansicht,
  body.kassenansicht { height: auto; max-height: none; overflow: visible; }
  .verkauf { grid-template-columns: 1fr; }
}

.spalte { display: flex; flex-direction: column; min-height: 0; }

.raster { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 4px; -webkit-overflow-scrolling: touch; }
.raster h2 {
  font-size: clamp(.68rem, 1.8vh, .78rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin: clamp(6px, 1.6vh, 14px) 0 4px;
}
.raster h2:first-child { margin-top: 0; }
.knoepfe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 15vw, 165px), 1fr));
  gap: var(--luecke);
}
.artikelknopf {
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  min-height: var(--artikel-hoehe);
  line-height: 1.2;
  text-align: center;
}
.artikelknopf .preis { font-weight: 700; font-size: clamp(.9rem, 2.2vh, 1.05rem); }
.artikelknopf .bez { font-size: clamp(.72rem, 1.8vh, .86rem); }

/* -- Bon ---------------------------------------------------- */

.meldung {
  min-height: 20px;
  font-size: clamp(.78rem, 2vh, .92rem);
  font-weight: 600;
  padding: 1px 4px;
}
.meldung.ok { color: var(--gruen); }
.meldung.fehler { color: var(--rot); }
.meldung.hinweis { color: var(--gelb); }

/* Der Bon bekommt, was übrig bleibt — er ist der einzige Bereich, der
   beliebig wachsen darf und deshalb auch scrollen soll. */
.bon {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: clamp(60px, 12vh, 120px);
  background: var(--karte);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 4px;
  -webkit-overflow-scrolling: touch;
}
.bon .leerhinweis { text-align: center; color: var(--text-leise); padding: 32px 8px; }

.zeile {
  display: grid;
  grid-template-columns: 38px 30px 38px 1fr auto auto 38px;
  align-items: center;
  gap: 5px;
  padding: 3px;
  border-bottom: 1px solid var(--grund);
}
.zeile:last-child { border-bottom: 0; }
.zeile .menge {
  text-align: center;
  font-weight: 700;
  font-size: clamp(.9rem, 2.2vh, 1.05rem);
}
.zeile .bez {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.8rem, 2.1vh, .95rem);
}
.zeile .einzel { color: var(--text-leise); font-size: clamp(.7rem, 1.7vh, .85rem); }
.zeile .summe {
  font-weight: 700;
  min-width: 72px;
  text-align: right;
  font-size: clamp(.85rem, 2.2vh, 1rem);
}
.zeile button { min-height: clamp(28px, 4.8vh, 38px); padding: 0; }
.zeile.neu { animation: aufblitzen .6s ease-out; }
@keyframes aufblitzen {
  from { background: #d9f2e0; }
  to { background: transparent; }
}

.abschluss {
  flex: 0 0 auto;
  margin-top: var(--luecke);
  padding: var(--karte-polster);
}
.summenzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.summenzeile .titel {
  font-size: clamp(.78rem, 2vh, .95rem);
  font-weight: 700;
  letter-spacing: .04em;
}
.summenzeile .betrag {
  font-size: var(--summe-groesse);
  font-weight: 800;
  line-height: 1.05;
}
.rueckgeld {
  font-size: var(--rueckgeld-groesse);
  font-weight: 700;
  text-align: right;
  min-height: 1.4em;
  margin: 2px 0;
}
.rueckgeld.ok { color: var(--gruen); }
.rueckgeld.fehlt { color: var(--rot); }

.gegeben-zeile {
  display: flex;
  align-items: center;
  gap: var(--luecke);
  margin: var(--luecke) 0;
}
.gegeben-zeile input {
  flex: 1;
  text-align: right;
  font-size: clamp(.95rem, 2.4vh, 1.2rem);
  font-weight: 600;
  min-height: var(--feld-hoehe);
  padding: 4px 10px;
}

/* Eigener Ziffernblock: Ist ein Bluetooth-Scanner gekoppelt, blendet das
   Tablet seine Bildschirmtastatur aus — ohne diese Tasten ließe sich der
   gegebene Betrag dann gar nicht eingeben. */
.ziffern {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--luecke);
  margin-bottom: var(--luecke);
}
.ziffern button {
  padding: 2px;
  min-height: var(--taste-hoehe);
  font-size: var(--taste-schrift);
  font-weight: 600;
  background: #f4f6f8;
  color: var(--text);
}
.ziffern button:hover { background: #e4e8ec; }
.ziffern button.aktion { background: #dde3e9; font-size: calc(var(--taste-schrift) * .82); }

.aktionen { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--luecke); }
.aktionen button {
  font-size: var(--aktion-schrift);
  font-weight: 700;
  padding: 4px;
  min-height: var(--aktion-hoehe);
}

/* ---------------------------------------------------------- Anmeldung */

.mitte {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.anmeldekarte { width: min(420px, 100%); }
.anmeldekarte h1 { margin: 0 0 4px; font-size: 1.5rem; }
.anmeldekarte form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.anmeldekarte input { font-size: 1.3rem; text-align: center; letter-spacing: .12em; }
.fehlermeldung {
  background: #fbeae8;
  color: var(--rot);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-weight: 600;
}

/* ---------------------------------------------------------- Verwaltung */

.verwaltung { padding: 14px; max-width: 1400px; margin: 0 auto; }
.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.reiter button { background: #dde3e9; color: var(--text); }
.reiter button.aktiv { background: var(--blau); color: #fff; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--rand); }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr.inaktiv td { color: var(--text-leise); }
.tabellenrahmen { overflow-x: auto; }

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.kennzahl { text-align: center; }
.kennzahl .wert { font-size: 1.9rem; font-weight: 800; }
.kennzahl .titel { font-size: .82rem; color: var(--text-leise); }

.werkzeugleiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.abschnitt { margin-bottom: 22px; }
.abschnitt h2 { font-size: 1.1rem; margin: 0 0 10px; }

dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 20px;
  width: min(460px, 94vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h2 { margin-top: 0; }
dialog .feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
dialog .feld label { font-size: .88rem; color: var(--text-leise); }
dialog .knopfzeile { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

.hinweiskasten {
  background: #fdf6e6;
  border-left: 4px solid var(--gelb);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
  line-height: 1.5;
}