/* ShinCook — mobile-first, fürs Handy am Herd gedacht (Hasi 28.08.2026) */

:root {
  --terracotta: #c96a3a;
  --terracotta-dunkel: #a3502a;
  --creme: #fbf6ee;
  --karte: #ffffff;
  --text: #2b2420;
  --muted: #8a7d70;
  --rand: #e8ddd0;
  --gruen: #4c8a5a;
  --rot: #c0392b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--creme);
  color: var(--text);
  padding-bottom: env(safe-area-inset-bottom);
}

h1 { font-size: 1.5rem; margin: 0.4em 0; }
h2 { font-size: 1.1rem; margin: 1.2em 0 0.4em; color: var(--terracotta-dunkel); }

.inhalt { padding: 16px; max-width: 640px; margin: 0 auto; }
.muted { color: var(--muted); }

/* Navigation */
.nav {
  display: flex; align-items: center; gap: 4px;
  background: var(--terracotta); color: white;
  padding: 10px 12px;
  position: sticky; top: 0; z-index: 10;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.nav-logo { font-weight: 700; margin-right: auto; text-decoration: none; color: white; font-size: 1.05rem; }
.nav a { color: rgba(255,255,255,0.85); text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: 0.92rem; }
.nav a.aktiv { background: rgba(255,255,255,0.22); color: white; font-weight: 600; }
.nav-logout button { background: none; border: none; color: white; font-size: 1.1rem; cursor: pointer; padding: 6px 8px; }

/* Flash-Meldungen */
.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 0.92rem; }
.flash-erfolg { background: #e3f2e6; color: var(--gruen); }
.flash-fehler { background: #fbe4e1; color: var(--rot); }

/* Login */
.login-box { max-width: 340px; margin: 15vh auto 0; text-align: center; }
.login-box form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; text-align: left; }
.login-box pre { background: var(--karte); padding: 10px; border-radius: 8px; text-align: left; overflow-x: auto; }

/* Formulare */
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--muted); margin-bottom: 12px; }
input, select, textarea {
  font-size: 1rem; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px;
  background: var(--karte); color: var(--text); font-family: inherit;
}
textarea { resize: vertical; }
.form-zeile { display: flex; gap: 12px; }
.form-zeile label { flex: 1; }

button { font-family: inherit; cursor: pointer; }
.btn-primary {
  background: var(--terracotta); color: white; border: none; border-radius: 12px;
  padding: 14px 20px; font-size: 1rem; font-weight: 600; width: 100%;
}
.btn-primary:disabled { opacity: 0.5; }
.btn-sekundaer {
  background: var(--karte); color: var(--terracotta-dunkel); border: 1px solid var(--rand);
  border-radius: 10px; padding: 10px 16px; font-size: 0.92rem; text-decoration: none; display: inline-block;
}
.btn-gefahr { background: none; border: 1px solid var(--rot); color: var(--rot); border-radius: 10px; padding: 10px 16px; }
.btn-klein { padding: 8px 14px; font-size: 0.88rem; width: auto; }

.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.aktionen { display: flex; gap: 10px; margin-top: 20px; }

/* Wochenplan */
.wochenplan { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tag-karte { background: var(--karte); border-radius: 12px; padding: 12px 14px; border: 1px solid var(--rand); }
.tag-name { font-weight: 700; margin-bottom: 6px; }
.tag-form select { width: 100%; }
.tag-link { display: inline-block; margin-top: 6px; font-size: 0.85rem; color: var(--terracotta-dunkel); text-decoration: none; }

/* Portionen im Wochenplan (04.09.2026) */
.portionen-feld { display: flex; align-items: center; gap: 8px; margin-top: 8px;
                  font-size: 0.85rem; color: var(--text-leise, #777); }
.portionen-feld input { width: 62px; text-align: center; }
.portionen-hinweis { margin-top: 4px; font-size: 0.78rem; color: var(--text-leise, #777);
                     font-style: italic; }
.wochenplan-aktion { margin-top: 20px; }

/* Rezeptliste */
.rezept-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.rezept-karte {
  background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 14px;
  text-decoration: none; color: var(--text); display: block;
}
.rezept-name { font-weight: 600; }
.rezept-meta { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }

/* Rezeptdetail */
.zutaten-liste, .schritte-liste { padding-left: 20px; }
.zutaten-liste li, .schritte-liste li { margin-bottom: 6px; }

/* Rezept-Formular */
.zutat-zeile { display: flex; gap: 8px; margin-bottom: 8px; }
.zutat-zeile input:nth-child(1) { flex: 2; }
.zutat-zeile input:nth-child(2) { flex: 1; }
.zutat-zeile input:nth-child(3) { flex: 1; }
.zutat-zeile button { background: none; border: none; color: var(--rot); font-size: 1.1rem; padding: 0 6px; }

/* Kochmodus — großer Text, wenig Ablenkung, fürs Handy am Herd */
.kochmodus { min-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.kochmodus-kopf { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; }
.kochmodus-zurueck { color: var(--muted); text-decoration: none; }
.kochmodus-schritt {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 1.5rem; line-height: 1.5; padding: 20px 10px;
}
.kochmodus-nav { display: flex; gap: 12px; padding-bottom: 20px; }
.kochmodus-nav button { flex: 1; }

/* Einkaufsliste */
.einkaufs-liste { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.einkaufs-liste li {
  display: flex; align-items: center; gap: 10px; background: var(--karte);
  border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px;
}
.einkaufs-liste li.erledigt { opacity: 0.5; }
.einkaufs-liste li.erledigt .einkaufs-text { text-decoration: line-through; }
.einkaufs-haken { background: none; border: 1px solid var(--rand); border-radius: 50%; width: 30px; height: 30px; font-size: 1rem; color: var(--gruen); flex-shrink: 0; }
.einkaufs-text { flex: 1; }
.einkaufs-entfernen { background: none; border: none; color: var(--muted); font-size: 1rem; padding: 4px 8px; }

@media (min-width: 640px) {
  .wochenplan { display: grid; grid-template-columns: repeat(2, 1fr); }
}


/* ── Bilder zu den Gerichten (04.09.2026) ───────────────────────────── */
/* Feste Seitenverhaeltnisse, damit die Karten nicht springen waehrend die
   Bilder laden — und object-fit:cover, damit nichts verzerrt aussieht. */

.tag-bild { display: block; position: relative; margin: 8px 0 6px;
            border-radius: 10px; overflow: hidden; aspect-ratio: 4/3;
            background: var(--rand, #e6ddd2); text-decoration: none; }
.tag-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tag-bild-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 7px;
                 color: #fff; font-size: 0.88rem; font-weight: 600; line-height: 1.2;
                 background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.tag-bild-leer { display: flex; align-items: center; justify-content: center;
                 width: 100%; height: 100%; font-size: 2rem; opacity: .35; }
.tag-bild-leer-tag { display: flex; align-items: center; justify-content: center;
                     font-size: 1.8rem; opacity: .28; }

.rezept-bild { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
               border-radius: 10px 10px 0 0; background: var(--rand, #e6ddd2); }
.rezept-bild-leer { display: flex; align-items: center; justify-content: center;
                    font-size: 2rem; opacity: .3; }

.detail-bild { width: 100%; max-width: 520px; aspect-ratio: 4/3; object-fit: cover;
               border-radius: 12px; display: block; margin: 0 0 16px; }

.bild-hinweis { font-size: 0.78rem; color: var(--text-leise, #777); font-style: italic;
                margin: -8px 0 14px; }