/* Farben aus dem echten Kanal-Avatar gemessen, wie bei Landeseite und PDF -
   Orange oben im Verlauf, Rot unten, Gusseisen-Schwarz die Pfanne. */
:root {
  --orange: #E9560A;
  --rot: #C41410;
  --tinte: #17120F;
  --papier: #FFFDFB;
  --karte: #FFFFFF;
  --grau: #6B625B;
  --linie: #E7DFD9;
  --schatten: 0 1px 2px rgba(23,18,15,.06), 0 6px 18px rgba(23,18,15,.06);
  --breite: 1080px;
}

/* Dunkler Modus: die Kueche ist abends dunkel, und ein weisses Blatt auf dem
   Handy blendet dann. Nur die Flaechen drehen, die Markenfarben bleiben. */
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #16120F;
    --karte: #221C18;
    --tinte: #F6EFE9;
    --grau: #A99C92;
    --linie: #342B25;
    --schatten: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

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

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

.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .6rem max(1rem, env(safe-area-inset-left)) .6rem max(1rem, env(safe-area-inset-right));
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg, var(--rot) 0%, var(--orange) 38%, var(--orange) 100%);
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em;
  color: inherit; text-decoration: none;
}
.brand img { border-radius: 50%; display: block; }

.install {
  border: 1px solid var(--orange); background: transparent; color: var(--orange);
  font: inherit; font-size: .85rem; font-weight: 600;
  padding: .4rem .8rem; border-radius: 999px; cursor: pointer;
}
.install:hover { background: var(--orange); color: #fff; }

/* --- Liste -------------------------------------------------------------- */

main, #recipe-view { max-width: var(--breite); margin: 0 auto; padding: 0 1rem 4rem; }

.intro { padding: 1.8rem 0 1.2rem; }
.intro h1 {
  margin: 0 0 .4rem; font-size: clamp(1.7rem, 6vw, 2.5rem);
  line-height: 1.1; letter-spacing: -.02em;
}
.intro p { margin: 0; color: var(--grau); max-width: 46ch; }

/* Klebt genau unter der Kopfzeile. Die Hoehe wird zur Laufzeit gemessen und in
   --kopf geschrieben: ein fester Wert stimmt nur bei einer Schriftgroesse, und
   wer die Systemschrift vergroessert, bekaeme sonst eine Leiste, die in die
   Kopfzeile schneidet. Der Wert hier ist nur der Startwert vor dem ersten
   Messen. Die 3 px sind der Glutstreifen, der unter der Kopfzeile haengt. */
.tools {
  position: sticky; top: calc(var(--kopf, 54px) + 3px); z-index: 10;
  background: var(--papier); padding: .5rem 0 .3rem;
}

.searchbox { position: relative; display: flex; align-items: center; }
.searchbox svg {
  position: absolute; left: .85rem; width: 18px; height: 18px;
  fill: none; stroke: var(--grau); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.searchbox input {
  width: 100%; font: inherit; color: inherit;
  padding: .75rem 2.4rem .75rem 2.6rem;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 999px;
}
.searchbox input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.searchbox input::-webkit-search-cancel-button { display: none; }
.clear {
  position: absolute; right: .5rem; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: transparent; color: var(--grau);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}

.chips { display: flex; gap: .45rem; overflow-x: auto; padding: .6rem 0 .2rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; font: inherit; font-size: .85rem;
  padding: .35rem .75rem; border-radius: 999px; cursor: pointer;
  background: var(--karte); color: var(--grau);
  border: 1px solid var(--linie); white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }

.count { color: var(--grau); font-size: .85rem; margin: .7rem 0 .8rem; }

.grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card {
  display: flex; flex-direction: column; text-align: left;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
  overflow: hidden; cursor: pointer; font: inherit; color: inherit; padding: 0;
  box-shadow: var(--schatten);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(23,18,15,.1), 0 14px 30px rgba(23,18,15,.1); }
.card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Fest dunkel: hier liegt ein Bild drueber, und wo keines ist, steht das
   Ersatzzeichen. Mit --tinte waere der Grund im dunklen Modus hell und das
   Loch faellt staerker auf als der Inhalt. */
.thumb {
  position: relative; aspect-ratio: 4/3; background: #17120F;
  display: grid; place-items: center; overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .fallback { font-size: 2rem; }
.badge {
  position: absolute; left: .5rem; top: .5rem;
  background: rgba(23,18,15,.82); color: #fff;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 5px;
}
/* Rot, nicht grau: "nur Video" ist kein Makel, sondern ein Hinweis, den man
   VOR dem Antippen sehen soll. Grau wuerde uebersehen. */
.badge-video { background: var(--rot); }

.card-body { padding: .7rem .8rem .9rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card-title { font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.card-meta { color: var(--grau); font-size: .82rem; margin-top: auto; }

.empty { color: var(--grau); text-align: center; padding: 2.5rem 0; }

/* --- Rezeptansicht ------------------------------------------------------ */

.back {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--rot); cursor: pointer; padding: 1.1rem 0 .5rem;
}

.r-head h1 { margin: .2rem 0 .3rem; font-size: clamp(1.6rem, 5.5vw, 2.3rem); line-height: 1.15; letter-spacing: -.02em; }
.r-chapter { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--grau); }
.r-meta { color: var(--rot); font-weight: 600; font-size: .92rem; }
.r-summary { color: var(--grau); margin: .5rem 0 0; }
.rule { width: 62px; height: 3px; background: var(--rot); border: 0; margin: 1.1rem 0 0; }

/* Der Videokasten ist ein Link, kein Player: eingebettet wuerde YouTube
   Cookies setzen und ein Zustimmungsbanner noetig machen - und die Aufrufe
   sollen auf dem Kanal landen, nicht hier. */
.video {
  display: block; position: relative; margin: 1.3rem 0 .2rem;
  border-radius: 14px; overflow: hidden; background: #17120F;
  aspect-ratio: 16/9; box-shadow: var(--schatten);
}
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.video .play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.video .play span {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--rot); box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.video .play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.video .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .7rem;
  color: #fff; font-size: .85rem; font-weight: 600;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
}

.r-section { margin-top: 1.8rem; }
.r-section h2 {
  font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--rot); margin: 0 0 .7rem;
}

/* Zutaten und Schritte zum Abhaken: beim Kochen verliert man die Zeile, sobald
   man einmal zur Pfanne geschaut hat. Der Haken bleibt im Geraet gespeichert. */
.check {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .5rem .1rem; cursor: pointer; border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.box {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: .12rem;
  border: 2px solid var(--linie); border-radius: 6px;
  display: grid; place-items: center; transition: background .12s, border-color .12s;
}
.box svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3.4; fill: none; opacity: 0; }
.check input:checked + .box { background: var(--orange); border-color: var(--orange); }
.check input:checked + .box svg { opacity: 1; }
.check input:checked ~ .txt { color: var(--grau); text-decoration: line-through; }
.check input:focus-visible + .box { outline: 2px solid var(--orange); outline-offset: 2px; }
.txt { flex: 1; }
.num { flex: 0 0 auto; color: var(--orange); font-weight: 700; width: 1.1rem; }

.why {
  border-left: 3px solid var(--orange); padding: .1rem 0 .1rem .9rem;
  color: var(--tinte);
}

.watch {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem;
  background: var(--rot); color: #fff; text-decoration: none; font-weight: 600;
  padding: .7rem 1.2rem; border-radius: 999px;
}
.watch svg { width: 16px; height: 16px; fill: #fff; }

.reset {
  background: none; border: 0; color: var(--grau); font: inherit; font-size: .85rem;
  cursor: pointer; padding: .3rem 0; text-decoration: underline;
}

/* --- Anmeldung und Fuss ------------------------------------------------- */

/* Fest dunkel, in BEIDEN Modi - deshalb hier feste Werte statt --tinte.
   Mit der Variablen kippte der Kasten im dunklen Modus auf hellen Grund,
   behielt aber die fest helle Schrift: hell auf hell, unlesbar. Ein
   Markenkasten ist bewusst immer dunkel, wie die Glutseite im PDF. */
.getpdf {
  margin-top: 3.5rem; padding: 1.6rem; border-radius: 16px;
  background: #17120F; color: #F3E7DE;
}
.getpdf h2 { margin: 0 0 .3rem; font-size: 1.25rem; }
.getpdf p { margin: 0 0 1rem; color: #C9B8AC; font-size: .95rem; }
.signup { display: flex; flex-wrap: wrap; gap: .55rem; }
.signup input {
  flex: 1 1 15rem; font: inherit; padding: .7rem .9rem;
  border-radius: 10px; border: 1px solid #3B302A; background: #0F0C0A; color: #F3E7DE;
}
.signup input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.signup button {
  font: inherit; font-weight: 700; cursor: pointer; padding: .7rem 1.2rem;
  border: 0; border-radius: 10px; color: #fff;
  background: linear-gradient(180deg, var(--orange), var(--rot));
}
.form-note { flex: 1 0 100%; margin: .2rem 0 0; font-size: .88rem; color: #FFD9C2; min-height: 1.3em; }
.form-note a { color: #FFD9C2; }

.foot { text-align: center; color: var(--grau); font-size: .9rem; padding: 2.5rem 0 1rem; }
.foot p { margin: .2rem 0; }
.foot a { color: var(--rot); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}