/* Einkauf & Rezepte — Gestaltung
   Grundsatz: grosse Flaechen, einhaendig bedienbar, hoher Kontrast.
   Alle Groessen in rem, damit die iPhone-Textgroesse wirkt. */

:root {
  /* Farben */
  --gruen: #0f7a46;
  --gruen-auf: #ffffff;        /* Text auf gruener Flaeche */
  --gruen-flaeche: #e4f2ea;
  --grund: #f2f2f7;
  --karte: #ffffff;
  --karte-rand: rgba(0, 0, 0, 0);
  --text: #1c1c1e;
  --text-2: #6c6c72;
  --text-3: #a5a5aa;
  --linie: #e4e4e9;
  --rot: #c0392b;
  --rot-flaeche: #fceceb;
  --gelb: #f0a500;
  --schatten: 0 1px 2px rgba(0, 0, 0, .05);

  /* Masse */
  --kopf-h: 3.25rem;
  --nav-h: 3.5rem;
  --radius: 0.75rem;
  --radius-gross: 1rem;
  --rand: 0.875rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gruen: #43d17f;
    --gruen-auf: #062616;
    --gruen-flaeche: #15301f;
    --grund: #000000;
    --karte: #1c1c1e;
    --karte-rand: #2c2c2e;
    --text: #ffffff;
    --text-2: #99999f;
    --text-3: #6c6c72;
    --linie: #2c2c2e;
    --rot: #ff6b61;
    --rot-flaeche: #2b1512;
    --gelb: #ffc233;
    --schatten: none;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--grund);
  padding-top: calc(var(--kopf-h) + env(safe-area-inset-top));
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

svg { display: block; flex: none; }

:focus-visible { outline: 2.5px solid var(--gruen); outline-offset: 2px; border-radius: 4px; }

/* ---------------- Kopfzeile ---------------- */

#kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--kopf-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 0.375rem 0;
  background: color-mix(in srgb, var(--karte) 85%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 0.5px solid var(--linie);
}

/* Der Titel liegt frei ueber der Leiste und ist echt mittig — so wie in
   iOS-Apps. Der Innenabstand haelt links und rechts Platz fuer die Knoepfe
   frei, damit sich nichts ueberlappt; zu lange Titel bekommen "…". */
#kopf-titel {
  position: absolute;
  left: 0; right: 0;
  top: env(safe-area-inset-top);
  height: var(--kopf-h);
  line-height: var(--kopf-h);
  margin: 0;
  padding: 0 7rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity .18s;
}
/* Steht der Name schon gross im Inhalt, bleibt der Kopf leer, bis man
   darueber hinaus scrollt. Spart Gedraenge in der Leiste. */
#kopf-titel.verborgen { opacity: 0; }

#kopf-links, #kopf-rechts { display: flex; flex: 0 1 auto; min-width: 0; max-width: 45%; }
#kopf-rechts { justify-content: flex-end; }
#kopf button { overflow: hidden; }
#kopf button > :not(svg) { overflow: hidden; text-overflow: ellipsis; }

#kopf button {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  background: none;
  border: 0;
  color: var(--gruen);
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
  white-space: nowrap;
}
#kopf button svg { width: 1.375rem; height: 1.375rem; }
#kopf button:active { opacity: .5; }

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

#app { padding: 0.5rem var(--rand) 0; max-width: 46rem; margin: 0 auto; }

h2 {
  font-size: 1.3125rem;
  font-weight: 680;
  letter-spacing: -0.015em;
  margin: 1.5rem 0 0.5rem;
}
h2:first-child { margin-top: 0.25rem; }

