/* Rezepte: Kochbuch am Handy.
   Uebernommen aus kram/app/static/app.css, Palette gleich, Klassen fuer diese App
   angepasst (Karten sind hier Rezepte statt Sachen, dazu Kopf mit Filterleiste und
   eine Anmeldemaske, die es bei Kram nicht gibt, weil dort ein Token im Link reicht). */

/* Das Attribut hidden schlaegt jede Klasse. Ohne diese Zeile setzt eine Klasse mit
   display: grid das Attribut ausser Kraft, und eine versteckte Maske liegt trotzdem
   ueber der Seite. Am 16.09.2026 genau so passiert, gefunden erst im Browser. */
[hidden] {
  display: none !important;
}

:root {
  --grund: #15181d;
  --flaeche: #1e232b;
  --rand: #2c333e;
  --text: #eaedf2;
  --gedaempft: #949dac;
  --akzent: #e2a54a;
  --vegan: #3dbe8b;
  --vegetarisch: #e2a54a;
  --fisch: #5b9cff;
  --fleisch: #ff6b6b;
  --hoehe: 100dvh;
  --luft: 16px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --grund: #f1f2f5;
    --flaeche: #ffffff;
    --rand: #dde0e6;
    --text: #191d24;
    --gedaempft: #5c6472;
    --akzent: #b97a1e;
    --vegan: #12855a;
    --vegetarisch: #b97a1e;
    --fisch: #2a68cf;
    --fleisch: #ce3636;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: var(--hoehe);
  max-width: 640px;
  margin: 0 auto;
}

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

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) var(--luft) 8px;
  border-bottom: 1px solid var(--rand);
}

.kopf .titel {
  color: inherit;
  text-decoration: none;
}

.kopf h1 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.kopf-knoepfe {
  display: flex;
  align-items: center;
  gap: 8px;
}

.knopf, .knopf-rund {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
}

.knopf-rund {
  position: relative;
  padding: 8px;
  width: 36px;
  height: 36px;
}

.knopf-rund .punkt {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--fleisch);
}

.knopf.hervorgehoben {
  border-color: var(--akzent);
  color: var(--akzent);
}

/* --- Hauptteil ------------------------------------------------------------ */

main {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--luft);
}

/* --- Anmeldemaske ---------------------------------------------------------- */

.anmeldung-grund {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: var(--grund);
  padding: var(--luft);
}

.anmeldung {
  width: min(360px, 100%);
  display: grid;
  gap: 12px;
  padding: 22px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 16px;
}

.anmeldung h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.anmeldung label {
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--gedaempft);
}

.anmeldung input {
  padding: 12px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--grund);
  color: var(--text);
  font: inherit;
}

.anmeldung .hinweis {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fleisch);
}

.anmeldung .hinweis:empty {
  display: none;
}

.voll {
  min-height: 50px;
  border: none;
  border-radius: 12px;
  background: var(--akzent);
  color: var(--grund);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.voll[disabled] { opacity: 0.45; cursor: default; }

/* --- Leerer Zustand und Fehler --------------------------------------------- */

.leer {
  display: grid;
  gap: 8px;
  place-content: center;
  text-align: center;
  padding: 40px 20px;
  color: var(--gedaempft);
}

.leer strong { color: var(--text); font-size: 1.125rem; }

.fehler {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--fleisch) 50%, var(--rand));
  border-radius: 12px;
  background: color-mix(in srgb, var(--fleisch) 10%, transparent);
  color: var(--text);
  font-size: 0.9375rem;
}

button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* --- Liste: Suche und Filterleiste ------------------------------------------ */

.listen-kopf { margin-bottom: 12px; }

.such-feld {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
}

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  padding: 6px 12px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--gedaempft);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.chip.aktiv {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 16%, var(--flaeche));
  color: var(--text);
}

/* --- Liste: Karten ----------------------------------------------------------- */

.karten { display: grid; gap: 12px; }

.karte {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}

.karte .bild {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--grund);
  display: block;
}

.bild-platzhalter { background: var(--rand); }
.bild-platzhalter.form-vegan { background: color-mix(in srgb, var(--vegan) 35%, var(--flaeche)); }
.bild-platzhalter.form-vegetarisch { background: color-mix(in srgb, var(--vegetarisch) 35%, var(--flaeche)); }
.bild-platzhalter.form-fisch { background: color-mix(in srgb, var(--fisch) 35%, var(--flaeche)); }
.bild-platzhalter.form-fleisch { background: color-mix(in srgb, var(--fleisch) 35%, var(--flaeche)); }

.karte-text {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
}

.karte-titel {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.karte-zeile {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gedaempft);
}

.wird-gelesen {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gedaempft);
  font-style: italic;
}

.puls {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--akzent);
  animation: puls 1.6s ease-in-out infinite;
}

