/* Mittagessen-Anmeldung – Erscheinungsbild.
   Mobil zuerst, ein Akzentton (gedecktes Grün), helle Karten auf ruhigem Hintergrund,
   Dark Mode über prefers-color-scheme, Tipp-Flächen mindestens 44px. Keine externen Abhängigkeiten. */

/* --- Design-Tokens --------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Akzent */
  --akzent: #2e6b4f;
  --akzent-hover: #255841;
  --akzent-kontrast: #ffffff;
  --akzent-weich: #e6f1ea;
  --akzent-weich-text: #1f5a40;
  --akzent-rand: #b4d4c3;
  --ring: rgba(46, 107, 79, 0.3);

  /* Flächen und Text */
  --hintergrund: #f4f6f4;
  --flaeche: #ffffff;
  --flaeche-2: #f6f8f6;
  --flaeche-glas: rgba(244, 246, 244, 0.86);
  --text: #1a1f1c;
  --text-leicht: #5b645f;
  --text-schwach: #8b948f;
  --rand: #e3e8e4;
  --rand-stark: #c6cec9;

  /* Zustände */
  --erfolg: #1e6b44;
  --erfolg-hell: #e3f3e9;
  --erfolg-rand: #a6d6bb;
  --hinweis: #7a4f00;
  --hinweis-hell: #fff5dc;
  --hinweis-rand: #efd48c;
  --fehler: #b3261e;
  --fehler-hell: #fdecea;
  --fehler-rand: #f0b4ae;

  /* Form */
  --radius: 16px;
  --radius-klein: 12px;
  --radius-mini: 8px;
  --abstand: 16px;
  --abstand-klein: 8px;
  --abstand-gross: 24px;
  --tipp: 44px;
  --breite: 720px;
  --leiste-hoehe: 84px;
  --dauer: 0.15s;
  --schatten: 0 1px 2px rgba(16, 24, 20, 0.04), 0 8px 24px -12px rgba(16, 24, 20, 0.14);
  --schatten-oben: 0 -6px 24px -12px rgba(16, 24, 20, 0.25);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --akzent: #6cc096;
    --akzent-hover: #86d0aa;
    --akzent-kontrast: #0e1a13;
    --akzent-weich: rgba(108, 192, 150, 0.14);
    --akzent-weich-text: #9adcb9;
    --akzent-rand: rgba(108, 192, 150, 0.42);
    --ring: rgba(108, 192, 150, 0.38);

    --hintergrund: #111514;
    --flaeche: #1a1f1d;
    --flaeche-2: #202623;
    --flaeche-glas: rgba(17, 21, 20, 0.82);
    --text: #e7ebe8;
    --text-leicht: #a1aba5;
    --text-schwach: #747e78;
    --rand: #2a312d;
    --rand-stark: #3d4641;

    --erfolg: #8fd4ad;
    --erfolg-hell: rgba(108, 192, 150, 0.12);
    --erfolg-rand: rgba(108, 192, 150, 0.35);
    --hinweis: #f0c86e;
    --hinweis-hell: rgba(240, 200, 110, 0.12);
    --hinweis-rand: rgba(240, 200, 110, 0.35);
    --fehler: #f5958e;
    --fehler-hell: rgba(245, 149, 142, 0.12);
    --fehler-rand: rgba(245, 149, 142, 0.35);

    --schatten: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
    --schatten-oben: 0 -6px 24px -12px rgba(0, 0, 0, 0.6);
  }
}

/* --- Grundlagen ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--hintergrund);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}

body.seite-start { padding-bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom, 0px)); }

a { color: var(--akzent-weich-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-mini); }

h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
strong { font-weight: 650; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Kopf ----------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--flaeche-glas);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rand);
}
.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 10px var(--abstand);
  padding-left: max(var(--abstand), env(safe-area-inset-left));
  padding-right: max(var(--abstand), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tipp);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.marke:hover { color: var(--text); }
.marke-zeichen {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--akzent);
  color: var(--akzent-kontrast);
  display: inline-grid;
  place-items: center;
}
.marke-zeichen svg { width: 20px; height: 20px; }

.sprachen {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
}
.sprache {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tipp);
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--text-leicht);
  text-decoration: none;
  transition: background var(--dauer), color var(--dauer);
}
.sprache:hover { color: var(--text); }
.sprache.aktiv { background: var(--akzent); color: var(--akzent-kontrast); }
.sprache.aktiv:hover { color: var(--akzent-kontrast); }

/* --- Inhalt --------------------------------------------------------------- */

