/* ============================================================
   Backapp — Designsystem (mobile first, 390px als Basis)
   Warmes Creme + Terrakotta, dunkler Kochmodus.
   ============================================================ */

:root {
  --creme:        #F2EDE4;
  --creme-tief:   #E9E1D4;
  --karte:        #FFFDFA;
  --rand:         #E6DCCB;
  --rand-stark:   #D8CBB5;
  --text:         #241D17;
  --text-leise:   #8B8075;
  --terra:        #C4622F;
  --terra-tief:   #A94F22;
  --terra-hauch:  #F7E7DC;
  --dunkel:       #241D17;
  --dunkel-karte: #33291F;
  --gruen:        #5B7A3F;
  --gruen-hauch:  #DEE8D2;

  --r-s:  10px;
  --r-m:  14px;
  --r-l:  20px;
  --r-xl: 28px;

  --schatten:     0 1px 2px rgba(36,29,23,.05), 0 8px 24px rgba(36,29,23,.06);
  --schatten-fab: 0 6px 18px rgba(196,98,47,.38);

  --serif:  Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --sans:   'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:   'Cascadia Mono', 'Consolas', 'SF Mono', monospace;

  --nav-hoehe: 76px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--creme);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Zentrierter Telefon-Rahmen auf großen Bildschirmen */
.huelle {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--creme);
}
@media (min-width: 620px) {
  body { background: var(--creme-tief); }
  .huelle {
    box-shadow: 0 0 0 1px var(--rand), 0 20px 60px rgba(36,29,23,.10);
  }
}

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
}

a { color: var(--terra); text-decoration: none; }
a:hover { text-decoration: underline; }

.leise      { color: var(--text-leise); }
.mini       { font-size: 12.5px; }
.mono       { font-family: var(--mono); }
.kapitel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* ---------- Flächen ---------- */
.inhalt { padding: 20px 20px calc(var(--nav-hoehe) + 28px); }
.inhalt-schmal { padding: 20px; }

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--r-m);
  box-shadow: var(--schatten);
}

/* ---------- Formulare ---------- */
label.feld {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-leise);
  margin: 0 0 6px;
}

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], select, textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: var(--text);
  background: var(--karte);
  border: 1px solid var(--rand-stark);
  border-radius: var(--r-s);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(196,98,47,.14);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238B8075' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
textarea { resize: vertical; min-height: 84px; }

.feldgruppe { margin-bottom: 16px; }
.reihe { display: flex; gap: 10px; }
.reihe > * { flex: 1; min-width: 0; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 20px;
  font: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  cursor: pointer;
  transition: transform .08s, background .15s, box-shadow .15s;
  text-decoration: none;
}
.knopf:active { transform: translateY(1px); }
.knopf:hover  { text-decoration: none; }