.karte {
  background: var(--karte);
  border: 0.5px solid var(--karte-rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  overflow: hidden;
  margin-bottom: 1rem;
}

.hinweis {
  display: flex;
  gap: 0.625rem;
  background: var(--gruen-flaeche);
  color: var(--text);
  border-radius: var(--radius-gross);
  padding: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.hinweis svg { width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--gruen); }

/* Leerzustand */
.lade { color: var(--text-2); text-align: center; padding: 3rem 1.5rem; }
.leer {
  color: var(--text-2);
  text-align: center;
  padding: 3rem 1.25rem;
  line-height: 1.55;
}
.leer svg { width: 3rem; height: 3rem; margin: 0 auto 1rem; color: var(--text-3); }
.leer strong {
  display: block;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: .35rem;
}
.leer .knopf { margin-top: 1.5rem; }

/* ---------------- Fortschritt der Einkaufsliste ---------------- */

.stand {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .25rem .125rem .5rem;
}
.stand-text { font-size: 0.875rem; color: var(--text-2); flex: 1; }
.stand-text b { color: var(--text); font-weight: 650; }
.text-knopf {
  background: none;
  border: 0;
  padding: .35rem .25rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--gruen);
  cursor: pointer;
  white-space: nowrap;
}
.text-knopf:active { opacity: .5; }

.fortschritt {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--linie);
  overflow: hidden;
  margin: 0 .125rem 1.25rem;
}
.fortschritt i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gruen);
  transition: width .3s ease;
}

/* ---------------- Bereichsüberschrift ---------------- */

.bereich-kopf {
  position: sticky;
  top: calc(var(--kopf-h) + env(safe-area-inset-top));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.125rem;
  background: var(--grund);
  border: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.bereich-marke {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  background: var(--karte);
  border: 0.5px solid var(--linie);
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--text-2);
}
.bereich-marke svg { width: 1rem; height: 1rem; }

/* Sinnbild einer Zutat in den Listenzeilen – etwas grösser, damit man die
   Liste im Laden überfliegen kann. */
