/* =========================================================================
   Fellknopf, Designsystem
   Warm, bunt, rund. Kein weißer Kasten mit grauer Schrift.
   ========================================================================= */

/* ---------- hidden schlägt jedes display ---------------------------------
   Das Attribut [hidden] entspricht nur `display: none` mit sehr niedriger
   Spezifität. Jede Klasse mit eigenem `display` überstimmt es lautlos, und
   das Element bleibt sichtbar, obwohl es als versteckt markiert ist.

   Genau das ist beim leeren Warenkorb passiert: #cart-root trägt [hidden],
   aber .cart-grid setzt `display: grid`. Ergebnis war eine leere Bestellung
   mit „0,00 €" UND einem anklickbaren „Zur Kasse", direkt über dem Hinweis,
   dass der Korb leer ist. Gefunden am 18.08.2026 beim Handy-Durchgang.

   Diese eine Regel deckt alle betroffenen Elemente ab: .cart-grid, .tl,
   .cart-count, .toast, .marquee, .rv-msg. Neue kommen automatisch dazu.
   Kein JS im Projekt setzt style.display, das !important stört also nichts. */
[hidden] { display: none !important; }

/* ---------- Schriften, selbst gehostet wegen DSGVO (kein Google-CDN) ------ */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- Tokens */
:root {
  --cream: #fff8ee;
  --cream-2: #fff1dc;
  --paper: #fffdf9;
  --ink: #2e1f16;
  --ink-soft: #6d5545;
  --ink-faint: #9b8676;

  --marigold: #f59b22;
  --marigold-d: #d97f0a;
  --marigold-l: #ffe2a8;
  --tomato: #ff6b54;
  --tomato-l: #ffd9d2;
  --berry: #e5426b;
  --berry-l: #ffd6e0;
  --forest: #2e6b58;
  --forest-l: #cfe9de;
  --sky: #3f9ddb;
  --sky-l: #d3ecfb;
  --lilac: #8f7fe0;
  --lilac-l: #e4defb;
  --mint: #5ec08a;

  --line: #f0dcc2;
  --shadow-sm: 0 2px 0 rgba(46, 31, 22, .08);
  --shadow: 0 14px 30px -14px rgba(46, 31, 22, .28);
  --shadow-lg: 0 30px 60px -24px rgba(46, 31, 22, .35);

  --r-sm: 14px;
  --r: 22px;
  --r-lg: 34px;
  --r-xl: 46px;

  --wrap: 1180px;
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: 'Fredoka', 'Nunito', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.65rem); }
p { margin: 0 0 1em; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap-narrow { max-width: 780px; }
.section { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.center { text-align: center; }
.lead { font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--ink-soft); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
  background: var(--marigold-l); color: var(--marigold-d);
  margin-bottom: 18px;
}
.eyebrow.is-sky { background: var(--sky-l); color: #1d6ea3; }
.eyebrow.is-berry { background: var(--berry-l); color: #b52a4f; }
.eyebrow.is-forest { background: var(--forest-l); color: #1f5343; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-shadow: #14100c;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.02rem;
  padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg); text-decoration: none;
  box-shadow: 0 4px 0 var(--btn-shadow); transition: transform .16s, box-shadow .16s, filter .16s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--btn-shadow); filter: saturate(1.08); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-shadow); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn-primary { --btn-bg: var(--marigold); --btn-fg: #40260a; --btn-shadow: #b96b07; }
.btn-berry { --btn-bg: var(--berry); --btn-fg: #fff; --btn-shadow: #a92a4d; }
.btn-forest { --btn-bg: var(--forest); --btn-fg: #fff; --btn-shadow: #1d4a3b; }
.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-shadow: transparent;
  border: 2px solid var(--ink); box-shadow: none;
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); box-shadow: none; }
.btn-lg { padding: 18px 36px; font-size: 1.12rem; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------- Icons, Basis */
/* Alle Icons sind inline-SVG mit viewBox, ABER ohne width/height-Attribute.
   Ohne eigene Regel schrumpfen sie in einem Flex-Container auf 0x0 und
   verschwinden spurlos, ohne Fehler und ohne Lücke im Layout. Genau das war
   beim Warenkorb-Icon der Fall: sichtbar wurde es erst am Handy, wo die
   Beschriftung ausgeblendet ist und nur ein schwarzer Fleck übrig blieb.
   Diese Regel ist das Sicherheitsnetz. Jede konkretere Regel sticht sie. */
svg { width: 24px; height: 24px; flex: none; }

/* ------------------------------------------------------------------ Header */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 248, 238, .88); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 2px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 18px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand svg { width: 38px; height: 38px; flex: none; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.brand:hover svg { transform: rotate(-14deg) scale(1.08); }
.brand-name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.42rem; letter-spacing: -.02em; }
.brand-name b { color: var(--marigold-d); font-weight: 600; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  text-decoration: none; font-weight: 700; font-size: .98rem; padding: 9px 14px;
  border-radius: 999px; color: var(--ink-soft); transition: background .18s, color .18s;
}
.nav a:hover, .nav a[aria-current='page'] { background: var(--marigold-l); color: var(--ink); }
.cart-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 11px 18px; border-radius: 999px; font-family: 'Fredoka', sans-serif; font-weight: 600;
  box-shadow: 0 3px 0 #14100c; transition: transform .16s;
}
.cart-btn svg { width: 22px; height: 22px; }
.cart-btn:hover { transform: translateY(-2px); }
.cart-count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--tomato); color: #fff; font-size: .8rem; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.cart-count.is-bump { animation: bump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.burger svg { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .burger { display: block; order: 3; }
  .nav {
    position: absolute; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--cream); border-bottom: 2px solid var(--line); padding: 12px 18px 20px;
    gap: 2px; display: none; box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 14px; font-size: 1.05rem; }
  .cart-btn { padding: 10px 14px; }
  .cart-btn span.label { display: none; }
}

