/* Essensbestellung — mobil zuerst, Vereinsfarbe Grün.
   Keine externen Fonts, kein CDN, keine Bibliothek: die Seite soll auf einem
   alten Android-Handy sofort stehen. */

:root {
  --gruen: #17683a;
  --gruen-hell: #1f8a4c;
  --gruen-dunkel: #0f4a29;
  --gruen-blass: #eaf5ee;
  /* Textfarbe auf grünem Grund. Hell: Weiß auf dunklem Grün (6,8:1). */
  --auf-gruen: #ffffff;
  --text: #14201a;
  --text-leise: #5a6b61;
  --rand: #d5e0d9;
  --flaeche: #ffffff;
  --hintergrund: #eef2ef;
  --rot: #b3261e;
  --gelb: #8a6d1f;

  /* Radius-Skala */
  --radius-klein: 10px;
  --radius: 14px;
  --radius-gross: 18px;
  --radius-pille: 999px;

  /* Elevation — dezent, zwei Stufen: ruhend und angehoben. */
  --schatten-1: 0 1px 2px rgb(10 30 18 / 0.05), 0 2px 6px rgb(10 30 18 / 0.07);
  --schatten-2: 0 2px 4px rgb(10 30 18 / 0.07), 0 8px 20px rgb(10 30 18 / 0.12);
  --schatten: var(--schatten-1);  /* Rückwärtskompatibel */

  /* Bewegung — eine Kurve, eine Dauer. Reduziert unten via reduced-motion. */
  --ueber: 150ms cubic-bezier(0.2, 0, 0, 1);

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gruen: #46b06e;
    --gruen-hell: #57c47f;
    --gruen-dunkel: #2f8a53;
    --gruen-blass: #16281c;
    /* Dark: Weiß auf dem helleren Grün wäre nur 2,7:1. Dunkle Tinte statt
       weiß bringt ~6,6:1 auf der Fläche und bleibt auch auf dem dunklen
       Verlaufsende lesbar. */
    --auf-gruen: #06120b;
    --text: #e9efea;
    --text-leise: #a2b3a8;
    --rand: #2c3a32;
    --flaeche: #182019;
    --hintergrund: #0e130f;
    --rot: #ef8079;
    --gelb: #d9b95c;
    /* Auf dunklem Grund tragen weichere, tiefere Schatten die Elevation. */
    --schatten-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.4);
    --schatten-2: 0 2px 6px rgb(0 0 0 / 0.5), 0 10px 24px rgb(0 0 0 / 0.55);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  /* rem statt px: respektiert die vom Nutzer eingestellte Schriftgröße. */
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--hintergrund);
  -webkit-tap-highlight-color: transparent;
}

.seite {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 0 1.25rem;
  background: var(--flaeche);
  min-height: 100vh;
  min-height: 100dvh;  /* Mobile-Toolbars: keine Phantom-Scrollleiste. */
}

@media (min-width: 36rem) {
  .seite {
    margin: 1.5rem auto;
    min-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten);
  }
}

/* --- Spielkopf im FuPa-Stil -------------------------------------------- */

.spielkopf {
  background: linear-gradient(160deg, var(--gruen-dunkel), var(--gruen) 70%);
  color: var(--auf-gruen);
  padding: 1rem 1.1rem 1.1rem;
  /* Notch/Rundungen im Querformat nicht in den Text laufen lassen. */
  padding-left: max(1.1rem, env(safe-area-inset-left));
  padding-right: max(1.1rem, env(safe-area-inset-right));
  text-align: center;
}

.spielkopf-titel {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.paarung {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 0.5rem;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.wappen {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
}

.wappen-platzhalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gruen);
  /* Schild-Form für den Platzhalter */
  border-radius: 50% 50% 48% 48% / 40% 40% 58% 58%;
}

.team-name {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.paarung-mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* „vs" auf Höhe der Wappenmitte (Wappen sind 72px hoch). */
  padding-top: 1.5rem;
}

.vs {
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.9;
}

.spielkopf-datum {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  opacity: 0.92;
}

