/* ============================================================
   Kochplan – Design System
   Mobile-first, warm & appetitlich
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap');

/* ── Variablen ────────────────────────────────────────────── */
:root {
  --gruen:       #2D6A4F;
  --gruen-mid:   #52B788;
  --gruen-hell:  #D8F3DC;
  --orange:      #F4845F;
  --orange-hell: #FFF0EB;
  --creme:       #FAFAF7;
  --weiss:       #FFFFFF;
  --grau-100:    #F4F4F0;
  --grau-200:    #E8E8E2;
  --grau-400:    #A0A096;
  --grau-700:    #4A4A45;
  --schwarz:     #1C1C1A;

  --radius-s:    8px;
  --radius-m:    14px;
  --radius-l:    22px;
  --radius-xl:   32px;

  --shadow-s:    0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-m:    0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-l:    0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

  --nav-h:       68px;
  --header-h:    60px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--creme);
  color: var(--schwarz);
  min-height: 100dvh;
  padding-bottom: var(--nav-h);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
input, textarea, select { font-family: inherit; }

/* ── Typografie ───────────────────────────────────────────── */
.t-hero    { font-family: 'Playfair Display', serif; font-size: 2rem; line-height: 1.15; }
.t-title   { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.t-section { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grau-400); }
.t-body    { font-size: .9375rem; line-height: 1.55; }
.t-small   { font-size: .8125rem; color: var(--grau-400); }

/* ── Layout ───────────────────────────────────────────────── */
.container { max-width: 480px; margin: 0 auto; padding: 0 16px; }

/* ── Header ───────────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(250,250,247,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--grau-200);
  display: flex; align-items: center;
}
.app-header .container {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.app-header-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  color: var(--gruen);
}
.header-action {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gruen-hell);
  color: var(--gruen);
  font-size: 1.1rem;
}

/* ── Bottom Navigation ────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--grau-200);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  color: var(--grau-400);
  transition: color .2s;
  padding: 8px 0;
}
.nav-item.active { color: var(--gruen); }
.nav-icon {
  width: 44px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  transition: background .2s;
  font-size: 1.3rem;
}
.nav-item.active .nav-icon { background: var(--gruen-hell); }
.nav-label { font-size: .65rem; font-weight: 600; letter-spacing: .02em; }

/* ── Seiten-Inhalt ────────────────────────────────────────── */
.page { padding: 20px 0 32px; }

/* ── Karten ───────────────────────────────────────────────── */
.card {
  background: var(--weiss);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.card-body { padding: 16px; }
.card-image {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--grau-100);
}
.card-image-placeholder {
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--gruen-hell) 0%, var(--grau-100) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
}

/* ── Wochenplan ───────────────────────────────────────────── */
.woche-header {
  padding: 20px 0 8px;
}
.woche-grid { display: flex; flex-direction: column; gap: 12px; }

.tag-karte {
  background: var(--weiss);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  display: flex;
  transition: box-shadow .2s, transform .15s;
}
.tag-karte:active { transform: scale(.985); }
.tag-karte.heute { box-shadow: 0 0 0 2px var(--gruen), var(--shadow-m); }

.tag-datum {
  width: 64px; flex-shrink: 0;
  background: var(--grau-100);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 12px 8px;
  border-right: 1px solid var(--grau-200);
}
.tag-datum.heute-datum { background: var(--gruen); color: var(--weiss); }
.tag-wochentag { font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.tag-zahl { font-size: 1.5rem; font-weight: 700; line-height: 1; }

.tag-inhalt {
  flex: 1; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.tag-bild {
  width: 52px; height: 52px; border-radius: var(--radius-s);
  object-fit: cover; background: var(--grau-100); flex-shrink: 0;
}
.tag-bild-placeholder {
  width: 52px; height: 52px; border-radius: var(--radius-s);
  background: var(--gruen-hell);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.tag-info { flex: 1; min-width: 0; }
.tag-titel {
  font-weight: 600; font-size: .9375rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tag-meta { font-size: .75rem; color: var(--grau-400); margin-top: 2px; }
.tag-pfeil { color: var(--grau-400); font-size: 1rem; flex-shrink: 0; }

.tag-karte.kein-plan .tag-inhalt { color: var(--grau-400); }

/* ── Heute-Badge ──────────────────────────────────────────── */
.heute-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gruen); color: var(--weiss);
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px;
  margin-bottom: 12px;
}

/* ── Rezept-Detail ────────────────────────────────────────── */
.rezept-hero {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--grau-100);
}
.rezept-hero-placeholder {
  width: 100%; aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--gruen-hell) 0%, #B7E4C7 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
}
.rezept-body { padding: 20px 16px 32px; }
.rezept-meta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 20px;
}
.rezept-badge {
  display: flex; align-items: center; gap: 6px;
  background: var(--grau-100); border-radius: 20px;
  padding: 6px 12px; font-size: .8125rem; font-weight: 500;
}