.knopf-terra  { background: var(--terra); color: #fff; box-shadow: 0 2px 8px rgba(196,98,47,.25); }
.knopf-terra:hover  { background: var(--terra-tief); }
.knopf-dunkel { background: var(--dunkel); color: #F7F1E8; }
.knopf-dunkel:hover { background: #100C08; }
.knopf-hell   { background: var(--karte); color: var(--text); border-color: var(--rand-stark); }
.knopf-hell:hover   { background: #F7F1E7; }
.knopf-geist  { background: transparent; color: var(--terra); border: 1px dashed var(--rand-stark); }
.knopf-geist:hover  { background: var(--terra-hauch); }
.knopf-klein  { width: auto; padding: 9px 14px; font-size: 13.5px; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

.icon-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  background: var(--karte);
  border: 1px solid var(--rand-stark);
  border-radius: var(--r-s);
  cursor: pointer;
  color: var(--text);
  font-size: 17px;
}
.icon-knopf:hover { background: #F7F1E7; }

/* ---------- Meldungen ---------- */
.meldung {
  padding: 12px 14px;
  border-radius: var(--r-s);
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid;
}
.meldung-fehler { background: #FBE7E1; border-color: #EEC4B7; color: #8E3418; }
.meldung-ok     { background: var(--gruen-hauch); border-color: #C3D4B0; color: #3D5A28; }

/* ---------- Login ---------- */
.login-flaeche {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 28px 22px;
}
.login-box { width: 100%; }
.logo-marke {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--terra);
  color: #fff;
  font-family: var(--serif);
  font-size: 24px;
  border-radius: 13px;
  margin-bottom: 28px;
}
.login-box h1 { font-size: 34px; line-height: 1.12; margin-bottom: 10px; }
.login-hinweis { color: var(--text-leise); font-size: 14px; margin: 0 0 26px; }
.login-fuss {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 18px; font-size: 13px; flex-wrap: wrap;
}

/* ---------- Kopfzeile ---------- */
.kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 20px 12px;
}
.kopf h1 { font-size: 28px; }
.avatar {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: var(--creme-tief);
  border: 1px solid var(--rand-stark);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
  color: #6B5F52;
  text-decoration: none;
}
.avatar:hover { text-decoration: none; background: var(--rand); }

/* ---------- Suche + Filter ---------- */
.suchzeile { display: flex; gap: 10px; padding: 0 20px 14px; }
.chips {
  display: flex; gap: 8px;
  padding: 0 20px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--rand-stark);
  background: var(--karte);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { text-decoration: none; background: #F7F1E7; }
.chip.aktiv { background: var(--dunkel); border-color: var(--dunkel); color: #F7F1E8; }

/* ---------- Rezeptliste ---------- */
.rezept-liste { display: flex; flex-direction: column; gap: 12px; padding: 0 20px; }
.rezept-karte {
  display: flex;
  gap: 14px;
  padding: 12px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--r-m);
  box-shadow: var(--schatten);
  color: inherit;
  text-decoration: none;
}
.rezept-karte:hover { text-decoration: none; border-color: var(--rand-stark); }
.thumb {
  width: 74px; height: 74px;
  flex: 0 0 74px;
  border-radius: var(--r-s);
  background:
    repeating-linear-gradient(135deg, #EFE6D8 0 7px, #E5D9C6 7px 14px);
  display: grid; place-items: end start;
  padding: 6px;
  font-family: var(--mono);
  font-size: 9px;
  color: #A4937C;
}
.rezept-kopf {
  display: flex; align-items: flex-start; gap: 8px;
  justify-content: space-between;
}
.rezept-karte h3 { font-size: 17px; line-height: 1.25; }
.rezept-meta { color: var(--text-leise); font-size: 12.5px; margin: 3px 0 8px; }
.tag-reihe { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--creme-tief);
  color: #6B5F52;
}
.tag-geteilt { background: var(--gruen-hauch); color: var(--gruen); letter-spacing: .04em; }
.tag-oeffentlich { background: var(--terra-hauch); color: var(--terra-tief); }

.leerzustand {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-leise);
}
.leerzustand h3 { font-size: 20px; color: var(--text); margin-bottom: 8px; }

/* ---------- Untere Navigation ---------- */
.nav-unten {
  position: sticky;
  bottom: 0;
  margin-top: auto;   /* bleibt bei kurzen Seiten am unteren Rand */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: rgba(255,253,250,.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--rand);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  height: var(--nav-hoehe);
}
.nav-punkt {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px;
  color: var(--text-leise);
  text-decoration: none;
}
.nav-punkt:hover { text-decoration: none; color: var(--text); }
.nav-punkt.aktiv { color: var(--terra); }
.nav-punkt svg { width: 20px; height: 20px; }
.fab {
  justify-self: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--terra);
  color: #fff;
  display: grid; place-items: center;
  font-size: 26px; line-height: 1;
  box-shadow: var(--schatten-fab);
  text-decoration: none;
  margin-top: -20px;
  border: 3px solid var(--creme);
}
.fab:hover { text-decoration: none; background: var(--terra-tief); }

/* ---------- Rezept-Detail ---------- */
.held {
  position: relative;
  height: 190px;
  background: repeating-linear-gradient(135deg, #EFE6D8 0 9px, #E5D9C6 9px 18px);
}
.held-fuss {
  position: absolute; left: 16px; bottom: 10px;
  font-family: var(--mono); font-size: 10.5px; color: #A4937C;
}
.held-aktionen { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 8px; }
.held-zurueck { position: absolute; left: 14px; top: 14px; }

.detail-kopf { padding: 18px 20px 4px; }
.detail-kopf h1 { font-size: 27px; }
.detail-kopf .rezept-meta { margin-top: 6px; }

/* Portionsrechner */
.rechner {
  margin: 16px 20px;
  padding: 16px 16px 12px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--r-m);
  box-shadow: var(--schatten);
}
.rechner-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.rechner-wert {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--terra);
  line-height: 1;
}
.skala {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-leise); margin-top: 4px;
}
.rechner-fuss {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--rand);
  font-size: 12px; color: var(--text-leise);
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 3px; background: var(--rand-stark); border-radius: 2px;
}
input[type=range]::-moz-range-track {
  height: 3px; background: var(--rand-stark); border-radius: 2px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: -7.5px;
  border-radius: 50%;
  background: var(--karte);
  border: 2px solid var(--terra);
  box-shadow: 0 1px 4px rgba(36,29,23,.2);
}
input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--karte);
  border: 2px solid var(--terra);
}