.inhalt {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 20px var(--abstand) 32px;
  padding-left: max(var(--abstand), env(safe-area-inset-left));
  padding-right: max(var(--abstand), env(safe-area-inset-right));
}

.intro { margin: 4px 0 20px; }
.untertitel { font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; }
.hinweis { margin-top: 6px; color: var(--text-leicht); }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px var(--abstand);
  margin-bottom: 16px;
}
.karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.karte-titel { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; }
.karte-kopf .karte-titel { margin: 0; }
.karte-titel + .hinweis { margin: -6px 0 14px; font-size: 0.95rem; }
.etikett {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-schwach);
}
.leer { color: var(--text-leicht); }
.abschnitt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rand); }

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

.meldungen { margin-bottom: 16px; }
.meldung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-klein);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  margin-bottom: 8px;
  font-weight: 500;
  line-height: 1.4;
}
.meldung::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: var(--symbol) center / contain no-repeat;
  mask: var(--symbol) center / contain no-repeat;
}
.meldung-erfolg {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.3 2.3L15.5 10'/%3E%3C/svg%3E");
  background: var(--erfolg-hell);
  border-color: var(--erfolg-rand);
  color: var(--erfolg);
}
.meldung-hinweis {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.8h.01'/%3E%3C/svg%3E");
  background: var(--hinweis-hell);
  border-color: var(--hinweis-rand);
  color: var(--hinweis);
}
.meldung-fehler {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8L21 19.5H3z'/%3E%3Cpath d='M12 10v4.2'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
  background: var(--fehler-hell);
  border-color: var(--fehler-rand);
  color: var(--fehler);
}

/* --- Menü ----------------------------------------------------------------- */

.menue { margin-bottom: 16px; }
.menue-inhalt { font-size: 0.97rem; color: var(--text); }
.menue-inhalt h2 { font-size: 1.1rem; font-weight: 700; margin: 10px 0 6px; }
.menue-inhalt h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akzent-weich-text);
  margin: 14px 0 4px;
}
.menue-inhalt h2:first-child, .menue-inhalt h3:first-child { margin-top: 0; }
.menue-inhalt p { margin: 0 0 6px; }
.menue-inhalt p.mitte { text-align: center; }
.menue-inhalt p.liste { padding-left: 1.2em; position: relative; }
.menue-inhalt p.liste::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--akzent);
}
.menue-inhalt table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  max-width: 100%;
  margin: 8px 0 10px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.menue-tabelle {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 10px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.menue-tabelle table { display: table; width: 100%; margin: 0; border: 0; border-radius: 0; border-collapse: collapse; }
.menue-inhalt td {
  border-top: 1px solid var(--rand);
  border-left: 1px solid var(--rand);
  padding: 8px 10px;
  vertical-align: top;
  min-width: 110px;
}
.menue-tabelle tr:first-child td { border-top: 0; }
.menue-inhalt td:first-child { border-left: 0; }
.menue-tabelle tr:nth-child(even) td { background: var(--flaeche-2); }

.aufklapp summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--tipp);
  padding: 8px 0;
  cursor: pointer;
  color: var(--akzent-weich-text);
  font-weight: 650;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp summary::after {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dauer);
}
.aufklapp[open] summary::after { transform: rotate(180deg); }
.menue-details .menue-inhalt { margin-top: 6px; }

.link { font-weight: 650; text-decoration: none; }
.link:hover { text-decoration: underline; }
.menue-aktion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tipp);
  font-size: 0.95rem;
}
.menue-aktion svg { width: 16px; height: 16px; }

/* --- Tages-Chips ---------------------------------------------------------- */