.schluss-pille {
  margin: 0.6rem auto 0;
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  background: #fff;
  /* Feste dunkle Tinte: die Pille ist immer weiß, also in Light und Dark gut lesbar. */
  color: #0f4a29;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pille);
  box-shadow: var(--schatten-1);
}

/* --- Abschnitte --------------------------------------------------------- */

.abschnitt {
  padding: 1rem 1.1rem 0;
  padding-left: max(1.1rem, env(safe-area-inset-left));
  padding-right: max(1.1rem, env(safe-area-inset-right));
}

.abschnitt-titel {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  color: var(--gruen);
}

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

.gericht-karte {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.8rem;
  margin-bottom: 0.8rem;
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
}

.gericht-karte-bild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-klein);
  background: var(--gruen-blass);
}

.gericht-karte-text h2 {
  margin: 0 0 0.15rem;
  font-size: 1.15rem;
  color: var(--gruen);
}

.gericht-karte-text p {
  margin: 0 0 0.4rem;
  color: var(--text-leise);
  font-size: 0.95rem;
}

.preis-chip {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gruen-dunkel);
  background: var(--gruen-blass);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pille);
}

@media (prefers-color-scheme: dark) {
  .preis-chip { color: var(--gruen-hell); }
}

.gericht-karte.kompakt { grid-template-columns: 84px 1fr; align-items: center; }
.gericht-karte.kompakt .gericht-karte-bild { aspect-ratio: 1; }
.gericht-karte.kompakt h2 { font-size: 1rem; }

/* --- Formulare ----------------------------------------------------------- */

.feld { margin-bottom: 0.9rem; }

.feld-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.7rem;
}

@media (max-width: 24rem) {
  .feld-reihe { grid-template-columns: 1fr; gap: 0; }
}

.feld label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.optional { font-weight: 400; color: var(--text-leise); }

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="file"],
textarea {
  width: 100%;
  font-size: 16px; /* verhindert iOS-Zoom beim Fokus */
  font-family: inherit;
  padding: 0.7rem 0.75rem;
  color: var(--text);
  background: var(--flaeche);
  border: 2px solid var(--rand);
  border-radius: var(--radius-klein);
  min-height: 48px;
  transition: border-color var(--ueber), box-shadow var(--ueber);
}

textarea.import-feld {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

input:focus-visible {
  outline: none;
  border-color: var(--gruen);
  box-shadow: 0 0 0 3px rgb(23 104 58 / 0.18);
}

input[aria-invalid="true"] { border-color: var(--rot); }

.feldfehler { margin: 0.3rem 0 0.6rem; color: var(--rot); font-size: 0.9rem; }
.feldhinweis { margin: 0.3rem 0 0; color: var(--text-leise); font-size: 0.85rem; }

.feld-checkbox { display: flex; align-items: center; gap: 0.6rem; }
.feld-checkbox input { width: 22px; height: 22px; min-height: 0; }
.feld-checkbox label { margin: 0; font-weight: 400; }

.feld-gruppe {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin: 0 0 1rem;
}

.feld-gruppe legend {
  font-weight: 700;
  color: var(--gruen);
  padding: 0 0.4rem;
}

/* --- Mengen-Zähler ------------------------------------------------------- */

.zaehler {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 0.5rem;
}

.zaehler input {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  -moz-appearance: textfield;
}

.zaehler input::-webkit-outer-spin-button,
.zaehler input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.zaehler-taste {
  font-size: 1.6rem;
  line-height: 1;
  font-family: inherit;
  color: var(--gruen);
  background: var(--gruen-blass);
  border: 2px solid var(--rand);
  border-radius: var(--radius-klein);
  min-height: 48px;
  cursor: pointer;
  transition: background var(--ueber), color var(--ueber),
              border-color var(--ueber), transform var(--ueber);
}

@media (hover: hover) {
  .zaehler-taste:hover { border-color: var(--gruen); }
}
.zaehler-taste:active {
  background: var(--gruen);
  color: var(--auf-gruen);
  border-color: var(--gruen);
  transform: scale(0.93);
}

/* --- Tasten -------------------------------------------------------------- */

.taste-gross {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.95rem 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  color: var(--auf-gruen);
  background: var(--gruen);
  border: none;
  border-radius: var(--radius);
  min-height: 54px;
  cursor: pointer;
  box-shadow: var(--schatten-1);
  transition: background var(--ueber), box-shadow var(--ueber), transform var(--ueber);
}

@media (hover: hover) {
  .taste-gross:hover { box-shadow: var(--schatten-2); transform: translateY(-1px); }
}
.taste-gross:active { background: var(--gruen-dunkel); transform: translateY(1px); box-shadow: var(--schatten-1); }
.taste-gross[disabled] { opacity: 0.55; cursor: default; box-shadow: none; transform: none; }

.taste-zweit {
  color: var(--gruen);
  background: transparent;
  border: 2px solid var(--gruen);
  box-shadow: none;
}
@media (hover: hover) {
  .taste-zweit:hover { background: var(--gruen-blass); transform: none; box-shadow: none; }
}
.taste-zweit:active { background: var(--gruen-blass); }
.taste-zweit.gefahr-rand { color: var(--rot); border-color: var(--rot); }
@media (hover: hover) {
  .taste-zweit.gefahr-rand:hover { background: rgb(179 38 30 / 0.08); }
}

.taste-klein {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  font-size: 0.9rem;
  font-family: inherit;
  text-decoration: none;
  color: var(--gruen);
  background: var(--gruen-blass);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: background var(--ueber), border-color var(--ueber);
}
@media (hover: hover) {
  .taste-klein:hover { border-color: var(--gruen); }
}
.taste-klein:active { background: var(--rand); }
.taste-klein.gefahr { color: var(--rot); }

.taste-leise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-leise);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  transition: color var(--ueber);
}
@media (hover: hover) {
  .taste-leise:hover { color: var(--text); }
}