/* -------------------------------------------------------------------- Hero */
.hero { position: relative; padding: clamp(40px, 6vw, 76px) 0 clamp(60px, 8vw, 96px); overflow: hidden; }
/* Hero ohne Bild: eine Spalte, zentriert, die Pfoten übernehmen die Deko. */
.hero-plain { text-align: center; padding: clamp(56px, 9vw, 116px) 0 clamp(56px, 8vw, 104px); }
.hero-plain .hero-text { max-width: 46rem; margin-inline: auto; }
.hero-plain .hero-cta, .hero-plain .hero-badges { justify-content: center; }
.hero-plain h1 { font-size: clamp(2.4rem, 6.4vw, 4.4rem); }
.hero-plain .lead { font-size: clamp(1.08rem, 2vw, 1.3rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.hero h1 { margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--marigold-d); position: relative; white-space: nowrap; }
.hero h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .04em; height: .22em;
  background: var(--marigold-l); border-radius: 999px; z-index: -1;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 22px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px 20px; font-weight: 700; font-size: .95rem; color: var(--ink-soft); }
.hero-badges span { display: inline-flex; align-items: center; gap: 7px; }
.hero-badges svg { width: 18px; height: 18px; color: var(--forest); flex: none; }

.hero-art { position: relative; }
.blob-photo { position: relative; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 1/1; }
.blob-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-art .ring {
  position: absolute; inset: -18px; border: 3px dashed var(--marigold);
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; opacity: .5;
  animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.float-card {
  position: absolute; background: var(--paper); border: 2px solid var(--ink);
  border-radius: var(--r); padding: 12px 16px; box-shadow: 0 6px 0 var(--ink);
  font-weight: 800; font-size: .92rem; display: flex; align-items: center; gap: 10px;
  animation: bob 5s ease-in-out infinite;
}
.float-card small { display: block; font-weight: 700; color: var(--ink-soft); font-size: .8rem; }
/* Картите седят на ръба на блоба, не върху лицето на кучето. */
.float-card.fc-1 { left: -18px; top: 40%; animation-delay: -1.2s; }
.float-card.fc-2 { right: -10px; bottom: 14%; animation-delay: -3s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }

.paw-deco { position: absolute; color: var(--marigold); opacity: .18; pointer-events: none; z-index: -1; }
.paw-deco svg { width: 100%; height: 100%; }
/* Auf dem Handy stehen die Pfoten sonst mitten im Text. */
@media (max-width: 700px) {
  .paw-deco { opacity: .1; }
  .paw-deco:nth-of-type(3), .paw-deco:nth-of-type(4) { display: none; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 420px; margin-inline: auto; }
  .hero { text-align: center; }
  .hero-cta, .hero-badges { justify-content: center; }
}

/* ---------------------------------------------------------------- Marquee */
.marquee {
  background: var(--ink); color: var(--cream); padding: 13px 0; overflow: hidden;
  border-block: 3px solid var(--ink);
}
.marquee-track { display: flex; gap: 44px; width: max-content; animation: slide 34s linear infinite; }
.marquee span { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 1rem; letter-spacing: .03em; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.marquee span::after { content: '🐾'; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track, .hero-art .ring, .float-card { animation: none; } }

/* --------------------------------------------------------------- Produkte */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.pcard {
  position: relative; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  box-shadow: 0 6px 0 var(--ink); transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s;
}
.pcard:hover { transform: translateY(-6px); box-shadow: 0 12px 0 var(--ink); }
.pcard-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--tint, var(--marigold-l)); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pcard:hover .pcard-media img { transform: scale(1.06); }
.pcard-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--ink); color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: .8rem; padding: 6px 13px; border-radius: 999px;
}
.pcard-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard h3 { margin: 0; }
.pcard p { color: var(--ink-soft); margin: 0; font-size: .98rem; flex: 1; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.price { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.5rem; }
.price s { color: var(--ink-faint); font-size: .95rem; font-weight: 500; margin-left: 8px; }
.pcard-go {
  display: inline-flex; align-items: center; gap: 6px; font-family: 'Fredoka', sans-serif;
  font-weight: 600; background: var(--marigold); color: #40260a; padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--marigold-d); transition: transform .16s;
}
.pcard-go svg { width: 18px; height: 18px; }
.pcard:hover .pcard-go { transform: translateX(3px); }

/* ------------------------------------------------------------- Farbblöcke */
.band { position: relative; color: var(--ink); }
.band-forest { background: var(--forest-l); }
.band-sky { background: var(--sky-l); }
.band-berry { background: var(--berry-l); }
.band-butter { background: var(--marigold-l); }
.band-ink { background: var(--ink); color: var(--cream); }
.band-ink h2, .band-ink h3 { color: var(--cream); }
.band-ink .lead, .band-ink p { color: #ddc9b6; }
.band-ink .step-num { color: var(--ink); border-color: var(--cream); box-shadow: 0 5px 0 rgba(255, 248, 238, .35); }
.band-ink .eyebrow { background: var(--marigold); color: #40260a; }
.wave { display: block; width: 100%; height: clamp(38px, 5vw, 72px); }
.wave path { fill: currentColor; }

/* ------------------------------------------------------------------ Story */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.story-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.story-photos figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.story-photos figure:nth-child(1) { grid-row: span 2; aspect-ratio: 3/5; transform: rotate(-2deg); }
.story-photos figure:nth-child(2) { aspect-ratio: 4/3; transform: rotate(2deg); }
.story-photos figure:nth-child(3) { aspect-ratio: 4/3; transform: rotate(-1.5deg); }
.story-photos img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .story { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- USP-Grid */
.usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.usp {
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: 26px 22px; box-shadow: 0 6px 0 var(--ink); transition: transform .2s;
}
.usp:hover { transform: translateY(-4px) rotate(-1deg); }
.usp-ico {
  width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center;
  background: var(--marigold-l); color: var(--marigold-d); margin-bottom: 14px;
}
.usp:nth-child(2) .usp-ico { background: var(--sky-l); color: #1d6ea3; }
.usp:nth-child(3) .usp-ico { background: var(--berry-l); color: #b52a4f; }
.usp:nth-child(4) .usp-ico { background: var(--forest-l); color: #1f5343; }
.usp-ico svg { width: 28px; height: 28px; }
.usp h3 { font-size: 1.15rem; margin-bottom: 6px; }
.usp p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* --------------------------------------------------------------- Schritte */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; counter-reset: s; }
.step { position: relative; padding-top: 18px; }
.step-num {
  width: 62px; height: 62px; border-radius: 22px; display: grid; place-items: center;
  font-family: 'Fredoka', sans-serif; font-size: 1.6rem; font-weight: 600;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  margin-bottom: 16px; transform: rotate(-4deg);
}
.step:nth-child(2) .step-num { transform: rotate(3deg); background: var(--marigold-l); }
.step:nth-child(3) .step-num { transform: rotate(-2deg); background: var(--sky-l); }
.step h3 { font-size: 1.2rem; }
.step p { color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------------ Produktseite */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.gallery { position: sticky; top: calc(var(--nav-h) + 18px); }
.gal-main {
  border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--ink); box-shadow: 0 8px 0 var(--ink);
  background: var(--cream-2); aspect-ratio: 1/1;
}
.gal-main img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.gal-thumbs button {
  width: 72px; height: 72px; border-radius: 16px; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px solid var(--line); background: var(--cream-2); transition: border-color .18s, transform .18s;
}
.gal-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumbs button:hover { transform: translateY(-2px); }
.gal-thumbs button[aria-current='true'] { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }

.pdp-head h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: 10px; }
.pdp-tag { color: var(--ink-soft); font-size: 1.1rem; font-weight: 700; margin-bottom: 18px; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pdp-price .price { font-size: 2.3rem; }
.pdp-vat { font-size: .88rem; color: var(--ink-soft); margin-bottom: 22px; }
.pdp-short { font-size: 1.06rem; }

.opt { margin: 22px 0; }
.opt-label { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem; margin-bottom: 10px; display: flex; gap: 8px; align-items: baseline; }
.opt-label i { font-style: normal; color: var(--ink-soft); font-weight: 400; font-family: 'Nunito', sans-serif; font-size: .92rem; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--line); cursor: pointer;
  padding: 0; position: relative; transition: transform .16s, border-color .16s;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed='true'] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--ink); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  border: 2px solid var(--line); background: var(--paper); border-radius: 14px; padding: 9px 14px;
  cursor: pointer; font-weight: 700; line-height: 1.15; transition: all .16s; text-align: center;
}
.chip small { display: block; font-weight: 600; font-size: .76rem; color: var(--ink-faint); }
.chip:hover { border-color: var(--ink-faint); }
.chip[aria-pressed='true'] { border-color: var(--ink); background: var(--marigold-l); box-shadow: 0 3px 0 var(--ink); }

.qty { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--paper); }
.qty button { width: 44px; height: 48px; border: 0; background: none; cursor: pointer; font-size: 1.3rem; color: var(--ink); }
.qty button:hover { background: var(--marigold-l); }
.qty output { min-width: 40px; text-align: center; font-weight: 800; }
.buy-row { display: flex; gap: 12px; align-items: center; margin: 24px 0 18px; flex-wrap: wrap; }
.buy-row .btn { flex: 1; min-width: 200px; }
/* „Jetzt kaufen" steht UNTER der Warenkorb-Zeile, nicht daneben: zwei gleich
   große Knöpfe nebeneinander zwingen zu einer Entscheidung, die niemand treffen
   will. Oben die übliche Handlung, darunter die Abkürzung. */
.buy-row { margin-bottom: 12px; }
[data-buy-now] { margin-bottom: 8px; }
.buy-now-note { font-size: .84rem; color: var(--ink-soft); margin: 0 0 18px; }
.pdp-err {
  background: #ffd6e0; color: #8d1e3c; border: 2px solid var(--berry);
  border-radius: 12px; padding: 11px 14px; font-size: .9rem; font-weight: 600;
  margin: 0 0 18px;
}

.trust { display: grid; gap: 10px; padding: 18px 20px; background: var(--forest-l); border-radius: var(--r); margin-top: 8px; }
.trust div { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; font-weight: 600; }
.trust svg { width: 20px; height: 20px; color: var(--forest); flex: none; margin-top: 2px; }

@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; }
}

