/* PizzaBuddy — Styles (Light + Dark via [data-theme]) */
:root {
  --bg-a: #fdf6ec;
  --bg-b: #f6e8d5;
  --halo: rgba(245, 197, 66, .22);
  --card-bg: #fffdf9;
  --card-border: #ecd9bf;
  --text: #3b2a1e;
  --muted: #8a6d55;
  --subtle: #a1805e;
  --label: #8a5a33;
  --value: #c0392b;
  --value-main: #7c3f21;
  --input-bg: #fffdf9;
  --input-border: #e3c9a8;
  --divider: #d9b78f;
  --rezept-border: #d9b78f;
  --rezept-text: #5d4633;
  --shadow: rgba(90, 50, 15, .35);
  --btn-bg: #fffdf9;
  --btn-border: #ecd9bf;
  --brot: #7c3f21;
  --brot2: #a35b2e;
  --sauce: #c0392b;
  --kaese: #f5c542;
  --basil: #2e7d32;
  --creme: #fdf6ec;
  --creme2: #f6e8d5;
  --weiss: #fffdf9;
}
html[data-theme="dark"] {
  --bg-a: #201511;
  --bg-b: #150e0a;
  --halo: rgba(245, 197, 66, .07);
  --card-bg: #2a1e16;
  --card-border: #463426;
  --text: #f2e6d8;
  --muted: #c9a986;
  --subtle: #9a7c5e;
  --label: #cf9f6f;
  --value: #ff7a63;
  --value-main: #ff9d4d;
  --input-bg: #241a13;
  --input-border: #4a382a;
  --divider: #4a382a;
  --rezept-border: #4a382a;
  --rezept-text: #d9c4ad;
  --shadow: rgba(0, 0, 0, .5);
  --btn-bg: #2a1e16;
  --btn-border: #4a382a;
  --brot: #a35b2e;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -140px, var(--halo), transparent 60%),
    linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 100%);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem calc(3rem + env(safe-area-inset-bottom));
  transition: background .25s ease, color .25s ease;
}

/* Theme-Schalter */
.theme-btn {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 20;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px var(--shadow);
  transition: transform .15s ease;
}
.theme-btn:hover { transform: scale(1.08); }

header { text-align: center; margin-bottom: 1.6rem; }
header .pizza-glyph { font-size: 4.2rem; line-height: 1; user-select: none; }
h1 { font-size: 2rem; letter-spacing: .5px; margin-top: .3rem; }
h1 .rot { color: var(--sauce); }
h1 .gruen { color: var(--basil); }
html[data-theme="dark"] h1 .gruen { color: #66bb6a; }
.sub { color: var(--muted); margin-top: .35rem; font-size: .95rem; }

/* ---- Pizza-Layout ---- */
.pizza {
  width: min(640px, 94vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 50%, var(--creme) 0 66%, var(--brot) 74%, var(--brot2) 100%);
  box-shadow:
    0 24px 50px -18px var(--shadow),
    inset 0 -8px 24px rgba(120, 60, 20, .25),
    inset 0 6px 16px rgba(255, 255, 255, .35);
}
html[data-theme="dark"] .pizza {
  box-shadow:
    0 24px 50px -18px rgba(0, 0, 0, .7),
    inset 0 -8px 24px rgba(60, 25, 5, .45),
    inset 0 6px 16px rgba(255, 255, 255, .18);
}
.pizza::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 24px solid transparent;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.16), transparent 40%),
    radial-gradient(circle at 68% 75%, rgba(90,40,10,.28), transparent 42%);
  background-clip: border-box;
  -webkit-mask: radial-gradient(circle, transparent 0 74%, #000 75%);
          mask: radial-gradient(circle, transparent 0 74%, #000 75%);
  pointer-events: none;
}
.center {
  position: absolute; inset: 12%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; text-align: center;
}
.fields { display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center; }
.field { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.field label { font-size: .8rem; font-weight: 600; color: var(--label); letter-spacing: .4px; text-transform: uppercase; }
.field input[type=number] {
  width: 108px; text-align: center; font-size: 1.5rem; font-weight: 700;
  color: var(--text); background: var(--input-bg);
  border: 2px solid var(--input-border); border-radius: 999px;
  padding: .45rem .6rem; outline: none;
  box-shadow: inset 0 2px 6px rgba(120, 70, 20, .08);
  -moz-appearance: textfield; appearance: textfield;
}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input[type=number]:focus { border-color: var(--sauce); box-shadow: 0 0 0 4px rgba(192,57,43,.15); }
.field small { color: var(--subtle); font-size: .72rem; }
.range {
  width: min(150px, 60vw);
  accent-color: var(--sauce);
  cursor: pointer;
  height: 30px;
  touch-action: manipulation;
}

.divider {
  width: 78%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--divider), transparent);
  margin: .2rem 0;
}
.tagline { font-size: .95rem; color: var(--muted); }
.tagline b { color: var(--value-main); }

