/* ===== Gelatería – Custom Styles (ergänzt Tailwind CDN) ===== */

:root {
  --berry: #f23a64;
  --caramel: #e8943a;
  --pistachio: #84b94a;
}

html, body { -webkit-font-smoothing: antialiased; }

body { overflow-x: hidden; }

/* Feinere Font-Weights die Tailwind nicht standardmäßig kennt */
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }

/* ===== Navigation ===== */
.nav-link {
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #3b3531;
  transition: color .2s, background-color .2s;
}
.nav-link:hover { color: #1c1815; background: rgba(28,24,21,.05); }
.nav-link.active { color: #bb1240; background: #ffe0e7; }

.mobile-link {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  font-weight: 500;
  color: #2a2521;
  transition: background-color .2s;
}
.mobile-link:hover { background: rgba(28,24,21,.05); }
.mobile-link.active { background: #ffe0e7; color: #bb1240; }

.footer-link { color: rgba(59,53,49,.75); transition: color .2s; }
.footer-link:hover { color: #bb1240; }

/* Navbar Shrink-Effekt beim Scrollen */
#navbar.scrolled #nav-inner {
  background: rgba(255,255,255,.85);
  box-shadow: 0 12px 40px -16px rgba(50,30,20,.35);
}

/* ===== Hintergrund-Blobs ===== */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  animation: float 18s ease-in-out infinite;
}
.blob-berry { width: 38rem; height: 38rem; top: -10rem; right: -8rem; background: radial-gradient(circle, rgba(242,58,100,.45), transparent 70%); }
.blob-pistachio { width: 32rem; height: 32rem; bottom: 5rem; left: -10rem; background: radial-gradient(circle, rgba(132,185,74,.4), transparent 70%); animation-delay: -6s; }
.blob-caramel { width: 30rem; height: 30rem; top: 40%; right: -6rem; background: radial-gradient(circle, rgba(232,148,58,.38), transparent 70%); animation-delay: -12s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(2rem, -2rem) scale(1.08); }
  66% { transform: translate(-1.5rem, 1.5rem) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ===== Reveal-on-scroll ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ===== Range Slider (Mengenrechner) ===== */
.amount-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--berry) 0%, var(--berry) var(--p, 30%), #f3e7d3 var(--p, 30%), #f3e7d3 100%);
  outline: none;
  cursor: pointer;
}
.amount-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--berry);
  box-shadow: 0 6px 18px -4px rgba(242,58,100,.6);
  transition: transform .15s;
}
.amount-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.amount-slider::-moz-range-thumb {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--berry);
  box-shadow: 0 6px 18px -4px rgba(242,58,100,.6);
}

/* ===== Cards ===== */
.recipe-card { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s; }
.recipe-card:hover { transform: translateY(-8px); }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Segmented control / Chips ===== */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.05rem;
  border-radius: 9999px;
  font-size: .875rem; font-weight: 500;
  background: #fff;
  color: #3b3531;
  border: 1px solid rgba(28,24,21,.08);
  transition: all .2s;
  cursor: pointer;
}
.chip:hover { border-color: rgba(28,24,21,.2); }
.chip.active {
  background: #1c1815; color: #fdfbf7; border-color: #1c1815;
}

/* ===== Modal ===== */
#settings-modal.open { display: flex; }
.modal-card { animation: pop .3s cubic-bezier(.22,1,.36,1); }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }

/* ===== Toast ===== */
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1.2rem;
  border-radius: 9999px;
  background: #1c1815; color: #fdfbf7;
  font-size: .9rem; font-weight: 500;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.4);
  animation: toastIn .35s cubic-bezier(.22,1,.36,1);
}
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(16px); } }

/* ===== Skeleton ===== */
.skeleton { position: relative; overflow: hidden; background: #f3e7d3; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ===== Stepper line ===== */
.step-item:not(:last-child) .step-line { display: block; }

/* ===== Hero gradient text ===== */
.text-gradient {
  background: linear-gradient(120deg, var(--berry), var(--caramel) 60%, var(--pistachio));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Print: nur Rezeptinhalt */
@media print {
  #navbar, #mobile-menu, footer, #to-top, .blob, #settings-modal, #toast-wrap, .no-print { display: none !important; }
  body { background: #fff; }
}