.chips {
  display: grid;
  grid-template-columns: repeat(5, auto); /* Spalten nach Inhalt, Rest gleichmäßig verteilt */
  gap: 5px;
  overflow-x: auto;
}
.chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 60px;
  padding: 8px 2px;
  border: 1.5px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  transition: background var(--dauer), border-color var(--dauer), color var(--dauer), transform 0.08s, box-shadow var(--dauer);
}
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: inherit;
}
.chip-tag { font-weight: 700; font-size: 1rem; line-height: 1.15; }
.chip-datum { font-size: 0.78rem; font-weight: 500; line-height: 1.15; color: var(--text-leicht); font-variant-numeric: tabular-nums; }
.chip-zusatz {
  font-size: 0.64rem;
  font-weight: 650;
  line-height: 1.1;
  margin-top: 3px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--akzent-weich-text);
}
.chip:hover { border-color: var(--akzent); }
.chip:active { transform: scale(0.97); }
.chip-heute { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }

/* Ausgewählt: Klasse per JS (Rückfall) und :has() (ohne JS) – getrennte Regeln, damit ältere Browser die Klasse behalten. */
.chip.chip-gewaehlt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-kontrast); box-shadow: none; }
.chip.chip-gewaehlt .chip-datum, .chip.chip-gewaehlt .chip-zusatz { color: var(--akzent-kontrast); opacity: 0.85; }
.chip:has(input:checked) { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-kontrast); box-shadow: none; }
.chip:has(input:checked) .chip-datum, .chip:has(input:checked) .chip-zusatz { color: var(--akzent-kontrast); opacity: 0.85; }

/* Fokus: :has(:focus-visible) wo verfügbar, sonst :focus-within. */
.chip:focus-within { outline: 3px solid var(--ring); outline-offset: 2px; }
@supports selector(:has(a)) {
  .chip:focus-within { outline: none; }
  .chip:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
}

.chip-aus {
  background: var(--flaeche-2);
  border-color: var(--rand);
  border-style: dashed;
  color: var(--text-schwach);
  cursor: not-allowed;
}
.chip-aus .chip-datum, .chip-aus .chip-zusatz { color: var(--text-schwach); }
.chip-aus:hover { border-color: var(--rand); }
.chip-aus:active { transform: none; }
.chip-aus.chip-heute { box-shadow: none; border-color: var(--rand-stark); }

/* --- Felder --------------------------------------------------------------- */

.feld { display: block; margin-bottom: 14px; }
.feld-titel, .feld > label {
  display: block;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--text-leicht);
  margin-bottom: 6px;
}
.feld .optional { font-weight: 400; font-style: normal; color: var(--text-schwach); }
.feld input:not([type="file"]), .feld select, .eingabe {
  display: block;
  width: 100%;
  font: inherit;
  padding: 11px 14px;
  border: 1.5px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--text);
  min-height: 48px;
  transition: border-color var(--dauer), box-shadow var(--dauer);
}
.feld input::placeholder { color: var(--text-schwach); }
.feld input:focus, .feld select:focus, .eingabe:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px var(--ring);
}
.feld select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b746f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.feld input[type="file"] {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-leicht);
  padding: 8px;
  min-height: 48px;
  border: 1.5px dashed var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--flaeche-2);
}
.feld input[type="file"]:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px var(--ring); }
.feld input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--akzent-weich-text);
  background: var(--akzent-weich);
  border: 0;
  border-radius: var(--radius-mini);
  padding: 7px 12px;
  margin-right: 10px;
  cursor: pointer;
}
.feld-reihe { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 480px) {
  .feld-reihe { grid-template-columns: 180px 1fr; }
}

/* Zahl mit −/+ */
.stepper {
  display: grid;
  grid-template-columns: var(--tipp) 1fr var(--tipp);
  align-items: stretch;
  border: 1.5px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  overflow: hidden;
  transition: border-color var(--dauer), box-shadow var(--dauer);
}
.stepper:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--ring); }
.feld .stepper input {
  border: 0;
  border-radius: 0;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.feld .stepper input:focus { box-shadow: none; }
.stepper-knopf {
  font: inherit;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--akzent-weich-text);
  background: var(--flaeche-2);
  border: 0;
  cursor: pointer;
  min-height: 46px;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dauer);
}
.stepper-knopf:hover { background: var(--akzent-weich); }
.stepper-knopf:active { background: var(--akzent-rand); }
.stepper-knopf:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; border-radius: 0; }