/* --------------------------------------------------------------- Highlights */
.hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.hl {
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-lg); padding: 24px;
  box-shadow: 0 6px 0 var(--ink); transition: transform .2s;
}
.hl:hover { transform: translateY(-4px); }
.hl-ico { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 12px; background: var(--marigold-l); color: var(--marigold-d); }
.hl:nth-child(3n+2) .hl-ico { background: var(--sky-l); color: #1d6ea3; }
.hl:nth-child(3n+3) .hl-ico { background: var(--berry-l); color: #b52a4f; }
.hl-ico svg { width: 26px; height: 26px; }
.hl h3 { font-size: 1.12rem; margin-bottom: 6px; }
.hl p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* -------------------------------------------------------------- Spec-Table */
.spec { width: 100%; border-collapse: collapse; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.spec th, .spec td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: .97rem; vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th { font-family: 'Fredoka', sans-serif; font-weight: 600; width: 40%; background: var(--cream-2); }
.table-scroll { overflow-x: auto; border-radius: var(--r); }

/* --------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r);
  padding: 4px 20px; box-shadow: 0 4px 0 var(--ink);
}
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.06rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.7rem; line-height: 1; color: var(--marigold-d); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 16px; color: var(--ink-soft); }

/* ------------------------------------------------------------------- Video */
.vid-wrap {
  border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--ink);
  box-shadow: 0 8px 0 var(--ink); background: #000; max-width: 420px;
}
.vid-wrap video { width: 100%; display: block; }

/* ------------------------------------------------- Produktseite, Erzählung */
/* Рамкирана снимка за разказните секции на продуктовата страница. */
.pdp-figure {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 2px solid var(--ink); box-shadow: 0 8px 0 var(--ink);
  background: var(--paper); aspect-ratio: 1/1;
}
.pdp-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Надпис В снимката, за спецификацията, която кадърът показва.
   Сяда в свободното поле горе, точно където CJ беше сложил английския текст.
   Пише се в HTML, не се пече в снимката, затова е остър, четим от Google и
   се мени без ffmpeg. Дъното е леко замъглено стъкло, за да остане текстът
   четим и ако снимката отдолу някога стане по-шарена. */
.pdp-figure.has-badge { position: relative; }
.pdp-badge {
  position: absolute; top: 0; left: 0; right: 0;
  padding: clamp(16px, 3.2vw, 26px) clamp(18px, 3.6vw, 30px);
  display: grid; gap: 5px;
  background: linear-gradient(180deg, rgba(255, 248, 238, .96) 62%, rgba(255, 248, 238, 0));
  backdrop-filter: blur(2px);
}
.pdp-badge-k {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--marigold-d);
}
.pdp-badge-v {
  font-family: 'Fredoka', sans-serif; font-weight: 600; line-height: 1.05;
  font-size: clamp(1.7rem, 4.4vw, 2.3rem); color: var(--ink);
}
.pdp-badge-t {
  font-size: clamp(.84rem, 1.7vw, .95rem); line-height: 1.45;
  color: var(--ink-soft); max-width: 30rem;
}
/* Лента ПОД снимката, в същата рамка. Рамката спира да е квадрат, квадратът
   се мести върху самата снимка, за да не я смачка лентата. */
.pdp-figure.has-cap { aspect-ratio: auto; display: flex; flex-direction: column; }
.pdp-figure.has-cap img { aspect-ratio: 1/1; height: auto; }
.pdp-cap {
  background: var(--ink); color: #efe2d4;
  padding: clamp(14px, 2.6vw, 20px) clamp(16px, 3vw, 24px) clamp(16px, 2.8vw, 22px);
}
.pdp-cap-k {
  display: block; margin-bottom: 10px;
  font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--marigold);
}
.pdp-cap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
/* column-gap държи термина и обяснението разделени на един ред, row-gap ги
   държи слепени, когато се пренесат. Иначе при тесен екран разстоянието между
   двойките изглежда същото като вътре в двойката и списъкът се чете грешно. */