.marke-gross {
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  font-size: 1.0625rem;
  background: var(--grund);
}
.bereich-kopf .zahl {
  margin-left: auto;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.bereich-kopf .klapp { width: 1rem; height: 1rem; transition: transform .2s; color: var(--text-3); }
.bereich-kopf.zu .klapp { transform: rotate(-90deg); }
.bereich-kopf.fertig { color: var(--gruen); }
.bereich-kopf.fertig .zahl { color: var(--gruen); }

/* ---------------- Zeilen ---------------- */

.zeile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3.75rem;
  padding: 0.625rem 0.875rem;
  background: none;
  border: 0;
  border-top: 0.5px solid var(--linie);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.karte > .zeile:first-child { border-top: 0; }
.zeile:active { background: color-mix(in srgb, var(--gruen) 8%, transparent); }

/* Wischen zum Löschen: der Löschknopf liegt unter der Zeile und wird
   freigelegt, wenn die Zeile nach links geschoben wird. */
.zeile-huelle { position: relative; overflow: hidden; }
.karte > .zeile-huelle:first-child > .zeile { border-top: 0; }
.zeile-huelle > .zeile {
  position: relative;
  z-index: 1;
  background: var(--karte);
  /* Hoch und runter macht der Browser, quer machen wir selbst */
  touch-action: pan-y;
}
.zeile-huelle > .zeile:active { background: color-mix(in srgb, var(--gruen) 8%, var(--karte)); }
.wisch-weg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  border: 0;
  background: var(--rot);
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}
.wisch-weg svg { width: 1.25rem; height: 1.25rem; }
@media (prefers-color-scheme: dark) { .wisch-weg { color: #2b1512; } }
.zeile.starr { cursor: default; }
.zeile.starr:active { background: none; }

.zeile-inhalt { flex: 1; min-width: 0; }
.zeile-titel {
  display: block;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.zeile-unten {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-2);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zeile-menge {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.pfeil { width: 1.125rem; height: 1.125rem; color: var(--text-3); }

/* Abhak-Kreis */
.kreis {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 2px solid var(--text-3);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.kreis svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 2.75; }
.erledigt .kreis {
  background: var(--gruen);
  border-color: var(--gruen);
  color: var(--gruen-auf);
}
.erledigt .zeile-titel, .erledigt .zeile-menge { text-decoration: line-through; }
/* Nur den Inhalt blass machen, nicht die Zeile selbst: sonst scheint der
   Löschknopf, der darunter liegt, durch die abgehakte Zeile hindurch. */
.erledigt .kreis,
.erledigt .bereich-marke,
.erledigt .zeile-inhalt,
.erledigt .zeile-menge { opacity: .45; }

/* Löschknopf */
.weg {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 0;
  background: var(--rot-flaeche);
  color: var(--rot);
  cursor: pointer;
  touch-action: manipulation;
}
.weg svg { width: 1.125rem; height: 1.125rem; }
.weg:active { filter: brightness(.93); }

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 3rem;
  padding: 0.75rem 1.125rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--gruen);
  color: var(--gruen-auf);
  font: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .1s, filter .1s;
}
.knopf svg { width: 1.25rem; height: 1.25rem; }
.knopf:active { transform: scale(.975); filter: brightness(.93); }
.knopf.breit { width: 100%; }
.knopf.zweit {
  background: var(--gruen-flaeche);
  color: var(--gruen);
}
.knopf.leise {
  background: var(--karte);
  color: var(--text);
  box-shadow: inset 0 0 0 0.5px var(--linie);
}
.knopf.gefahr { background: var(--rot-flaeche); color: var(--rot); }
.knopf:disabled { opacity: .35; }
.knopf:disabled:active { transform: none; }

.knopf-reihe { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.knopf-reihe > * { flex: 1 1 8.5rem; }

/* Schwebender Balken unten */
.balken {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  z-index: 15;
  padding: 0.5rem var(--rand);
  background: color-mix(in srgb, var(--karte) 90%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 0.5px solid var(--linie);
}
.balken .knopf { width: 100%; max-width: 46rem; margin: 0 auto; display: flex; }

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

label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 1.125rem 0 0.375rem;
}

input[type=text], input[type=date], input[type=search], input[type=file], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1.0625rem; /* >= 16px: sonst zoomt Safari beim Antippen hinein */
  padding: 0.7rem 0.75rem;
  border: 0.5px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
  min-height: 3rem;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
textarea { min-height: 9rem; line-height: 1.55; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--gruen);
  outline-offset: -1px;
  border-color: transparent;
}

select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: right 1rem center, right 0.7rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.suche { margin-bottom: 0.75rem; }

/* Zutatenzeile im Rezept-Formular:
   Name oben über die ganze Breite, Menge und Einheit darunter. */
.zutat-zeile {
  display: grid;
  grid-template-columns: 5.5rem 8.5rem 1fr 2.75rem;
  grid-template-areas:
    "name  name    name    weg"
    "menge einheit einheit .";
  gap: 0.375rem;
  align-items: center;
  padding: 0.5rem 0;
  border-top: 0.5px solid var(--linie);
}
.zutat-zeile:first-child { border-top: 0; }
.zutat-zeile input, .zutat-zeile select { min-height: 2.875rem; padding: 0.5rem 0.625rem; }
.zutat-zeile .menge { grid-area: menge; text-align: right; font-variant-numeric: tabular-nums; }
.zutat-zeile select { grid-area: einheit; }
.zutat-zeile input[list] { grid-area: name; }
.zutat-zeile .weg { grid-area: weg; }

/* Portionen-Regler */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  background: var(--gruen-flaeche);
  border-radius: 999px;
  padding: 0.1875rem;
}
.stepper button {
  display: grid;
  place-items: center;
  width: 2.375rem; height: 2.375rem;
  border: 0; border-radius: 50%;
  background: none; color: var(--gruen);
  cursor: pointer; touch-action: manipulation;
}
.stepper button svg { width: 1.125rem; height: 1.125rem; stroke-width: 2.25; }
.stepper button:active { background: color-mix(in srgb, var(--gruen) 18%, transparent); }
.stepper button:disabled { opacity: .3; }
.stepper .wert {
  min-width: 2.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

/* Sterne */
.sterne { display: inline-flex; align-items: center; gap: 0.0625rem; }
.sterne button { background: none; border: 0; padding: 0.25rem; cursor: pointer; color: var(--text-3); }
.sterne button svg { width: 1.5rem; height: 1.5rem; }
.sterne button.an { color: var(--gelb); }
.sterne-fest { display: inline-flex; gap: 0.0625rem; color: var(--gelb); }
.sterne-fest svg { width: 0.875rem; height: 0.875rem; }
.sterne-fest .aus { color: var(--linie); }

/* Begründungen an Vorschlägen */
.gruende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.grund {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  background: var(--gruen-flaeche);
  color: var(--gruen);
  white-space: nowrap;
}

/* Marken (Tags) */
.marken { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.625rem 0 0; }
.marke {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--gruen-flaeche);
  color: var(--gruen);
  font-weight: 650;
}

/* Auswahlknopf beim Planen */
.waehlen {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--linie);
  background: var(--karte);
  color: var(--text-3);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s, border-color .15s, color .15s;
}
.waehlen:active { background: var(--gruen-flaeche); }
.waehlen svg { width: 1.125rem; height: 1.125rem; stroke-width: 2.5; }
.waehlen.an { background: var(--gruen); border-color: var(--gruen); color: var(--gruen-auf); }