/* --- Knöpfe --------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  padding: 10px 18px;
  min-height: 48px;
  border-radius: var(--radius-klein);
  border: 1.5px solid var(--akzent-rand);
  background: var(--akzent-weich);
  color: var(--akzent-weich-text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dauer), border-color var(--dauer), color var(--dauer), transform 0.08s;
}
.knopf:hover { background: var(--akzent-rand); color: var(--akzent-weich-text); }
.knopf:active { transform: scale(0.98); }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.knopf-haupt { background: var(--akzent); color: var(--akzent-kontrast); border-color: var(--akzent); }
.knopf-haupt:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); color: var(--akzent-kontrast); }
.knopf-leicht { background: var(--flaeche); border-color: var(--rand-stark); color: var(--text); }
.knopf-leicht:hover { background: var(--flaeche-2); color: var(--text); }
.knopf-gefahr { background: var(--flaeche); border-color: var(--fehler-rand); color: var(--fehler); }
.knopf-gefahr:hover { background: var(--fehler-hell); color: var(--fehler); }
.knopf-klein { padding: 6px 14px; min-height: var(--tipp); font-size: 0.92rem; }
.knopf-breit { width: 100%; }
.formular .knopf { margin-top: 2px; }

/* --- Feste Leiste unten ---------------------------------------------------- */

.leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--flaeche-glas);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--rand);
  box-shadow: var(--schatten-oben);
  padding: 12px var(--abstand) calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--abstand), env(safe-area-inset-left));
  padding-right: max(var(--abstand), env(safe-area-inset-right));
}
.leiste-innen { max-width: var(--breite); margin: 0 auto; }
.leiste .knopf { width: 100%; font-size: 1.05rem; min-height: 54px; }

/* --- Meine Anmeldungen ------------------------------------------------------ */

.meine-liste { list-style: none; margin: 0; padding: 0; }
.meine-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--rand);
}
.meine-liste li:first-child { border-top: 0; padding-top: 0; }
.meine-liste li:last-child { padding-bottom: 0; }
.meine-tag { font-weight: 700; }
.meine-details { color: var(--text-leicht); font-size: 0.95rem; }
.meine-meldung { margin: 12px 0 0; }

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

.fuss {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--abstand) 28px;
  padding-left: max(var(--abstand), env(safe-area-inset-left));
  padding-right: max(var(--abstand), env(safe-area-inset-right));
  color: var(--text-leicht);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
}
.fuss a { color: var(--text-leicht); display: inline-flex; align-items: center; min-height: var(--tipp); }
.fuss a:hover { color: var(--akzent-weich-text); }

/* --- Küche ------------------------------------------------------------------ */

.kueche-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}
.kueche-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.kueche-aktionen form { margin: 0; }

.kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.kennzahl {
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kennzahl-zahl {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--akzent-weich-text);
  font-variant-numeric: tabular-nums;
}
.kennzahl-haupt .kennzahl-zahl { color: var(--akzent); }
.kennzahl-text { font-size: 0.82rem; font-weight: 650; color: var(--text-leicht); }

.eintraege { list-style: none; margin: 0; padding: 0; }
.eintrag {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--rand);
}
.eintraege > .eintrag:first-child { border-top: 0; }
.eintrag form { margin: 0; flex-shrink: 0; }
.eintrag-text { min-width: 0; }
.eintrag-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.eintrag-kopf strong { font-size: 1.02rem; overflow-wrap: anywhere; }
.eintrag-bemerkung { color: var(--text-leicht); font-size: 0.95rem; margin-top: 2px; overflow-wrap: anywhere; }
.eintrag-zeit { color: var(--text-schwach); font-size: 0.82rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.eintraege-klein { margin-top: 6px; }
.eintraege-klein .eintrag { padding: 8px 0; }

.pille {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--akzent-weich);
  color: var(--akzent-weich-text);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pille-kueche { background: var(--hinweis-hell); color: var(--hinweis); border: 1px solid var(--hinweis-rand); }

.tagesmail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-klein);
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
}
.tagesmail-status { margin: 0; color: var(--text-leicht); font-size: 0.93rem; display: flex; gap: 8px; align-items: flex-start; }
.tagesmail-status svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--text-schwach); }
.tagesmail form { margin: 0; }