/* --- Fokus & Bewegung --------------------------------------------------- */

.taste-gross:focus-visible,
.taste-zweit:focus-visible,
.taste-klein:focus-visible,
.taste-leise:focus-visible,
.zaehler-taste:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2.5px solid var(--gruen);
  outline-offset: 2px;
}

/* Wer weniger Bewegung will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.fusszeilen-aktionen { text-align: center; margin-top: 0.5rem; }

.kleingedrucktes {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--text-leise);
  text-align: center;
}

/* --- Hinweise & Zustandsseiten ------------------------------------------- */

.hinweis {
  margin: 0.75rem 1.1rem 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
}

.hinweis.fehler { color: var(--rot); background: rgb(179 38 30 / 0.09); }
.hinweis.info { color: var(--gruen-dunkel); background: var(--gruen-blass); }

@media (prefers-color-scheme: dark) {
  .hinweis.info { color: var(--gruen-hell); }
}

.zustand { padding: 2rem 1.1rem 1rem; text-align: center; }

.zustand-zeichen { font-size: 3rem; line-height: 1; margin-bottom: 0.75rem; }

.zustand-zeichen.erfolg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  font-size: 2.2rem;
  color: var(--auf-gruen);
  background: var(--gruen);
  border-radius: 50%;
}

.zustand h1 {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--gruen);
}

.zustand-text { margin: 0 0 0.9rem; }

.karte {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  text-align: left;
  background: var(--gruen-blass);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}

.karte h2 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}

.karte-zeile { margin: 0 0 0.3rem; }
.karte-zeile.gross { font-size: 1.15rem; }
.karte-trenner { margin: 0.7rem 0; border: none; border-top: 1px solid var(--rand); }

.gedaempft { color: var(--text-leise); font-size: 0.9rem; }

/* --- Admin --------------------------------------------------------------- */

.admin { padding: 1rem 1.1rem; }

.admin-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-kopf h1 { margin: 0; font-size: 1.3rem; color: var(--gruen); }
.admin-kopf-aktionen { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.admin-aktionen { margin: 0.75rem 0 0.5rem; }
details.texte { margin-top: 0.85rem; }
details.texte summary {
  cursor: pointer;
  color: var(--gruen);
  font-weight: 600;
  padding: 0.4rem 0;
}
details.texte .feld { margin-top: 0.6rem; }
details.texte .feld .taste-klein { margin-top: 0.4rem; }

.spiel-karte {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin-bottom: 1rem;
}

.spiel-karte.inaktiv { opacity: 0.6; }

.spiel-karte-kopf {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 0.5rem;
}

.spiel-karte-kopf h2 { margin: 0; font-size: 1.1rem; color: var(--gruen); }
.spiel-karte-kopf p { margin: 0.1rem 0 0; font-size: 0.85rem; }

.spiel-karte-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.zahl-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.2rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-klein);
  background: var(--gruen);
  color: var(--auf-gruen);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--schatten-1);
}