/* Sortierknöpfe für die Ladenbereiche */
.ordnen { display: flex; gap: 0.25rem; flex: none; }
.ordnen button {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: 0.625rem;
  background: var(--gruen-flaeche); color: var(--gruen);
  cursor: pointer; touch-action: manipulation;
}
.ordnen button svg { width: 1.125rem; height: 1.125rem; stroke-width: 2.25; }
.ordnen button:disabled { background: var(--grund); color: var(--text-3); opacity: .5; }
.ordnen button:active:not(:disabled) { filter: brightness(.93); }

.zubereitung { white-space: pre-wrap; line-height: 1.65; padding: 0.9375rem; }

/* ---------------- Kochmodus ---------------- */

/* Beim Kochen verschwindet die untere Leiste: man kocht, man navigiert nicht. */
body.kochmodus { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
body.kochmodus #nav { display: none; }
body.kochmodus .balken { bottom: 0; }

.koch-punkte {
  display: flex;
  gap: 0.25rem;
  margin: 0.375rem 0.125rem 0.75rem;
}
.koch-punkt {
  flex: 1;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--linie);
  transition: background-color .25s;
}
.koch-punkt.fertig { background: color-mix(in srgb, var(--gruen) 45%, var(--linie)); }
.koch-punkt.jetzt { background: var(--gruen); }

.koch-zaehler {
  margin: 0 .125rem .5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text-2);
}

.koch-karte { padding: 1rem 1.125rem 1.125rem; }
.koch-titel {
  margin: 0 0 .625rem;
  font-size: 1.375rem;
  font-weight: 680;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.koch-text {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.6;
  white-space: pre-wrap;
}
.koch-hinweis {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius);
  background: var(--gruen-flaeche);
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.koch-hinweis svg { width: 1.125rem; height: 1.125rem; margin-top: .15rem; color: var(--gruen); flex: none; }

/* Kurze Schritte sollen nicht in einer halbleeren Karte hängen */
.koch-karte {
  min-height: 38vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Timer */
.timer-box { margin: 0 0 1rem; }
.timer-knopf, .timer-lauf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--gruen-flaeche);
  color: var(--gruen);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.timer-knopf svg, .timer-lauf svg { width: 1.25rem; height: 1.25rem; flex: none; }
.timer-lauf { cursor: default; }
.timer-zeit { flex: 1; font-variant-numeric: tabular-nums; font-size: 1.25rem; letter-spacing: -0.01em; }
.timer-lauf.aus { background: var(--rot-flaeche); color: var(--rot); }
.timer-stop {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: color-mix(in srgb, currentColor 15%, transparent);
  color: inherit; cursor: pointer;
}
.timer-stop svg { width: 1rem; height: 1rem; stroke-width: 2.5; }

/* "Für: Bowl · Chili" über der Einkaufsliste */
.wofuer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: -0.5rem 0 1rem;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: inset 0 0 0 0.5px var(--linie);
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}
.wofuer > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wofuer svg:first-child { width: 1.125rem; height: 1.125rem; color: var(--gruen); flex: none; }

