/* ==========================================================================
   Kasse – Gestaltung

   Leitbild: Der Ort, an dem diese Seite benutzt wird, ist ein Tisch in einer
   Bar am Abend. Deshalb dunkel als Grundzustand, nicht als Zusatz. Die
   Abrechnung selbst ist als das gebaut, was sie in der Wirklichkeit ist –
   ein Kassenbon: warmes Papier, Monospace, Punktlinien, gerissene Kante.
   Das Papier bleibt hell, auch wenn alles andere dunkel ist. Es ist ein
   Gegenstand auf dem Tisch, kein Bereich der Oberfläche.

   Keine Webfonts: die Content-Security-Policy erlaubt nur eigene Quellen.
   Die Schriftrollen kommen deshalb aus Systemstapeln – Monospace als
   Auszeichnungsschrift, serifenlos als stille Lesetype.
   ========================================================================== */

:root {
  color-scheme: dark light;

  --nacht:   #0C171C;
  --karte:   #14242B;
  --rand:    #21353D;
  --hell:    #E6EDEC;
  --dim:     #8AA0A4;

  --papier:  #F3EFE3;
  --tinte:   #1C1C18;
  --papier-linie: #B9B2A0;

  --adria:   #45B3A8;
  --koralle: #E4705E;
  --sand:    #D9A44C;

  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rundung: 10px;
  --spur: .08em;
}

@media (prefers-color-scheme: light) {
  :root {
    --nacht: #DFE6E7;
    --karte: #F4F7F7;
    --rand:  #C6D3D5;
    --hell:  #16262C;
    --dim:   #5C7276;
    --adria: #17786F;
    --koralle: #B8442F;
    --sand:  #9A6E14;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  padding: 0 1.1rem 4rem;
  max-width: 32rem;
  background: var(--nacht);
  color: var(--hell);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

/* ---------- Kopf: der eigene Stand ist die Überschrift ---------- */

.kopfzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0 .2rem;
}

.marke {
  margin: 0;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

.zurueck {
  font-size: .8rem;
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid var(--rand);
}
.zurueck:hover, .zurueck:focus-visible { color: var(--adria); }

.stand { padding: .3rem 0 1.3rem; }

.stand-label {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

.stand-zahl {
  display: block;
  font-family: var(--mono);
  font-size: clamp(2.4rem, 13vw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: .15rem;
}
.stand-zahl.plus  { color: var(--adria); }
.stand-zahl.minus { color: var(--koralle); }
.stand-zahl.null  { color: var(--dim); }

.stand-satz {
  margin: .15rem 0 0;
  font-size: .85rem;
  color: var(--dim);
}

/* ---------- Meldungen ---------- */

.hinweis {
  padding: .55rem .8rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--adria);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--adria) 14%, transparent);
  font-size: .87rem;
}
.hinweis.fehler {
  border-left-color: var(--koralle);
  background: color-mix(in srgb, var(--koralle) 14%, transparent);
}

/* ---------- Reiter ---------- */

/* Ein Element mit [hidden] muss verschwinden - auch wenn eine Klasse weiter
   unten display setzt. Ohne diese Zeile gewinnt .reiter { display: flex }. */
[hidden] { display: none !important; }

.reiter {
  display: flex;
  gap: .1rem;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 1.4rem;
}

.reiter button {
  flex: 1;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: .55rem .3rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
}
.reiter button.aktiv {
  color: var(--hell);
  border-bottom-color: var(--adria);
}
.reiter button:focus-visible { outline: 2px solid var(--adria); outline-offset: 2px; }

/* ---------- Formular ---------- */

.feld { display: block; margin-bottom: 1rem; }

.feld > span {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .3rem;
}

.feld input,
.feld select {
  width: 100%;
  padding: .65rem .75rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--hell);
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
}
.feld input:focus-visible,
.feld select:focus-visible {
  outline: 2px solid var(--adria);
  outline-offset: 1px;
}

/* Beträge in der Auszeichnungsschrift, groß genug fürs Tippen im Halbdunkel */
.feld.betrag input {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  padding-block: .5rem;
}

.paar { display: flex; gap: .7rem; }
.paar .feld { flex: 1; }

.gruppe {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}
.gruppe legend {
  padding: 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .45rem;
}

.schnellwahl { display: flex; gap: .4rem; margin-bottom: .6rem; }
.schnellwahl button {
  appearance: none;
  background: none;
  border: 1px dashed var(--rand);
  border-radius: 999px;
  padding: .2rem .7rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: var(--spur);
  color: var(--dim);
  cursor: pointer;
}
.schnellwahl button:hover { color: var(--hell); border-color: var(--adria); }
.schnellwahl button:focus-visible { outline: 2px solid var(--adria); outline-offset: 2px; }