/* ---- Zutaten-Karten ---- */
.toppings {
  width: min(680px, 95vw);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem;
  margin-top: 1.8rem;
}
.card {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 18px;
  padding: 1rem .8rem .9rem;
  text-align: center;
  box-shadow: 0 8px 20px -12px var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -14px var(--shadow); }
.card .icon { font-size: 2rem; line-height: 1; }
.card .name { margin-top: .45rem; font-weight: 700; font-size: .95rem; }
.card .value { margin-top: .2rem; font-size: 1.55rem; font-weight: 800; color: var(--value); }
.card .unit { font-size: .8rem; color: var(--subtle); font-weight: 600; }
.card.haupt { border-color: var(--kaese); }
html[data-theme="dark"] .card.haupt { background: linear-gradient(180deg, #3a2a14, var(--card-bg)); }
html[data-theme="dark"] .card.haupt .value { color: var(--value-main); }

/* ---- Rezept ---- */
.rezept {
  width: min(680px, 95vw);
  margin-top: 1.6rem;
  background: var(--card-bg);
  border: 2px dashed var(--rezept-border);
  border-radius: 18px;
  padding: 1.1rem 1.3rem;
  box-shadow: 0 10px 24px -14px var(--shadow);
}
.rezept h2 { font-size: 1.05rem; color: var(--brot); margin-bottom: .6rem; }
.rezept ol { margin-left: 1.2rem; display: grid; gap: .45rem; font-size: .93rem; color: var(--rezept-text); }
.rezept .tipp { margin-top: .7rem; font-size: .85rem; color: var(--muted); }
.rezept .tipp b { color: var(--basil); }
html[data-theme="dark"] .rezept .tipp b { color: #81c784; }

footer { margin-top: 2rem; color: var(--subtle); font-size: .8rem; text-align: center; }

/* ---- Mobil ---- */
@media (max-width: 600px) {
  body { padding: 1.2rem .8rem calc(2rem + env(safe-area-inset-bottom)); }
  header { margin-bottom: 1rem; }
  header .pizza-glyph { font-size: 3rem; }
  h1 { font-size: 1.55rem; }
  .sub { font-size: .85rem; padding: 0 .5rem; }
  .pizza { width: min(94vw, 400px); }
  .center { inset: 10%; gap: .6rem; }
  .fields { gap: .9rem; }
  .field input[type=number] { width: 96px; font-size: 1.15rem; }
  .range { width: 120px; }
  .divider { width: 88%; }
  .tagline { font-size: .88rem; }
  .toppings { grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: 1.2rem; }
  .card { padding: .7rem .5rem .6rem; }
  .card .icon { font-size: 1.6rem; }
  .card .name { font-size: .82rem; }
  .card .value { font-size: 1.25rem; }
  .rezept { padding: .9rem .9rem; }
  .rezept ol { font-size: .88rem; }
}