:root {
  --grund: #fff7f1;
  --karte: #ffffff;
  --text: #2a1720;
  --leise: #7d6670;
  --akzent: #c2185b;
  --akzent-dunkel: #8e1043;
  --akzent-text: #ffffff;
  --koralle: #ff7a59;
  --gold: #ffb627;
  --linie: #f1e0d8;
  --feld: #fffaf6;
  --gut: #1f9d55;
  --schlecht: #c0392b;
  --verlauf: linear-gradient(120deg, #8e1043 0%, #c2185b 35%, #ff7a59 75%, #ffb627 100%);
  --schatten: 0 6px 24px rgba(140, 30, 70, 0.10);
  --schatten-hoch: 0 14px 34px rgba(140, 30, 70, 0.20);
  --r: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #170f13;
    --karte: #241820;
    --text: #fbeef2;
    --leise: #bba2ad;
    --akzent: #ff4f8b;
    --akzent-dunkel: #d63a72;
    --akzent-text: #1a0d13;
    --linie: #3a2731;
    --feld: #1d1318;
    --gut: #4fd88a;
    --schlecht: #ff7a6b;
    --schatten: 0 6px 24px rgba(0, 0, 0, 0.4);
    --schatten-hoch: 0 14px 34px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.5 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
[hidden] { display: none !important; }

/* ---------- Kopf ---------- */
.kopf {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 30px 16px 54px;
  background: var(--verlauf);
  color: #fff;
  border-radius: 0 0 36px 36px;
}
.konfetti {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(circle, #fff 2px, transparent 2.5px),
    radial-gradient(circle, #ffe08a 2px, transparent 2.5px),
    radial-gradient(circle, #fff 1.5px, transparent 2px);
  background-size: 46px 46px, 70px 70px, 30px 30px;
  background-position: 0 0, 20px 30px, 10px 12px;
  pointer-events: none;
}
.logo {
  position: relative;
  font-weight: 900;
  font-size: clamp(32px, 9vw, 46px);
  letter-spacing: 0.06em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}
.logo .x { color: var(--gold); display: inline-block; transform: rotate(-8deg) scale(1.15); }
.logo-geschenk { display: inline-block; margin-right: 8px; animation: huepfen 2.4s ease-in-out infinite; }
.motto { position: relative; font-weight: 600; opacity: 0.95; }

.stufen {
  position: relative;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
}
.stufen li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.3s, color 0.3s;
}
.stufen b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  font-size: 12px;
}
.stufen li.an { background: #fff; color: var(--akzent-dunkel); }
.stufen li.an b { background: var(--akzent); color: #fff; }
.stufen li.fertig b { background: var(--gold); color: #5a3a00; }

main { max-width: 760px; margin: -30px auto 0; padding: 0 16px 40px; position: relative; }
h1 { font-size: clamp(24px, 6vw, 30px); line-height: 1.2; margin: 44px 0 6px; font-weight: 900; }
.karte + h1, .schritt > h1:first-child { margin-top: 44px; }
.leise { color: var(--leise); margin: 0 0 18px; }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: var(--schatten);
}
form.karte > * + * { margin-top: 22px; }
.login { text-align: center; margin-top: 44px; }
.login h1 { margin-top: 4px; }
.gross-emoji { font-size: 54px; }

/* ---------- Formular ---------- */
label, legend { display: block; font-weight: 700; }
label small { font-weight: 500; color: var(--leise); }
.frage { display: inline-flex; align-items: center; gap: 10px; }
.frage i {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(135deg, #ffe3ec, #ffeccf);
  font-size: 18px;
}
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
input, textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--feld);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px rgba(194, 24, 91, 0.15); }
.reihe { display: flex; gap: 10px; align-items: flex-end; }
.reihe input { margin-top: 8px; }
.halb { flex: 1; font-weight: 600; color: var(--leise); }
.strich { padding-bottom: 14px; color: var(--leise); font-weight: 700; }
#idee { margin-top: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips button {
  border: 2px solid var(--linie);
  background: var(--feld);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 15px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.chips button:hover { transform: translateY(-2px); border-color: var(--koralle); }
.chips button.an {
  background: var(--verlauf);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(194, 24, 91, 0.3);
}

/* ---------- Knöpfe ---------- */
button.haupt, button.neben {
  display: block;
  width: 100%;
  border-radius: 16px;
  padding: 16px;
  font: inherit;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
button.haupt {
  background: var(--verlauf);
  background-size: 160% 100%;
  color: #fff;
  border: 0;
  box-shadow: 0 8px 20px rgba(194, 24, 91, 0.35);
}
button.haupt:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(194, 24, 91, 0.45); }
button.haupt:active, button.neben:active { transform: scale(0.98); }
button.neben { background: var(--karte); color: var(--akzent); border: 2px solid var(--akzent); }
button.neben:hover { background: var(--feld); }
button.klein { width: auto; padding: 13px 20px; font-size: 16px; flex: none; }
button.link { display: block; margin: 6px auto 0; background: none; border: 0; color: var(--leise); font: inherit; padding: 12px; cursor: pointer; text-decoration: underline; }
button:disabled { opacity: 0.6; cursor: wait; }

.fehler { color: var(--schlecht); font-weight: 700; }

/* ---------- Richtungen ---------- */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.richtung {
  position: relative;
  overflow: hidden;
  text-align: left;
  color: var(--text);
  border: 0;
  border-radius: var(--r);
  padding: 20px 20px 22px;
  box-shadow: var(--schatten);
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: reinkommen 0.45s both;
}
.richtung:nth-child(4n + 1) { background: linear-gradient(140deg, #ffe1ea, #fff3e6); }
.richtung:nth-child(4n + 2) { background: linear-gradient(140deg, #e3f1ff, #f1e8ff); }
.richtung:nth-child(4n + 3) { background: linear-gradient(140deg, #ddf7e9, #fff8d8); }
.richtung:nth-child(4n + 4) { background: linear-gradient(140deg, #fff0cf, #ffe2d9); }
.richtung:nth-child(2) { animation-delay: 0.08s; }
.richtung:nth-child(3) { animation-delay: 0.16s; }
.richtung:nth-child(4) { animation-delay: 0.24s; }
.richtung:hover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: var(--schatten-hoch); }
.richtung .emoji { font-size: 40px; line-height: 1; }
.richtung strong { display: block; font-size: 21px; font-weight: 900; margin: 10px 0 4px; color: #2a1720; }
.richtung span { color: #5d4650; font-size: 15px; }
.richtung::after {
  content: "→";
  position: absolute;
  right: 18px;
  top: 18px;
  font-weight: 900;
  color: var(--akzent);
  font-size: 22px;
}
.eigene { margin-top: 16px; }
.eigene .reihe input { flex: 1; }

/* ---------- Laden ---------- */
.laden { text-align: center; padding: 50px 0 30px; }
.geschenk { font-size: 84px; display: inline-block; animation: huepfen 1.1s ease-in-out infinite; }
.tipp { font-weight: 600; min-height: 1.5em; color: var(--akzent); transition: opacity 0.3s; }
.balken { height: 10px; max-width: 360px; margin: 18px auto 10px; border-radius: 99px; background: var(--linie); overflow: hidden; }
.balken span { display: block; height: 100%; width: 40%; border-radius: 99px; background: var(--verlauf); animation: laufen 1.6s ease-in-out infinite; }
.uhr { font-variant-numeric: tabular-nums; }

/* ---------- Produkte ---------- */
.liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.produkt {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--karte);
  border: 2px solid var(--linie);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, opacity 0.2s;
  animation: reinkommen 0.45s both;
}
.produkt:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.produkt.gut { border-color: var(--gut); }
.produkt.schlecht { opacity: 0.5; }
.bild {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #ffe1ea, #fff1d6);
  font-size: 64px;
  overflow: hidden;
}
.produkt:nth-child(3n + 2) .bild { background: linear-gradient(140deg, #e3f1ff, #f1e8ff); }
.produkt:nth-child(3n + 3) .bild { background: linear-gradient(140deg, #ddf7e9, #fff8d8); }
.bild img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
@media (max-width: 480px) { .bild { aspect-ratio: 16 / 11; } }
.bild .shopname { position: absolute; bottom: 12px; left: 0; right: 0; font-size: 14px; font-weight: 800; color: #5d4650; text-align: center; padding: 0 12px; }
.nummer {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--karte);
  color: var(--akzent);
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.preis {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--verlauf);
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(194, 24, 91, 0.35);
}
.inhalt { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.produkt h2 { font-size: 18px; margin: 0 0 2px; line-height: 1.3; font-weight: 800; }
.shop { color: var(--leise); font-size: 14px; font-weight: 600; }
.warum { font-size: 15px; margin: 10px 0 16px; flex: 1; }
.warum::before { content: "💡 "; }
.knoepfe { display: flex; gap: 8px; align-items: center; }
.zumshop {
  flex: 1;
  text-align: center;
  background: var(--akzent);
  color: var(--akzent-text);
  text-decoration: none;
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 800;
  font-size: 15px;
  transition: filter 0.2s;
}
.zumshop:hover { filter: brightness(1.1); }
.daumen {
  border: 2px solid var(--linie);
  background: var(--feld);
  border-radius: 12px;
  width: 48px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
}
.daumen:hover { transform: scale(1.08); }
.daumen.an[data-wert="gut"] { border-color: var(--gut); background: #e3f8ec; animation: plopp 0.3s; }
.daumen.an[data-wert="schlecht"] { border-color: var(--schlecht); background: #fde6e3; animation: plopp 0.3s; }

.aktionen { display: grid; gap: 12px; margin-top: 26px; }
.kosten { color: var(--leise); font-size: 13px; text-align: center; margin-top: 16px; }
.fuss { text-align: center; color: var(--leise); font-size: 12px; padding: 0 16px 28px; }

/* ---------- Konfetti beim Ergebnis ---------- */
.schnipsel {
  position: fixed;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 10;
  animation: fallen linear forwards;
}

/* ---------- Bewegung ---------- */
@keyframes huepfen { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-14px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }
@keyframes laufen { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes reinkommen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes plopp { 50% { transform: scale(1.25); } }
@keyframes fallen { to { transform: translateY(105vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}