.zahl-kachel strong { font-size: 1.3rem; line-height: 1.1; }
.zahl-kachel span { font-size: 0.7rem; line-height: 1.25; opacity: 0.9; }

.zahl-kachel.leise {
  background: var(--gruen-blass);
  color: var(--text);
}

.zahl-kachel.leise strong { color: var(--gruen); }

.schritt-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.83rem;
  color: var(--text-leise);
}

.schritt.erledigt { color: var(--text); }
.schritt.fehler { color: var(--rot); font-weight: 600; }
.schritt-haken { color: var(--gruen); font-weight: 800; }
.schritt-offen { opacity: 0.6; }

.spiel-karte-aktionen { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.marke {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  border-radius: var(--radius-pille);
  background: var(--rand);
  color: var(--text-leise);
  white-space: nowrap;
}

.marke.offen { background: var(--gruen); color: var(--auf-gruen); }
.marke.aus { background: rgb(179 38 30 / 0.15); color: var(--rot); }

.tabelle-scroll { overflow-x: auto; }

.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.tabelle th, .tabelle td {
  padding: 0.55rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}

.tabelle thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-leise);
}

.tabelle tfoot th {
  border-top: 2px solid var(--gruen);
  border-bottom: none;
  font-size: 0.95rem;
}

.tabelle .rechts { text-align: right; }
.bestell-aktionen { display: flex; gap: 0.3rem; align-items: center; }
.tabelle .nowrap { white-space: nowrap; }
.tabelle a { color: var(--gruen); }

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

.protokoll-zeile {
  display: flex;
  gap: 0.7rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rand);
  font-size: 0.9rem;
}

.protokoll-zeile.fehler .protokoll-text { color: var(--rot); }
.protokoll-zeit { color: var(--text-leise); white-space: nowrap; }

.inline { display: inline; }

.bild-vorschau {
  display: block;
  margin-top: 0.5rem;
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.bild-vorschau.schmal { max-width: 90px; }

/* --- Fuß ----------------------------------------------------------------- */

.fuss {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1rem 1.1rem 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-leise);
}

code {
  padding: 0.1rem 0.3rem;
  font-size: 0.85em;
  background: var(--gruen-blass);
  border-radius: 4px;
}

/* --- Druck: Admin-Bestellliste für die Küche ----------------------------
   Browser lassen Hintergründe beim Drucken weg. Ohne diese Regeln würden die
   grünen Zahl-Kacheln als weiß auf weiß gedruckt — genau die Portionssummen,
   die die Küche braucht. Darum hier alles auf Schwarz-auf-Weiß mit Rahmen. */
@media print {
  body { background: #fff; color: #000; }

  .seite {
    max-width: none;
    margin: 0;
    box-shadow: none;
    overflow: visible;
    min-height: 0;
    border-radius: 0;
  }

  /* Bedienelemente gehören nicht aufs Papier. */
  .taste-gross, .taste-klein, .taste-leise,
  .spiel-karte-aktionen, .fuss, form { display: none !important; }

  /* Kacheln und Marken: sichtbar ohne Hintergrundfarbe. */
  .zahl-kachel, .marke, .marke.offen {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000;
  }
  .zahl-kachel.leise strong, .marke.aus { color: #000 !important; }

  /* Tabellen vollständig zeigen statt seitlich abschneiden. */
  .tabelle-scroll { overflow: visible !important; }
  .tabelle { font-size: 0.85rem; }
  .tabelle th, .tabelle td { border: 1px solid #999; }
  .tabelle thead th { background: #eee !important; color: #000 !important; }

  /* Der Spielkopf-Verlauf druckt sonst als grauer Klotz. */
  .spielkopf { background: #fff !important; color: #000 !important; }
}