.leute { display: flex; flex-wrap: wrap; gap: .45rem; }

.kopf-person {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem .35rem .6rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-size: .92rem;
  cursor: pointer;
  user-select: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.kopf-person input { accent-color: var(--adria); margin: 0; }
.kopf-person:has(input:checked) {
  border-color: var(--adria);
  background: color-mix(in srgb, var(--adria) 12%, var(--karte));
}
.kopf-person:has(input:focus-visible) { outline: 2px solid var(--adria); outline-offset: 2px; }

.vorschau {
  min-height: 1.3rem;
  margin: .2rem 0 .9rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--dim);
}

.senden {
  width: 100%;
  appearance: none;
  padding: .85rem;
  font-family: var(--mono);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nacht);
  background: var(--adria);
  border: 0;
  border-radius: var(--rundung);
  cursor: pointer;
}
.senden:disabled { opacity: .4; cursor: default; }
.senden:focus-visible { outline: 2px solid var(--hell); outline-offset: 2px; }

/* ==========================================================================
   Der Beleg – das Erkennungszeichen dieser Seite
   ========================================================================== */

.beleg {
  position: relative;
  margin: 0 0 2rem;
  padding: 1.3rem 1.2rem 1.5rem;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--mono);
  font-size: .88rem;
  border-radius: 3px;
  box-shadow: 0 10px 26px rgb(0 0 0 / .32);
}

/* Abrisskante unten */
.beleg::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -9px;
  height: 10px;
  background:
    linear-gradient(45deg,  transparent 50%, var(--papier) 50%) 0 0 / 18px 18px repeat-x,
    linear-gradient(-45deg, transparent 50%, var(--papier) 50%) 9px 0 / 18px 18px repeat-x;
}

.beleg-kopf {
  text-align: center;
  padding-bottom: .8rem;
  border-bottom: 1px dashed var(--papier-linie);
}
.beleg-titel {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.beleg-summe {
  display: block;
  margin-top: .35rem;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.beleg h2 {
  margin: 1.1rem 0 .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tinte) 55%, transparent);
}

.bon { list-style: none; margin: 0; padding: 0; }
.bon li {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .28rem 0;
}
.bon .name { white-space: nowrap; }
.bon .fuellung {
  flex: 1;
  min-width: 1rem;
  border-bottom: 1px dotted var(--papier-linie);
  transform: translateY(-.28em);
}
.bon .wert {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bon .wert.plus  { color: #0F6B5F; }
.bon .wert.minus { color: #A8402D; }
.bon .leer {
  display: block;
  padding: .3rem 0;
  color: color-mix(in srgb, var(--tinte) 55%, transparent);
}

.bon .quittieren {
  appearance: none;
  margin-left: .3rem;
  padding: .15rem .55rem;
  font-family: inherit;
  font-size: .68rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--tinte);
  background: none;
  border: 1px solid var(--papier-linie);
  border-radius: 3px;
  cursor: pointer;
}
.bon .quittieren:hover { background: color-mix(in srgb, var(--tinte) 8%, transparent); }
.bon .quittieren:focus-visible { outline: 2px solid var(--tinte); outline-offset: 1px; }

.beleg-fuss {
  margin-top: 1.1rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--papier-linie);
  font-size: .7rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  display: flex;
  gap: 1rem;
}
.beleg-fuss a { color: var(--tinte); }

/* ---------- Ausgabenliste ---------- */

.posten { list-style: none; margin: 0; padding: 0; }

.posten li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem .8rem;
  padding: .75rem .9rem;
  margin-bottom: .5rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
}
.posten .was { font-weight: 600; }
.posten .wieviel {
  grid-row: span 2;
  align-self: center;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.posten .wer {
  font-size: .8rem;
  color: var(--dim);
}
.posten .entfernen {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: .4rem;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  border-bottom: 1px solid var(--rand);
}
.posten .entfernen:hover { color: var(--koralle); border-bottom-color: var(--koralle); }
.posten .entfernen:focus-visible { outline: 2px solid var(--koralle); outline-offset: 2px; }

.leerlauf {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--dim);
  border: 1px dashed var(--rand);
  border-radius: var(--rundung);
}
.leerlauf strong { display: block; color: var(--hell); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Notiz und Kommentare ---------- */

.feld textarea {
  width: 100%;
  padding: .65rem .75rem;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--hell);
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  resize: vertical;
}
.feld textarea:focus-visible { outline: 2px solid var(--adria); outline-offset: 1px; }