@keyframes puls {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.leer-klein {
  margin: 0;
  color: var(--gedaempft);
  font-size: 0.9375rem;
}

/* --- Rezept-Ansicht ------------------------------------------------------- */

.rezept-bild {
  position: relative;
  margin: calc(var(--luft) * -1) calc(var(--luft) * -1) 16px;
}

.rezept-bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Ohne Bild bleibt nur ein flacher Farbstreifen. Ein Platzhalter im Format 4 zu 3
   verschenkt sonst den halben Bildschirm fuer nichts. */
.rezept-bild .bild-platzhalter {
  width: 100%;
  height: 96px;
  display: block;
}

.zurueck {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--grund) 55%, transparent);
  color: var(--text);
  text-decoration: none;
  font-size: 1.125rem;
  border: none;
  cursor: pointer;
}

.rezept-kopf { margin-bottom: 16px; }

.rezept-kopf h2 { margin: 0 0 4px; font-size: 1.375rem; line-height: 1.25; }

.untertitel { margin: 0 0 8px; color: var(--gedaempft); }

.felder-zeile {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gedaempft);
}

.portionen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--flaeche);
}

.portionen-regler {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portionen-knopf {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--grund);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.portionen-zahl {
  min-width: 1.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pruefen-hinweis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--akzent) 50%, var(--rand));
  border-radius: 12px;
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
}

.pruefen-hinweis p { margin: 0; font-size: 0.875rem; }

.zutaten, .schritte, .notiz, .quelle { margin-bottom: 20px; }

.zutaten h3, .schritte h3, .notiz h3, .quelle h3 {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gedaempft);
}

.zutaten-gruppe {
  margin: 12px 0 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.zutaten-liste, .schritte-liste { margin: 0; padding-left: 0; list-style: none; }

.zutaten-liste li {
  padding: 8px 0;
  border-bottom: 1px solid var(--rand);
  font-size: 0.9375rem;
}

.zutaten-liste li:last-child { border-bottom: none; }

.zutaten-liste .menge {
  display: inline-block;
  min-width: 4.5em;
  color: var(--gedaempft);
  font-variant-numeric: tabular-nums;
}

.schritte-liste {
  counter-reset: schritt;
}

.schritte-liste li {
  position: relative;
  counter-increment: schritt;
  padding: 10px 0 10px 34px;
  border-bottom: 1px solid var(--rand);
  cursor: pointer;
  line-height: 1.45;
}

.schritte-liste li:last-child { border-bottom: none; }

.schritte-liste li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  font-size: 0.75rem;
  color: var(--gedaempft);
}

.schritte-liste li.abgehakt {
  opacity: 0.45;
  text-decoration: line-through;
}

.notiz p, .quelle p { margin: 0; font-size: 0.9375rem; }

.quelle a { color: var(--akzent); }

.rezept-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.rezept-knoepfe .knopf { padding: 10px 16px; }

.knopf.voll {
  flex: 1;
  min-height: 48px;
  border: none;
  background: var(--akzent);
  color: var(--grund);
  font-weight: 600;
}

.knopf.gefahr {
  border-color: color-mix(in srgb, var(--fleisch) 50%, var(--rand));
  color: var(--fleisch);
}

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

#app.kochmodus .zutaten, #app.kochmodus .schritte {
  font-size: 1.1875rem;
  line-height: 1.6;
}

#app.kochmodus .schritte-liste li { padding-top: 14px; padding-bottom: 14px; }

.kochblock { display: block; }

@media (min-width: 640px) {
  #app.kochmodus .kochblock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }
}

/* --- Formular (Bearbeiten) --------------------------------------------------- */

.formular {
  display: grid;
  gap: 12px;
}

.formular-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.formular-kopf h2 { margin: 0; }

.formular-zurueck {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  font-size: 1.125rem;
  cursor: pointer;
}

.formular label {
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--gedaempft);
}

.formular input, .formular select, .formular textarea {
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
}

.formular textarea { resize: vertical; }

.formular .hinweis {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fleisch);
}

.formular .hinweis:empty { display: none; }

/* --- Erfassen ---------------------------------------------------------------- */

.erfassen {
  display: grid;
  gap: 12px;
}

.erfassen label {
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--gedaempft);
}

.erfassen textarea {
  padding: 12px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.erfassen .hinweis {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gedaempft);
}

.erfassen-dateien {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.erfassen-dateien .knopf {
  cursor: pointer;
}

/* --- Nachsehen ----------------------------------------------------------------- */

.nachsehen-liste {
  display: grid;
  gap: 12px;
}

.nachsehen-karte {
  padding: 14px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: var(--flaeche);
}

.nachsehen-titel {
  margin: 0 0 6px;
  font-weight: 600;
}

.nachsehen-titel a {
  color: inherit;
  text-decoration: none;
}

.nachsehen-grund {
  margin: 0 0 12px;
  font-size: 0.875rem;
  color: var(--gedaempft);
}

.nachsehen-knoepfe {
  display: flex;
  gap: 10px;
}

/* --- Verbindungshinweis --------------------------------------------------------- */

.verbindungshinweis {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) var(--luft) 8px;
  background: color-mix(in srgb, var(--akzent) 28%, var(--flaeche));
  border-bottom: 1px solid var(--rand);
  font-size: 0.8125rem;
  text-align: center;
}

.verbindungshinweis-knoepfe {
  display: flex;
  gap: 8px;
}

.verbindungshinweis .knopf {
  padding: 6px 10px;
  font-size: 0.8125rem;
}