/* Schnelleingabe für den normalen Einkauf */
.schnell-reihe { display: flex; gap: 0.375rem; }
.schnell-reihe input { flex: 1; }
.schnell-plus {
  flex: none; display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 0; border-radius: var(--radius);
  background: var(--gruen); color: var(--gruen-auf); cursor: pointer;
}
.schnell-plus svg { width: 1.375rem; height: 1.375rem; stroke-width: 2.25; }
.schnell-plus:active { filter: brightness(.93); }

.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip {
  min-height: 2.375rem;
  padding: 0.4375rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--karte);
  box-shadow: inset 0 0 0 0.5px var(--linie);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}
.chip:active { background: var(--gruen-flaeche); }

.koch-balken { display: flex; gap: 0.5rem; }
.koch-balken .knopf { width: auto; margin: 0; }
.koch-balken .knopf.leise { flex: 0 0 8rem; }
.koch-balken .knopf:not(.leise) { flex: 1; }

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

#nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--karte) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 0.5px solid var(--linie);
}

#nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  text-decoration: none;
  color: var(--text-2);
  font-size: 0.625rem;
  font-weight: 550;
  letter-spacing: 0.005em;
  -webkit-user-select: none;
  user-select: none;
}
#nav a svg { width: 1.5rem; height: 1.5rem; }
#nav a.an { color: var(--gruen); }
#nav a:active { opacity: .55; }

.nav-symbol { position: relative; display: block; }
.punkt {
  position: absolute;
  top: -0.3125rem;
  left: 0.9375rem;
  min-width: 1.0625rem;
  height: 1.0625rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--rot);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.0625rem;
  text-align: center;
}
@media (prefers-color-scheme: dark) { .punkt { color: #1c1c1e; } }

/* ---------------- Toast & Modal ---------------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem);
  transform: translate(-50%, 1.25rem);
  z-index: 40;
  max-width: min(92vw, 26rem);
  padding: 0.75rem 1.125rem;
  border-radius: 999px;
  background: #1c1c1e;
  color: #fafafa;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
@media (prefers-color-scheme: dark) { #toast { background: #f2f2f7; color: #1c1c1e; } }
#toast.an { opacity: 1; transform: translate(-50%, 0); }

.modal-grund {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: einblenden .18s ease;
}
.modal {
  background: var(--grund);
  width: 100%;
  max-width: 34rem;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 0.75rem var(--rand) calc(1rem + env(safe-area-inset-bottom));
  animation: hochschieben .24s cubic-bezier(.32, .72, 0, 1);
}
.modal h2 { margin: .25rem 0 .5rem; }
.griff {
  width: 2.25rem; height: 0.3125rem;
  border-radius: 999px;
  background: var(--linie);
  margin: 0 auto .5rem;
}
@keyframes einblenden { from { opacity: 0 } to { opacity: 1 } }
@keyframes hochschieben { from { transform: translateY(100%) } to { transform: translateY(0) } }

/* ---------------- Kleinkram ---------------- */

.leise { color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; }
.mini { font-size: 0.8125rem; color: var(--text-2); }
.abstand { height: 1rem; }
.reihe { display: flex; align-items: center; gap: 0.75rem; }
.reihe .weit { flex: 1; min-width: 0; }

.aktualisieren {
  position: fixed; left: var(--rand); right: var(--rand);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 0.75rem);
  z-index: 30;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--gruen); color: var(--gruen-auf);
  border-radius: var(--radius);
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.aktualisieren .text {
  flex: 1; text-align: left;
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 600; color: inherit; cursor: pointer;
}
.aktualisieren .zu {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--gruen-auf) 18%, transparent);
  color: inherit; cursor: pointer;
}
.aktualisieren .zu svg { width: 1rem; height: 1rem; stroke-width: 2.5; }

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