/*
 * Farben und Formen folgen der Vereinsseite asczeilsheim.de: anthrazitfarbener
 * Kopf, heller Grund, weisse Karten, Knoepfe als Pille. Die Seite selbst ist
 * durchgehend grau in grau.
 *
 * Eine Ausnahme ist Absicht: Status bleibt farbig. Wer als Vorstand eine Queue
 * durchsieht, muss freigegeben und abgelehnt auf einen Blick trennen koennen -
 * in Grautoenen unterscheiden sie sich nur durch Text. Die Farben sind darum
 * entsaettigt, damit sie neben dem Anthrazit nicht schreien.
 */
:root {
  --marke: #36383c;
  --marke-dunkel: #202225;
  --marke-hell: #e9eaec;
  --akzent: #36383c;

  --gruen: #2f6d4f;
  --gruen-hell: #e8f1ec;
  --rot: #9d3b31;
  --rot-hell: #f8ebe9;
  --gelb-hell: #f6f0e1;
  --grau: #676a70;
  --linie: #dcdee1;
  --flaeche: #ffffff;
  --grund: #eceef0;
  --text: #1c1d20;
  --radius: 10px;
  --radius-knopf: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --marke: #2a2c31;
    --marke-dunkel: #1a1c20;
    --marke-hell: #2a2c31;
    --akzent: #d3d6db;

    --gruen: #6fb890;
    --gruen-hell: #18271f;
    --rot: #e08276;
    --rot-hell: #2b1714;
    --gelb-hell: #2a2414;
    --grau: #9a9ea6;
    --linie: #2e3036;
    --flaeche: #1b1c20;
    --grund: #121316;
    --text: #e8eaee;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 5rem;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--marke);
  color: #fff;
  padding: env(safe-area-inset-top) 0 0;
}

.kopf-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: .75rem 1rem;
}

/* Der Vereinsname steht auf der Website in Versalien - hier genauso. */
#verein {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

header .leise { color: rgba(255,255,255,.8); font-size: .85rem; }

/* Lange Vereinsnamen sollen den Kopf auf dem Telefon nicht dreizeilig machen:
   der Name darf zwei Zeilen, der eigene Name weicht auf Pünktchen aus. */
@media (max-width: 30rem) {
  .kopf-inner { gap: .5rem; padding: .6rem .9rem; }
  #verein { font-size: .95rem; line-height: 1.25; }
  #wer {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem;
}

h1 { font-size: 1.35rem; margin: .25rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }

.leise { color: var(--grau); }
.klein { font-size: .85rem; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- Karten ---------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .75rem;
}

.karte.klickbar { cursor: pointer; }
.karte.klickbar:hover { border-color: var(--akzent); }