.pdp-cap-list li {
  display: flex; column-gap: 8px; row-gap: 1px; flex-wrap: wrap;
  font-size: clamp(.82rem, 1.6vw, .92rem); line-height: 1.45;
}
.pdp-cap-list b { color: #fff; font-weight: 800; flex: none; }
.pdp-cap-list span { color: #c9b6a3; }

/* Кроп към долния ръб, за високи кадри, чийто сюжет е в долната половина. */
.pdp-figure.is-pos-bottom img { object-position: 50% 100%; }
.pdp-figure.is-tilt-l { transform: rotate(-1.5deg); }
.pdp-figure.is-tilt-r { transform: rotate(1.5deg); }
@media (max-width: 820px) { .pdp-figure.is-tilt-l, .pdp-figure.is-tilt-r { transform: none; } }

/* Редуващи се блокове снимка + текст. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.is-flip .split-media { order: 2; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split.is-flip .split-media { order: 0; }
}

/* "Wofür es gemacht ist, und wofür nicht" */
.uc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .uc-grid { grid-template-columns: 1fr; } }
.uc-card {
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: 26px 24px; box-shadow: 0 6px 0 var(--ink);
}
.uc-card h3 { font-size: 1.18rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.uc-card h3 svg { width: 24px; height: 24px; flex: none; }
.uc-card.is-yes h3 svg { color: var(--forest); }
.uc-card.is-no h3 svg { color: var(--ink-faint); }
.uc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.uc-list li { display: flex; gap: 11px; font-size: .97rem; color: var(--ink-soft); line-height: 1.5; }
.uc-list li::before {
  content: ''; flex: none; width: 9px; height: 9px; border-radius: 999px; margin-top: 8px;
}
.uc-card.is-yes .uc-list li::before { background: var(--forest); }
.uc-card.is-no .uc-list li::before { background: var(--line); border: 2px solid var(--ink-faint); width: 11px; height: 11px; margin-top: 7px; }

/* Медиата до листовете: видеото на производителя. */
.uc-media { display: grid; justify-items: center; gap: 12px; }
.uc-media .vid-wrap { max-width: 340px; width: 100%; }
.uc-media p { margin: 0; font-size: .87rem; color: var(--ink-soft); text-align: center; }

/* Тъмната секция с техническите данни. */
.band-ink .spec { background: #3b2a1f; border-color: #5b4536; color: #f3e6da; }
.band-ink .spec th { background: #4a3628; color: #fff; border-bottom-color: #5b4536; }
.band-ink .spec td { border-bottom-color: #5b4536; color: #ddc9b6; }
.band-ink .pdp-figure { border-color: #5b4536; box-shadow: 0 8px 0 #5b4536; background: #3b2a1f; }
.band-ink .trust { background: #3b2a1f; }
.band-ink .trust div { color: #f3e6da; }
.band-ink .trust svg { color: var(--marigold); }

/* Финалният призив долу на продуктовата страница. */
.pdp-cta { text-align: center; }
.pdp-cta .price { font-size: 2rem; }
.pdp-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 22px; }

/* ---------------------------------------------------------- Lieferzeitstrahl */
/*
 * Трите стъпки от поръчката до доставката с истински дати. Дните се смятат
 * в браузъра (tlInit в app.js), затова блокът стои `hidden` в HTML-а и се
 * показва чак когато JS напълни датите. Без JS остава скрит, а сроковете и
 * без това са изписани с думи в .trust точно над него.
 */
.tl { margin: 22px 0 4px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); }
.tl-step { position: relative; text-align: center; padding: 0 4px; }
/* линията между кръговете */
.tl-step::before {
  content: ''; position: absolute; top: 25px; height: 3px; background: var(--ink-faint);
  left: -50%; right: 50%; margin: 0 26px;
}
.tl-step:first-child::before { display: none; }
.tl-ico {
  width: 50px; height: 50px; border-radius: 999px; margin: 0 auto 12px;
  display: grid; place-items: center; background: var(--ink); color: var(--cream);
  position: relative; z-index: 1;
}
.tl-ico svg { width: 24px; height: 24px; }
.tl-step:first-child .tl-ico { background: var(--marigold); color: #40260a; }
.tl-date { display: block; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .98rem; line-height: 1.25; }
.tl-label { display: block; font-size: .82rem; color: var(--ink-soft); margin-top: 3px; }
.tl-note { font-size: .82rem; color: var(--ink-faint); margin: 12px 0 0; text-align: center; }

/*
 * На тесни колони най-дългият диапазон ("31. Aug. – 10. Sept.") се пренася на
 * два реда, а другите два остават на един. Резервираме два реда за датата,
 * за да стоят трите надписа Bestellt/Versandbereit/Geliefert на една линия.
 */
@media (max-width: 620px) {
  .tl-date { min-height: 2.5em; }
}

@media (max-width: 420px) {
  .tl-ico { width: 42px; height: 42px; }
  .tl-ico svg { width: 20px; height: 20px; }
  .tl-step::before { top: 21px; margin: 0 22px; }
  .tl-date { font-size: .86rem; }
  .tl-label { font-size: .74rem; }
}

/* -------------------------------------------------------------- Warenkorb */
.cart-line {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r);
  padding: 14px; box-shadow: 0 4px 0 var(--ink); margin-bottom: 14px;
}
.cart-line img { width: 92px; height: 92px; object-fit: cover; border-radius: 14px; }
.cart-line h3 { margin: 0 0 2px; font-size: 1.1rem; }
.cart-line .vari { color: var(--ink-soft); font-size: .9rem; font-weight: 600; }
.cart-line .rm { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-weight: 700; font-size: .86rem; text-decoration: underline; padding: 0; margin-top: 6px; }
.cart-line .rm:hover { color: var(--berry); }
.cart-right { text-align: right; display: grid; gap: 8px; justify-items: end; }
.summary { background: var(--marigold-l); border: 2px solid var(--ink); border-radius: var(--r-lg); padding: 24px; box-shadow: 0 6px 0 var(--ink); position: sticky; top: calc(var(--nav-h) + 18px); }
.summary-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-weight: 700; }
.summary-total { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.45rem; border-top: 2px solid var(--ink); padding-top: 14px; margin-top: 14px; }
.cart-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 30px; align-items: start; }
@media (max-width: 860px) { .cart-grid { grid-template-columns: 1fr; } .summary { position: static; } }
/* Auf schmalen Handys passen Bild + Name + Preis + Mengenwahl NICHT in eine
   Zeile. Vorher brach „79,90 €" um und das Eurozeichen stand allein darunter.
   Deshalb rutschen Preis und Mengenwahl auf eine eigene zweite Zeile. */
@media (max-width: 560px) {
  .cart-line { grid-template-columns: 72px 1fr; gap: 12px; }
  .cart-line img { width: 72px; height: 72px; }
  .cart-line h3 { font-size: 1.02rem; }
  .cart-right {
    grid-column: 1 / -1; display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    border-top: 2px solid var(--line); padding-top: 12px;
  }
}
/* Ein Preis wird nie umgebrochen. Gilt nur im Warenkorb, damit der
   durchgestrichene Altpreis auf der Produktseite weiter umbrechen darf. */
.cart-right .price { white-space: nowrap; }
/* 23 px hoch war als Ziel für einen Finger zu klein. */
.cart-line .rm { padding: 7px 0; margin-top: 1px; }

.empty-cart { text-align: center; padding: 60px 20px; }
/* Nur das große Korb-Symbol, NICHT der Pfeil im Button darunter. Vorher galt
   die Regel für jedes SVG im Block und blies den Button auf 90 px auf. */
.empty-ico svg { width: 90px; height: 90px; color: var(--marigold); margin-bottom: 18px; }

/* ----------------------------------------------------------------- Chat-FAB */
/* Schwebender Kontaktknopf unten rechts, der übliche Platz für einen Chat.
   Optisch eine Sprechblase, kein fremdes Markenlogo. Er führt auf wa.me, also
   ein reiner Link: kein Script von Meta, kein Cookie, keine Anfrage an Dritte,
   solange niemand klickt. Deshalb braucht er KEINE Einwilligung. Wohin er
   führt, steht im title und im aria-label. */
.chat-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 15px; border-radius: 999px;
  background: var(--forest); color: #fff; text-decoration: none;
  border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .98rem;
  transition: transform .16s, box-shadow .16s;
}
/* 28 px, за да не се слеят трите точки в балона на екран без retina. */
.chat-fab svg { width: 28px; height: 28px; }
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.chat-fab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* Am Handy nur das Symbol, sonst deckt der Knopf den halben Bildschirmrand. */
@media (max-width: 560px) {
  .chat-fab { right: 12px; bottom: 12px; padding: 12px; }
  .chat-fab-txt { display: none; }
}

/* Unter 520 px geht der Cookie-Banner über die volle Breite und liegt dann
   genau unter dem Knopf. Darüber sitzt der Banner nur links, also stört er
   rechts nicht mehr und der Knopf darf sofort sichtbar bleiben.
   Der Banner wird beim Entscheiden aus dem DOM entfernt, deshalb reicht :has()
   und consent.js bleibt unberührt. */
@media (max-width: 520px) {
  body:has(.ck) .chat-fab { opacity: 0; pointer-events: none; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) { .chat-fab { transition: none; } }

/* ------------------------------------------------------------------ Footer */
.ftr { background: var(--ink); color: #e8d9c9; padding: 60px 0 28px; }
.ftr a { color: #e8d9c9; text-decoration: none; }
.ftr a:hover { color: var(--marigold); text-decoration: underline; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.ftr h4 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .95rem; }
.ftr-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #fff; }
.ftr-brand svg { width: 34px; height: 34px; }
.ftr-brand span { font-family: 'Fredoka', sans-serif; font-size: 1.3rem; }
.ftr-note { font-size: .93rem; color: #b8a493; max-width: 34ch; }
.ftr-bottom { border-top: 1px solid #4a382b; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .88rem; color: #b8a493; }
@media (max-width: 780px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ftr-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Animationen */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* -------------------------------------------------------------- Toast/Flash */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 140%);
  background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 999px;
  font-weight: 700; box-shadow: var(--shadow-lg); z-index: 90; display: flex; gap: 10px; align-items: center;
  transition: transform .35s cubic-bezier(.34,1.4,.64,1);
}
.toast.is-in { transform: translate(-50%, 0); }

/* ----------------------------------------------------------- Rechtsseiten */
.legal { max-width: 780px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 24px; }
.legal h2 { font-size: 1.3rem; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 1rem; }
.legal ul { padding-left: 22px; }
.legal blockquote { border-left: 4px solid var(--marigold); margin: 18px 0; padding: 6px 0 6px 18px; color: var(--ink-soft); }
.legal a { color: var(--marigold-d); }