.tabelle-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rand); border-radius: var(--radius-klein); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.tabelle th, .tabelle td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--rand); vertical-align: top; }
.tabelle thead th { border-top: 0; background: var(--flaeche-2); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-schwach); font-weight: 700; }
.tabelle .zahl { text-align: right; width: 72px; font-variant-numeric: tabular-nums; }
.tabelle td.zahl { font-size: 1.15rem; font-weight: 750; color: var(--akzent-weich-text); }
.tabelle td.zahl.null { color: var(--text-schwach); font-weight: 500; }
.tabelle .nowrap { white-space: nowrap; }
.tabelle tbody tr:hover td { background: var(--flaeche-2); }
.namen summary { min-height: var(--tipp); padding: 2px 0; }

.menue-woche { padding: 14px 0; border-top: 1px solid var(--rand); }
.menue-woche:first-of-type { border-top: 0; padding-top: 0; }
.menue-woche:last-of-type { padding-bottom: 0; }
.menue-woche h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.menue-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-klein);
  background: var(--erfolg-hell);
  border: 1px solid var(--erfolg-rand);
}
.menue-status-text { display: flex; align-items: center; gap: 10px; min-width: 0; }
.menue-status-text svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--erfolg); }
.menue-status .link { overflow-wrap: anywhere; }
.menue-status .eintrag-zeit { display: block; margin-top: 0; }
.menue-status form { margin: 0; }
.menue-woche .leer { font-size: 0.95rem; margin-bottom: 8px; }
.upload { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: end; }
.upload .feld { margin: 0; }
.upload .knopf { min-height: 48px; }
@media (min-width: 480px) {
  .upload { grid-template-columns: 1fr auto; }
}

.login { max-width: 440px; margin: 24px auto; }
.login-zeichen {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--akzent-weich);
  color: var(--akzent-weich-text);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.login-zeichen svg { width: 24px; height: 24px; }
.login .karte-titel { margin-bottom: 16px; }
.login .meldung { margin-bottom: 14px; }
.zurueck { margin: 18px 0 0; font-size: 0.95rem; }
.zurueck a { display: inline-flex; align-items: center; min-height: var(--tipp); }

/* --- Küche: Anwesenheit (drei Kennzahlen, Haken, letzte Werktage) ------------------- */

/* Drei gleichwertige Kacheln: gleiche Größe, gleiche Schrift, je eine eigene Farbe (Grün, Erfolg, Fehler)
   als Zahl und als schmaler Streifen oben, damit die Zuordnung auch bei 0 erkennbar bleibt. */
.kennzahlen-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kennzahlen-drei .kennzahl {
  --kachel: var(--akzent);
  padding: 12px 6px 10px;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  border-top: 3px solid var(--kachel);
  min-width: 0;
}
.kennzahlen-drei .kennzahl-zahl { font-size: 2.2rem; color: var(--kachel); }
.kennzahlen-drei .kennzahl-haupt .kennzahl-zahl { color: var(--kachel); }
/* Beschriftung auf schmalen Handys etwas kleiner, Silbentrennung statt Bruch mitten im Wort („Unangemeldet"). */
.kennzahlen-drei .kennzahl-text {
  font-size: clamp(0.68rem, 3vw, 0.78rem);
  line-height: 1.25;
  margin-top: 2px;
  color: var(--text-leicht);
  -webkit-hyphens: auto;
  hyphens: auto;
}
.kennzahl-klein { font-size: 0.74rem; color: var(--text-schwach); font-variant-numeric: tabular-nums; }
.kennzahl-gekommen { --kachel: var(--erfolg); }
.kennzahl-unangemeldet { --kachel: var(--fehler); }