.zutaten-liste { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; }
.zutat-zeile {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--grau-100);
  font-size: .9rem;
}
.zutat-zeile:last-child { border-bottom: none; }
.zutat-menge { color: var(--gruen); font-weight: 600; font-size: .8125rem; flex-shrink: 0; }

.zubereitung-text {
  line-height: 1.7; font-size: .9375rem; color: var(--grau-700);
  white-space: pre-line;
}
.schritt {
  display: flex; gap: 12px; margin-bottom: 16px;
}
.schritt-nr {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gruen); color: var(--weiss);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.schritt-text { flex: 1; line-height: 1.6; font-size: .9375rem; color: var(--grau-700); }

/* ── Bewertung ────────────────────────────────────────────── */
.bewertung-bar {
  display: flex; gap: 12px;
  background: var(--grau-100); border-radius: var(--radius-l);
  padding: 12px 16px; margin-top: 20px;
  align-items: center;
}
.bewertung-label { flex: 1; font-size: .875rem; font-weight: 500; }
.bewertung-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  transition: transform .15s, background .2s;
  border: 2px solid transparent;
}
.bewertung-btn:active { transform: scale(.88); }
.bewertung-btn.daumen-hoch  { background: var(--gruen-hell); }
.bewertung-btn.daumen-runter { background: var(--orange-hell); }
.bewertung-btn.aktiv-hoch   { background: var(--gruen); border-color: var(--gruen); }
.bewertung-btn.aktiv-runter  { background: var(--orange); border-color: var(--orange); }

/* ── Alternativen ─────────────────────────────────────────── */
.alt-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.alt-karte {
  display: flex; align-items: center; gap: 12px;
  background: var(--weiss); border-radius: var(--radius-m);
  box-shadow: var(--shadow-s); padding: 10px 14px;
  cursor: pointer; transition: transform .15s;
  border: 2px solid transparent;
}
.alt-karte:active { transform: scale(.98); }
.alt-karte.gewaehlt { border-color: var(--gruen); }
.alt-bild {
  width: 46px; height: 46px; border-radius: var(--radius-s);
  object-fit: cover; background: var(--grau-100); flex-shrink: 0;
}
.alt-bild-placeholder {
  width: 46px; height: 46px; border-radius: var(--radius-s);
  background: var(--gruen-hell);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.alt-titel { font-weight: 600; font-size: .875rem; }
.alt-meta  { font-size: .75rem; color: var(--grau-400); margin-top: 2px; }
.alt-check { margin-left: auto; color: var(--gruen); font-size: 1.2rem; opacity: 0; }
.alt-karte.gewaehlt .alt-check { opacity: 1; }

/* ── Einkaufsliste ────────────────────────────────────────── */
.kategorie-block { margin-bottom: 24px; }
.kategorie-titel {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grau-400);
  padding: 0 4px 8px;
}
.einkauf-liste { display: flex; flex-direction: column; gap: 2px; }
.einkauf-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--weiss); border-radius: var(--radius-m);
  padding: 13px 16px;
  box-shadow: var(--shadow-s);
  cursor: pointer; transition: opacity .2s;
}
.einkauf-item.erledigt { opacity: .45; }
.einkauf-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--grau-200);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s;
  font-size: .75rem; color: var(--weiss);
}
.einkauf-item.erledigt .einkauf-check {
  background: var(--gruen-mid); border-color: var(--gruen-mid);
}
.einkauf-name { flex: 1; font-size: .9375rem; }
.einkauf-item.erledigt .einkauf-name { text-decoration: line-through; }
.einkauf-menge { font-size: .8125rem; color: var(--grau-400); flex-shrink: 0; }

.einkauf-progress {
  height: 4px; background: var(--grau-200); border-radius: 2px;
  margin-bottom: 20px; overflow: hidden;
}
.einkauf-progress-bar {
  height: 100%; background: var(--gruen-mid); border-radius: 2px;
  transition: width .4s ease;
}