.posten .notiz {
  grid-column: 1 / -1;
  margin-top: .5rem;
  padding-left: .7rem;
  border-left: 2px solid var(--rand);
  font-size: .87rem;
  line-height: 1.5;
  color: var(--hell);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.posten .aktionen {
  grid-column: 1 / -1;
  display: flex;
  gap: 1rem;
  margin-top: .55rem;
}

.posten .aktionen button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  border-bottom: 1px solid var(--rand);
}
.posten .aktionen button:hover { color: var(--hell); border-bottom-color: var(--adria); }
.posten .aktionen button.entfernen:hover { color: var(--koralle); border-bottom-color: var(--koralle); }
.posten .aktionen button:focus-visible { outline: 2px solid var(--adria); outline-offset: 2px; }

.faden {
  grid-column: 1 / -1;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--rand);
}

.faden ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.faden li { padding: .45rem 0; border-bottom: 1px solid var(--rand); }
.faden li:last-child { border-bottom: 0; }

.faden .stimme {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .15rem;
}
.faden .wortlaut {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .92rem;
  line-height: 1.55;
}
.faden .weg {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: .2rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
}
.faden .weg:hover { color: var(--koralle); }

.faden textarea {
  width: 100%;
  padding: .55rem .65rem;
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--hell);
  background: var(--nacht);
  border: 1px solid var(--rand);
  border-radius: 8px;
  resize: vertical;
}
.faden textarea:focus-visible { outline: 2px solid var(--adria); outline-offset: 1px; }

.faden .absenden {
  appearance: none;
  margin-top: .45rem;
  padding: .4rem .9rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nacht);
  background: var(--adria);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.faden .absenden:disabled { opacity: .4; cursor: default; }
.faden .nichts { color: var(--dim); font-size: .87rem; margin: 0 0 .6rem; }

/* Raumname im Kopf – macht sichtbar, welche Kasse gerade offen ist */
.marke em {
  display: block;
  margin-top: .2rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--hell);
}
.marke em:empty { display: none; }

/* ---------- Gruppe und Rollen ---------- */

.rollen-hilfe {
  margin: 0 0 1rem;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--dim);
}

.mitglieder { list-style: none; margin: 0 0 1.4rem; padding: 0; }

.mitglieder li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .3rem .8rem;
  padding: .7rem .9rem;
  margin-bottom: .5rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
}
.mitglieder li.ich { border-color: var(--adria); }
.mitglieder li.still { opacity: .55; }

.mitglieder .wieheisst { font-weight: 600; }
.mitglieder .ichzeichen {
  margin-left: .4rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--adria);
}

.rolle {
  justify-self: end;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  padding: .18rem .55rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  color: var(--dim);
  white-space: nowrap;
}
.rolle.owner  { color: var(--sand);   border-color: var(--sand); }
.rolle.admin  { color: var(--adria);  border-color: var(--adria); }
.rolle.viewer { color: var(--dim); border-style: dashed; }
.rolle.ghost  { color: var(--koralle); border-color: var(--koralle); border-style: dashed; }

.mitglieder .lage {
  grid-column: 1 / -1;
  font-size: .78rem;
  color: var(--dim);
}

.mitglieder .stellschraube {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: .5rem;
}
.mitglieder .stellschraube select {
  padding: .3rem .5rem;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--hell);
  background: var(--nacht);
  border: 1px solid var(--rand);
  border-radius: 7px;
}
.mitglieder .stellschraube button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  border-bottom: 1px solid var(--rand);
}
.mitglieder .stellschraube button:hover { color: var(--hell); border-bottom-color: var(--adria); }

.einladung {
  padding: .9rem 1rem;
  background: var(--karte);
  border: 1px dashed var(--rand);
  border-radius: var(--rundung);
}
.einladung h2 {
  margin: 0 0 .3rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--dim);
}
.einladung p { margin: 0 0 .7rem; font-size: .85rem; color: var(--dim); }
.einladung .zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.einladung select {
  flex: 1 1 8rem;
  padding: .45rem .55rem;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--hell);
  background: var(--nacht);
  border: 1px solid var(--rand);
  border-radius: 8px;
}
.einladung .erzeugen {
  appearance: none;
  padding: .45rem 1rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nacht);
  background: var(--adria);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.einladung .erzeugen:disabled { opacity: .4; cursor: default; }

.linkbox { margin-top: .8rem; }
.linkbox input {
  width: 100%;
  padding: .5rem .6rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--hell);
  background: var(--nacht);
  border: 1px solid var(--adria);
  border-radius: 8px;
}
.linkbox small { display: block; margin-top: .35rem; color: var(--dim); font-size: .78rem; }