/* Haken „gekommen": dezent grün, mit Uhrzeit; ohne Rahmen, damit er neben den Personen nicht schreit. */
.pille-gekommen { gap: 5px; background: var(--erfolg-hell); color: var(--erfolg); }
.pille-gekommen svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Vier Spalten auf 300 px: Datum so schmal wie nötig, Zahlen teilen sich den Rest, Kopfzeile darf mit
   Silbentrennung umbrechen (Handy-Browser trennen „Unange-meldet"); ohne Trennwörterbuch bleibt das Wort
   ganz und der Rahmen scrollt seitlich, statt dass Buchstaben abgeschnitten werden. */
.tabelle-letzte .zahl { width: 22%; }
.tabelle-letzte th, .tabelle-letzte td { padding-left: 8px; padding-right: 8px; }
.tabelle-letzte thead th.zahl {
  white-space: normal;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
  vertical-align: bottom;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.tabelle-letzte td.nowrap { font-weight: 600; width: 1%; }
.tabelle-letzte td.zahl { font-size: 1.05rem; }
.tabelle-letzte td.zahl-gekommen { color: var(--erfolg); }
.tabelle-letzte td.zahl-unangemeldet { color: var(--fehler); }
.tabelle-letzte td.zahl.null { color: var(--text-schwach); }

/* --- QR-Code fürs Handy (/handy) und Übernahme (/uebernehmen) ----------------------- */

.meine-handy { margin: 14px 0 0; }
.meine-handy .knopf svg { width: 18px; height: 18px; }
.handy, .uebernehmen { max-width: 440px; margin: 16px auto; }
.handy .karte-titel { text-align: center; }
.qr-rahmen {
  width: min(100%, 340px);
  margin: 4px auto 0;
  padding: 14px;
  background: #ffffff; /* immer hell, damit der Code auch im Dark Mode lesbar bleibt */
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.qr-rahmen svg { display: block; width: 100%; height: auto; }
.handy-hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--akzent-weich-text);
}
.handy-hinweis svg { width: 22px; height: 22px; flex-shrink: 0; }
.handy-erklaerung { margin: 6px auto 0; max-width: 34ch; text-align: center; font-size: 0.92rem; color: var(--text-leicht); }
.handy-liste { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rand); }
.handy-liste li { justify-content: flex-start; }
.handy .zurueck { text-align: center; }
.uebernehmen-laedt { color: var(--text-leicht); }
.uebernehmen .zurueck .knopf { margin-top: 4px; }

/* --- Anwesenheit (/da): ganzseitig grün, rot oder grau ----------------------------- */

:root {
  --da-gruen: #2e6b4f;
  --da-rot: #b3261e;
  --da-grau: #5b645f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --da-gruen: #1f5a3f;
    --da-rot: #8f231c;
    --da-grau: #3d4641;
  }
}