/* Zutatentabelle */
.abschnitt-titel {
  padding: 6px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.zutaten-liste { padding: 0 20px; }
.zutat {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--rand);
}
.zutat:last-child { border-bottom: none; }
.zutat .menge { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.zutat .einheit { color: var(--text-leise); font-weight: 500; margin-left: 3px; }

.aktionen { padding: 20px; display: flex; flex-direction: column; gap: 10px; }

/* Schrittliste (hell) */
.schritt-liste { padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
.schritt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--r-m);
}
.nummer {
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--creme-tief);
  font-size: 11.5px; font-weight: 700; color: #6B5F52;
}

/* ============================================================
   Kochmodus — dunkel
   ============================================================ */
.kochmodus {
  background: var(--dunkel);
  color: #F4EDE2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.kochmodus .huelle { background: var(--dunkel); }
.koch-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  color: #CBBDAB;
}
.koch-kopf .kapitel { color: #CBBDAB; }
.koch-knopf {
  background: transparent;
  border: none;
  color: #CBBDAB;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  text-decoration: none;
  line-height: 1;
}
.koch-knopf:hover { background: rgba(255,255,255,.08); text-decoration: none; }

.koch-buehne { text-align: center; padding: 4px 24px 8px; }
.koch-buehne h2 { font-size: 27px; color: #FBF5EC; }
.koch-buehne p  { color: #B7A896; font-size: 13.5px; margin: 8px 0 0; }

/* Uhr */
.uhr-halter {
  display: grid; place-items: center;
  padding: 22px 0 10px;
}
.uhr {
  position: relative;
  width: 214px; height: 214px;
  --anteil: 1;                 /* 1 = volle Scheibe, 0 = abgelaufen */
  --fuell: var(--terra);
}
/* Die Restzeit ist ein Tortenstück: der abgelaufene Teil wird ausgeschnitten. */
.uhr-scheibe {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(
      var(--fuell) calc(var(--anteil) * 360deg),
      rgba(255,255,255,.05) 0);
  display: grid; place-items: center;
  text-align: center;
}
.uhr.pausiert { --fuell: #8B5233; }
.uhr.fertig   { --fuell: var(--gruen); --anteil: 1; }
.uhr-zeit {
  font-family: var(--serif);
  font-size: 46px;
  color: #fff;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.uhr-typ {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-top: 2px;
}

.koch-steuerung {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 20px 6px;
}
.koch-steuerung .knopf { width: auto; min-width: 130px; }
.koch-notiz {
  text-align: center; font-size: 11.5px; color: #7E7263;
  font-family: var(--mono); padding: 8px 20px 14px;
}

/* Ablaufliste dunkel */
.ablauf {
  background: #1C1610;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 16px 18px calc(22px + env(safe-area-inset-bottom));
  flex: 1;
}
.ablauf .kapitel { color: #7E7263; display: block; margin-bottom: 10px; }
.ablauf-liste { display: flex; flex-direction: column; gap: 9px; }
.ablauf-punkt {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  background: var(--dunkel-karte);
  border: 1px solid transparent;
  border-radius: var(--r-m);
  color: #E6DACA;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.ablauf-punkt:hover { border-color: rgba(255,255,255,.12); }
.ablauf-punkt .nummer { background: rgba(255,255,255,.10); color: #D8C9B6; }
.ablauf-punkt .titel { font-weight: 600; font-size: 14.5px; }
.ablauf-punkt .unter { font-size: 11.5px; color: #9C8E7D; }
.ablauf-punkt .dauer {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 13px;
  color: #C9B9A5;
  font-variant-numeric: tabular-nums;
}
.ablauf-punkt.aktiv {
  background: #4A2A17;
  border-color: var(--terra);
}
.ablauf-punkt.aktiv .nummer { background: var(--terra); color: #fff; }
.ablauf-punkt.aktiv .dauer  { color: #FFCDAE; }
.ablauf-punkt.erledigt { opacity: .55; }
.ablauf-punkt.erledigt .titel { text-decoration: line-through; }

@keyframes pochen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,122,63,.55); }
  50%      { box-shadow: 0 0 0 14px rgba(91,122,63,0); }
}
.klingelt { animation: pochen 1.1s ease-out 3; }

/* ============================================================
   Bearbeiten-Ansicht
   ============================================================ */
.editor-kopf {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(242,237,228,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rand);
}
.editor-kopf .titel { font-weight: 600; }
.editor-kopf a, .editor-kopf button { font-size: 14px; }
.speichern-knopf {
  background: none; border: none; cursor: pointer;
  color: var(--terra); font-weight: 700; font: inherit; font-weight: 700;
}

.zeile-zutat, .zeile-schritt { margin-bottom: 10px; }
.zeile-zutat { display: flex; gap: 8px; }
.zeile-zutat .z-name   { flex: 1 1 auto; }
.zeile-zutat .z-menge  { flex: 0 0 88px; text-align: right; }
.zeile-zutat .z-einheit{ flex: 0 0 82px; }

.schritt-block {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--r-m);
  padding: 12px;
  margin-bottom: 10px;
}
.schritt-block-kopf {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.schritt-block-kopf input { flex: 1; border: none; background: transparent; padding: 4px 0; font-weight: 600; }
.schritt-block-kopf input:focus { box-shadow: none; border-bottom: 1px solid var(--terra); border-radius: 0; }
.zeit-felder { display: flex; align-items: center; gap: 6px; }
.zeit-felder input {
  width: 54px; text-align: center; padding: 10px 4px;
  font-variant-numeric: tabular-nums;
}
.zeit-trenner { color: var(--text-leise); font-weight: 600; }
.loeschen {
  background: none; border: none; cursor: pointer;
  color: var(--text-leise); font-size: 18px; line-height: 1; padding: 4px 6px;
}
.loeschen:hover { color: #A33; }

/* Konto-Seite */
.info-liste { padding: 0 20px; }
.info-zeile {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--rand);
}
.info-zeile:last-child { border-bottom: none; }
.info-zeile span:first-child { color: var(--text-leise); }

.nur-lesen-hinweis {
  margin: 0 20px 16px;
  padding: 12px 14px;
  border-radius: var(--r-s);
  background: var(--terra-hauch);
  color: var(--terra-tief);
  font-size: 13px;
}

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