/* ── Rezeptverwaltung ─────────────────────────────────────── */
.rezept-liste-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--weiss); border-radius: var(--radius-m);
  box-shadow: var(--shadow-s); padding: 10px 14px;
  margin-bottom: 8px;
}
.rezept-liste-bild {
  width: 52px; height: 52px; border-radius: var(--radius-s);
  object-fit: cover; background: var(--grau-100); flex-shrink: 0;
}
.rezept-liste-bild-placeholder {
  width: 52px; height: 52px; border-radius: var(--radius-s);
  background: var(--gruen-hell);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.rezept-liste-info { flex: 1; min-width: 0; }
.rezept-liste-titel { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rezept-liste-meta  { font-size: .75rem; color: var(--grau-400); margin-top: 2px; }
.rezept-liste-actions { display: flex; gap: 4px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; transition: background .15s;
}
.icon-btn:hover, .icon-btn:active { background: var(--grau-100); }
.icon-btn.danger:hover { background: #FEE2E2; color: #DC2626; }

/* ── Formular ─────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--grau-700); margin-bottom: 6px;
}
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 12px 14px;
  background: var(--weiss); border: 1.5px solid var(--grau-200);
  border-radius: var(--radius-m); font-size: .9375rem;
  color: var(--schwarz); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}
.form-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radius-l);
  font-size: .9375rem; font-weight: 600;
  transition: all .15s; cursor: pointer; border: none;
  width: 100%;
}
.btn-primary {
  background: var(--gruen); color: var(--weiss);
  box-shadow: 0 2px 8px rgba(45,106,79,.3);
}
.btn-primary:active { background: #235C3F; transform: scale(.98); }
.btn-secondary {
  background: var(--grau-100); color: var(--grau-700);
}
.btn-secondary:active { background: var(--grau-200); }
.btn-orange {
  background: var(--orange); color: var(--weiss);
  box-shadow: 0 2px 8px rgba(244,132,95,.3);
}
.btn-sm {
  padding: 8px 16px; font-size: .8125rem;
  border-radius: var(--radius-m); width: auto;
}
.btn-ghost {
  background: transparent; color: var(--gruen); font-weight: 600;
  padding: 10px 0; width: auto;
}

/* ── Login ────────────────────────────────────────────────── */
.login-seite {
  min-height: 100dvh; padding-bottom: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1B4332 0%, #2D6A4F 50%, #52B788 100%);
  padding: 32px 16px;
}
.login-box {
  width: 100%; max-width: 360px;
  background: var(--weiss); border-radius: var(--radius-xl);
  padding: 40px 28px; box-shadow: var(--shadow-l);
}
.login-logo {
  text-align: center; margin-bottom: 28px;
}
.login-logo-icon {
  font-size: 3rem; display: block; margin-bottom: 8px;
}
.login-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; color: var(--gruen);
}
.login-logo-sub { font-size: .8rem; color: var(--grau-400); margin-top: 2px; }
.login-error {
  background: #FEE2E2; color: #DC2626;
  padding: 10px 14px; border-radius: var(--radius-m);
  font-size: .8125rem; margin-bottom: 16px;
  border: 1px solid #FECACA;
}

/* ── Toast / Meldung ──────────────────────────────────────── */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + 16px); left: 16px; right: 16px;
  max-width: 448px; margin: 0 auto;
  background: var(--schwarz); color: var(--weiss);
  padding: 12px 18px; border-radius: var(--radius-m);
  font-size: .875rem; font-weight: 500;
  box-shadow: var(--shadow-l); z-index: 300;
  animation: slideUp .3s ease, fadeOut .3s ease 2.5s forwards;
}
.toast.success { background: var(--gruen); }
.toast.error   { background: #DC2626; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  to { opacity: 0; transform: translateY(10px); }
}

/* ── Leer-Zustand ─────────────────────────────────────────── */
.leer-zustand {
  text-align: center; padding: 48px 24px; color: var(--grau-400);
}
.leer-icon { font-size: 3.5rem; margin-bottom: 12px; }
.leer-text { font-size: .9375rem; }

/* ── Trennlinie ───────────────────────────────────────────── */
.divider {
  height: 1px; background: var(--grau-200); margin: 20px 0;
}
.section-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grau-400);
  margin-bottom: 10px;
}

/* ── FAB (Floating Action Button) ─────────────────────────── */
.fab {
  position: fixed;
  bottom: calc(var(--nav-h) + 16px);
  right: 20px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--gruen); color: var(--weiss);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: var(--shadow-l);
  z-index: 150; transition: transform .15s, background .2s;
}
.fab:active { transform: scale(.92); background: #235C3F; }

/* ── Spinner ──────────────────────────────────────────────── */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--grau-200);
  border-top-color: var(--gruen);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 40px 16px; color: var(--grau-400);
  font-size: .875rem;
}

/* ── Scroll ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--grau-200); border-radius: 2px; }

/* ── Übergänge ────────────────────────────────────────────── */
.fade-in {
  animation: fadeIn .25s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}