body.seite-da { display: flex; flex-direction: column; transition: background-color 0.25s; }
body.seite-da .inhalt {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 12px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
body.seite-da .fuss { display: none; }

/* Farbfläche: die Tokens werden am body überschrieben, damit auch Kopf und Sprachumschalter mitgehen.
   Alle Weißtöne halten auf Grün, Rot und Grau mindestens Kontrast 4,5:1 (Schwach: 0,82). */
body.da-gruen, body.da-rot, body.da-grau {
  --text: #ffffff;
  --text-leicht: rgba(255, 255, 255, 0.9);
  --text-schwach: rgba(255, 255, 255, 0.82);
  --flaeche: rgba(255, 255, 255, 0.14);
  --flaeche-glas: transparent;
  --rand: rgba(255, 255, 255, 0.22);
  --akzent: #ffffff;
  --akzent-hover: #ffffff;
  --akzent-weich: rgba(255, 255, 255, 0.16);
  --akzent-weich-text: #ffffff;
  --akzent-rand: rgba(255, 255, 255, 0.4);
  --ring: rgba(255, 255, 255, 0.55);
}
body.da-gruen { --hintergrund: var(--da-gruen); --akzent-kontrast: var(--da-gruen); }
body.da-rot { --hintergrund: var(--da-rot); --akzent-kontrast: var(--da-rot); }
body.da-grau { --hintergrund: var(--da-grau); --akzent-kontrast: var(--da-grau); }
body.da-gruen .kopf, body.da-rot .kopf, body.da-grau .kopf { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.da-gruen .marke-zeichen, body.da-rot .marke-zeichen, body.da-grau .marke-zeichen { background: rgba(255, 255, 255, 0.18); color: #ffffff; }

.da { text-align: center; padding: 8px 0; }
.da-symbol {
  width: 148px;
  height: 148px;
  margin: 0 auto 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.08);
}
.da-symbol svg { width: 96px; height: 96px; display: none; }
.da-laedt .da-symbol { background: var(--flaeche-2); color: var(--text-schwach); box-shadow: none; }
.da-laedt .da-symbol-punkte { display: block; }
.da-laedt .da-symbol-punkte circle { animation: da-punkt 1.2s ease-in-out infinite; }
.da-laedt .da-symbol-punkte circle:nth-child(2) { animation-delay: 0.2s; }
.da-laedt .da-symbol-punkte circle:nth-child(3) { animation-delay: 0.4s; }
@keyframes da-punkt {
  0%, 60%, 100% { opacity: 0.35; }
  30% { opacity: 1; }
}
.da-gruen .da-symbol-haken { display: block; }
.da-rot .da-symbol-ausruf { display: block; }
.da-grau .da-symbol-uhr { display: block; }
.da-fehler .da-symbol { background: var(--hinweis-hell); color: var(--hinweis); box-shadow: none; }
.da-fehler .da-symbol-ausruf { display: block; }

/* Ein Block je bestätigter Anmeldung: Gruß klein, Name groß, Personen als Plakette. */
.da-eintrag + .da-eintrag { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.da-gruss { font-size: 1.2rem; font-weight: 600; color: var(--text-leicht); }
.da-name {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  margin-top: 2px;
}
.da-personen {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 22px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.32);
  font-size: 1.3rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--text);
}
.da-personen-zahl { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

.da-titel { font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.da-titel-lang { font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; max-width: 24ch; margin-left: auto; margin-right: auto; }
.da-text { font-size: 1.3rem; font-weight: 500; margin: 10px auto 0; max-width: 30ch; color: var(--text-leicht); }
.da-klein { font-size: 1.05rem; font-weight: 500; margin-top: 10px; color: var(--text-schwach); font-variant-numeric: tabular-nums; }
.da-appetit { margin-top: 30px; font-size: 1.6rem; font-weight: 750; color: var(--text); }
.da-laedt .da-titel { color: var(--text-leicht); font-weight: 600; }
.da-knopf { margin-top: 28px; font-size: 1.05rem; min-height: 54px; padding: 12px 26px; }
.da-gruen .da-knopf, .da-rot .da-knopf, .da-grau .da-knopf {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--akzent-kontrast);
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.45);
}
.da-gruen .da-knopf:hover, .da-rot .da-knopf:hover, .da-grau .da-knopf:hover { background: rgba(255, 255, 255, 0.9); }
.da-gruen .da-knopf:focus-visible, .da-rot .da-knopf:focus-visible, .da-grau .da-knopf:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* --- Größere Bildschirme ---------------------------------------------------- */

@media (min-width: 720px) {
  body { font-size: 16px; }
  .inhalt { padding-top: 32px; }
  .karte { padding: 24px; margin-bottom: 20px; }
  .untertitel { font-size: 1.9rem; }
  .chips { gap: 8px; }
  .chip { min-height: 64px; }
  .kennzahl-zahl { font-size: 3.2rem; }
  .kennzahlen-drei .kennzahl-zahl { font-size: 2.8rem; }
  .tabelle .zahl { width: 110px; }
  .leiste .knopf { max-width: 360px; margin-left: auto; display: flex; }
  .da-symbol { width: 176px; height: 176px; }
  .da-symbol svg { width: 112px; height: 112px; }
  .da-titel { font-size: 2.6rem; }
  .da-titel-lang { font-size: 1.8rem; }
  .da-name { font-size: 3.2rem; }
  .da-gruss { font-size: 1.4rem; }
  .da-personen { font-size: 1.5rem; padding: 10px 28px 11px; }
  .da-personen-zahl { font-size: 2.4rem; }
  .da-text { font-size: 1.5rem; }
  .da-appetit { font-size: 1.9rem; }
}

/* --- Bewegung reduzieren ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}