.zeile { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.zeile + .zeile { margin-top: .35rem; }

.betrag { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.betrag.gross { font-size: 1.3rem; }

/* ---------- Status ---------- */

.status {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.status.eingereicht { background: var(--gelb-hell); color: #8a6516; }
.status.freigegeben { background: var(--gruen-hell); color: var(--gruen); }
.status.ausgezahlt { background: var(--gruen); color: #fff; }
.status.abgelehnt, .status.zurueckgezogen { background: var(--rot-hell); color: var(--rot); }

@media (prefers-color-scheme: dark) {
  .status.eingereicht { color: #e0b357; }
  .status.ausgezahlt { color: #0b1a14; }
}

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

label { display: block; margin: .85rem 0 .25rem; font-weight: 600; font-size: .9rem; }

input, select, textarea {
  width: 100%;
  padding: .7rem .75rem;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
textarea { min-height: 4.5rem; resize: vertical; }
input[type=file] { padding: .65rem .5rem; }
input[type=checkbox] { width: auto; margin-right: .5rem; accent-color: var(--marke); }

.paar { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 30rem) { .paar { grid-template-columns: 1fr; gap: 0; } }

/* Das Kaestchen selbst ist 13 px gross - viel zu klein fuer einen Daumen.
   Die ganze Zeile ist darum 44 px hoch und die Beschriftung klickbar. */
.check { display: flex; align-items: center; margin: .35rem 0; font-weight: 600; font-size: .9rem; min-height: 44px; }
.check label { flex: 1; padding: .6rem 0; cursor: pointer; }

/* ---------- Knoepfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .75rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--marke);
  border: 1px solid transparent;
  border-radius: var(--radius-knopf);
  cursor: pointer;
  min-height: 44px;
}
.knopf:disabled { opacity: .5; cursor: default; }
.knopf.breit { width: 100%; margin-top: 1.25rem; }
.leise-knopf { background: transparent; color: var(--text); border-color: var(--linie); }
.gefahr { background: var(--rot); }
.knopf.klein { padding: .4rem .7rem; font-size: .85rem; min-height: 36px; }

.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }

/* ---------- Umschalter ---------- */

.umschalter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-bottom: 1rem;
}
.umschalter button {
  padding: .85rem;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  cursor: pointer;
}
.umschalter button[aria-pressed=true] {
  background: var(--marke-hell);
  border-color: var(--akzent);
  color: var(--text);
}

/* ---------- Navigation ---------- */

nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 5;
}
nav button {
  flex: 1;
  padding: .7rem .25rem;
  font: inherit;
  font-size: .75rem;
  color: var(--grau);
  background: none;
  border: 0;
  cursor: pointer;
  min-height: 52px;
  /* Ohne das rutscht die Zahl neben "Freigabe" auf dem Telefon unter das
     Wort und die Leiste steht schief. */
  white-space: nowrap;
}
@media (max-width: 23.5rem) {
  nav button { font-size: .7rem; padding: .7rem .15rem; }
}
nav button[aria-current=page] { color: var(--akzent); font-weight: 650; }
nav .zahl {
  display: inline-block;
  min-width: 1.15rem;
  padding: 0 .3rem;
  margin-left: .2rem;
  background: var(--rot);
  color: #fff;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
}

/* ---------- Kleinteile ---------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: 5rem;
  transform: translateX(-50%);
  max-width: min(32rem, 92vw);
  padding: .7rem 1rem;
  background: var(--text);
  color: var(--grund);
  border-radius: 10px;
  font-size: .9rem;
  z-index: 20;
}
#toast.fehler { background: var(--rot); color: #fff; }

dialog {
  width: min(42rem, 94vw);
  max-height: 88vh;
  padding: 1rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
dialog::backdrop { background: rgba(0,0,0,.5); }
.dialog-fuss { margin-top: 1rem; text-align: right; }
dialog img, dialog embed { width: 100%; border-radius: 8px; }

.hinweis {
  padding: .75rem 1rem;
  background: var(--gelb-hell);
  border-radius: 10px;
  font-size: .9rem;
  margin-bottom: 1rem;
}
.hinweis.fehler { background: var(--rot-hell); color: var(--rot); }

.leerraum { text-align: center; color: var(--grau); padding: 3rem 1rem; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--linie); }
th { color: var(--grau); font-size: .8rem; }
td.rechts, th.rechts { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap, th.nowrap { white-space: nowrap; }

/*
 * Die Jahresuebersicht hat sechs Spalten und passt auf kein Telefon. Ohne
 * diesen Rahmen schiebt sie die ganze Seite seitlich weg - dann wandert bei
 * jedem Wischen auch der Kopf mit, und das fuehlt sich kaputt an. So wischt
 * nur die Tabelle, der Rest der Seite steht still.
 */
.tabelle-breit {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.tabelle-breit table { min-width: 34rem; }

.nur-schmal { display: none; }
@media (max-width: 34rem) { .nur-schmal { display: block; margin: 0 0 .4rem; } }

.lade { text-align: center; padding: 2rem; color: var(--grau); }