/* =============================================================
   SonnenLicht – Custom styles (loaded after Tailwind Play CDN)
   Brand tokens, reusable components, image placeholders, toast.
   ============================================================= */

:root {
  --forest: #2D4A22;
  --forest-dark: #1E3317;
  --sand: #C8A56A;
  --sand-dark: #B08E50;
  --cream: #FAF7F0;
  --ink: #1C2818;
  --stone: #5A5F52;
  --line: #E6E1D5;
}

html { scroll-behavior: smooth; background-color: var(--cream); }

/* ---- Sanfte Seitenübergänge (View Transitions, Chrome/Edge) --
   Kein weißes Aufblitzen mehr beim Seitenwechsel: der Inhalt
   blendet sanft über, Header/Footer bleiben ruhig stehen. */
@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
footer { view-transition-name: site-footer; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation-duration: .16s; }
  ::view-transition-new(root) { animation-duration: .28s; }
}

body {
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sand); color: var(--forest-dark); }

/* ---- Visible keyboard focus (accessibility) ---------------- */
:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  border-radius: 9999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .2s ease;
}
.btn:focus-visible { outline-offset: 3px; }

.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: var(--forest-dark); box-shadow: 0 8px 20px rgba(28,40,24,.18); }

.btn-sand { background: var(--sand); color: var(--forest-dark); }
.btn-sand:hover { background: var(--sand-dark); box-shadow: 0 8px 20px rgba(176,142,80,.35); }

.btn-outline { background: transparent; color: var(--forest); border-color: var(--line); }
.btn-outline:hover { border-color: var(--forest); background: rgba(45,74,34,.05); }

.btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-light:hover { background: rgba(255,255,255,.2); }

/* ---- Nav links (weißes Pill-Highlight für die aktive Seite) - */
.nav-link {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-weight: 500;
  padding: .45rem .9rem;
  border-radius: 9999px;
  transition: background-color .2s ease, color .2s ease;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.10); }
.nav-link[aria-current="page"] { color: var(--forest-dark); background: #fff; font-weight: 600; }

/* Mobile-Menü: aktive Seite ebenfalls hervorheben */
[data-nav-menu] a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; }

/* ---- Cards ------------------------------------------------ */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
a.card:hover, .card-hover:hover {
  box-shadow: 0 6px 16px rgba(28,40,24,.08), 0 20px 48px rgba(28,40,24,.12);
  border-color: var(--sand);
}

/* ---- "Image" placeholders (topographic look) --------------
   Swap these <div> blocks for <img src="..." alt="..."> when
   real product photos are available (e.g. via Nano Banana Pro).
   ----------------------------------------------------------- */
.topo {
  position: relative;
  background-color: var(--forest);
  background-image:
    radial-gradient(120% 120% at 0% 0%, rgba(94,124,74,.55) 0%, transparent 45%),
    radial-gradient(120% 120% at 100% 100%, rgba(200,165,106,.45) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.5'%3E%3Cpath d='M-20 80 C 60 20 180 140 260 80'/%3E%3Cpath d='M-20 120 C 60 60 180 180 260 120'/%3E%3Cpath d='M-20 160 C 60 100 180 220 260 160'/%3E%3Cpath d='M-20 200 C 60 140 180 260 260 200'/%3E%3Cpath d='M-20 40 C 60 -20 180 100 260 40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, cover, 240px 240px;
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.topo--sand {
  background-color: var(--sand-dark);
  background-image:
    radial-gradient(120% 120% at 0% 0%, rgba(228,211,174,.7) 0%, transparent 45%),
    radial-gradient(120% 120% at 100% 100%, rgba(45,74,34,.4) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='1.5'%3E%3Cpath d='M-20 80 C 60 20 180 140 260 80'/%3E%3Cpath d='M-20 120 C 60 60 180 180 260 120'/%3E%3Cpath d='M-20 160 C 60 100 180 220 260 160'/%3E%3C/g%3E%3C/svg%3E");
}
.topo__label {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 1rem 1.25rem;
  font-size: 1.05rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* ---- Pills / badges --------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  border-radius: 9999px;
  background: rgba(45,74,34,.08);
  color: var(--forest);
}

/* ---- Forms ------------------------------------------------ */
.field-label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.field-input {
  width: 100%;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .75rem;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field-input::placeholder { color: #9aa091; }
.field-input:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(45,74,34,.15);
}

/* ---- Cart badge ------------------------------------------- */
.cart-badge {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 9999px;
  background: var(--sand);
  color: var(--forest-dark);
}
.cart-badge.is-visible { display: inline-flex; }

/* ---- Toast (tracking-event feedback) ---------------------- */
#sl-toast-wrap {
  position: fixed;
  z-index: 60;
  right: 1rem; bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: min(92vw, 380px);
}
.sl-toast {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: var(--forest-dark);
  color: #fff;
  padding: .9rem 1rem;
  border-radius: .9rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  border-left: 4px solid var(--sand);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.sl-toast.is-in { opacity: 1; transform: translateY(0); }
.sl-toast__icon { flex: none; color: var(--sand); margin-top: 1px; }
.sl-toast__title { font-weight: 600; font-size: .95rem; }
.sl-toast__msg { font-size: .85rem; color: rgba(255,255,255,.82); margin-top: 2px; }
.sl-toast code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--sand); }

/* ---- Sanfter Einblend-Effekt ------------------------------
   Rein CSS: kann Inhalte NIE dauerhaft verstecken. Mit JS blendet
   der Inhalt einmalig ein; ohne JS oder bei reduced-motion ist er
   sofort sichtbar (kein Risiko leerer Seiten). */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { animation: sl-rise .6s ease both; }
}
@keyframes sl-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Respect reduced motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sl-toast { transition: opacity .15s ease; transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .08s !important; }
}