/* ============================================================
   FUMOT — Produktdetailseite: Galerie, Preise, Mengenrabatt,
   technische Daten, Tabs
   ============================================================ */

/* ============================================================
   PDP (product detail)
   ============================================================ */
.pdp { padding-top: 132px; }
.pdp__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(30px, 4.5vw, 72px); align-items: start; }

.pdp__gallery { position: sticky; top: 104px; align-self: start; }
.pdp__buy { min-width: 0; }

.pdp__def { margin-top: 14px; font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.pdp__def strong { font-weight: 600; color: var(--ink); }

.pdp__pricerow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-block: 22px 0; }
.pdp__pricenote { font-size: .8rem; color: var(--muted); }

/* Bewertung direkt unter dem Preis */
.pdp__rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.pdp__stars { display: inline-flex; gap: 2px; color: var(--accent); }
.pdp__stars svg { width: 15px; height: 15px; display: block; }
.pdp__rate-text { font-size: .88rem; color: var(--ink-2); white-space: nowrap; }
.pdp__rate-text b { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.pdp__rate-link { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; transition: opacity var(--dur-fast) var(--ease); }
.pdp__rate-link:hover { opacity: .72; }

/* ---------------- Sorten-Dropdown ---------------- */
.fsel { position: relative; }
.fsel__trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 15px; border: 1.5px solid var(--line-2); border-radius: var(--r-inner);
  background: #fff; color: var(--ink); font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.fsel__trigger[aria-expanded="true"], .fsel__trigger:focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint);
}
.fsel__trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel__caret { flex: 0 0 auto; color: var(--blue); transition: transform var(--dur-fast) var(--ease); }
.fsel__trigger[aria-expanded="true"] .fsel__caret { transform: rotate(180deg); }
/* Farbtupfer vor der Sorte entfällt — der Name trägt die Auswahl allein. */

.fsel__menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 286px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-inner);
  box-shadow: 0 18px 40px rgba(15,23,42,.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.fsel__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.fsel__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-size: .9rem; font-weight: 500;
  cursor: pointer; transition: background-color var(--dur-fast) var(--ease);
}
.fsel__opt:hover { background: var(--surface); }
.fsel__opt.is-active { background: var(--blue-tint-2); color: var(--blue); font-weight: 600; }
.fsel__opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Etikett hinter dem Sortennamen (Oktoberfest Edition). */
.ftag { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ftag[hidden] { display: none; }

/* ---------------- Nikotinwahl (nur Modelle mit nicOptions) ---------------- */
.nic { margin-top: 14px; }
.nic__label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nic__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.nic__opt {
  display: inline-flex; align-items: center; gap: 8px;
  height: 35px; padding: 0 16px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-inner);
  background: #fff; color: var(--ink); font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nic__opt:hover:not(.is-oos) { border-color: var(--blue); }
.nic__opt:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.nic__opt.is-active { border-color: var(--blue); background: var(--blue-tint-2); color: var(--blue); }
/* Nicht lieferbar: sichtbar bleiben, damit die Lücke erklärt ist —
   aber ohne Klickweg und ohne Optik eines wählbaren Zustands. */
.nic__opt.is-oos { border-style: dashed; border-color: var(--line-2); background: var(--surface); color: var(--muted); cursor: not-allowed; }
.nic__v { white-space: nowrap; }
.nic__tag {
  padding: 2px 7px; border-radius: 999px;
  background: var(--line); color: var(--muted);
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
@media (max-width: 420px) {
  .nic__opts { display: grid; grid-template-columns: 1fr 1fr; }
  .nic__opt { justify-content: center; padding: 0 8px; }
}

/* ---------------- Alle Sorten (Raster mit Ankern) ---------------- */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.fchip {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 46px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-inner);
  background: #fff; color: var(--ink-2); font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.fchip:hover { border-color: var(--line-2); background: var(--surface); }
.fchip.is-active { border-color: var(--blue); background: var(--blue-tint-2); color: var(--blue); box-shadow: 0 6px 16px rgba(25,100,173,.10); }
/* Per #sorte-<slug> von außerhalb angesprungene Sorte: gleiche Betonung
   wie .is-active, aber unabhängig gesetzt (das Raster selbst bleibt
   reine Anzeige — nur der Sprung von außen markiert). */
.fchip.is-picked { border-color: var(--blue); background: var(--blue-tint-2); color: var(--blue); box-shadow: 0 6px 16px rgba(25,100,173,.10); }
.fchip__dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,23,42,.14); }
.fchip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Sortenbild: jede Karte zeigt das Gerät in ihrer Geschmacksrichtung */
.fchip__img {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; object-fit: contain;
}
.fchip.is-active .fchip__img { border-color: rgba(25,100,173,.35); }

/* Sorten-Raster: Einblenden-Button (mehr/weniger) */
.fgrid__more {
  margin-top: 12px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--r-inner);
  background: #fff; color: var(--blue); font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.fgrid__more:hover { border-color: var(--blue); background: var(--blue-tint-2); }

/* ---------------- Vertrauenspunkte in der Kaufbox ---------------- */
.pdp__trust { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.pdp__trust li { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--muted); }
.pdp__trust li > span:first-child { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--blue-tint); color: var(--blue); }
.pdp__trust li > span:first-child svg { width: 13px; height: 13px; }
.pdp__trust strong { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); }
.pdp__trust div { min-width: 0; }
/* Zwei Vertrauenspunkte nebeneinander in einer Reihe */
.pdp__trust { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .pdp__trust { grid-template-columns: 1fr; } }

/* ---------------- Sichere Zahlung (Zahlungsarten) ---------------- */
.pdp__pay { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-inner); background: #fff; }
.pdp__pay-head { display: flex; align-items: center; gap: 10px; }
.pdp__pay-lock { flex: 0 0 auto; color: var(--blue); }
.pdp__pay-head strong { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); }
.pdp__pay-head span { font-size: .8rem; color: var(--muted); }
.pdp__pay-logos {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: clamp(6px, 1.6vw, 12px); margin-top: 10px;
}
.pdp__pay-logos img {
  flex: 0 1 auto; min-width: 0; width: auto; object-fit: contain;
  height: clamp(20px, 5.2vw, 28px);
}

/* ---------------- Bewertungsbereich ---------------- */
.revsum {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 38px); flex-wrap: wrap;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
}
.revsum__score { font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.revsum__score span { display: block; margin-top: 6px; font-family: var(--font-body); font-size: .78rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.revsum__bars { min-width: 240px; flex: 1; }
.revsum__stars { display: inline-flex; gap: 3px; color: var(--accent); }
.revsum__stars svg { width: 18px; height: 18px; display: block; }
.revsum__note { margin: 8px 0 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }

/* Wasserfall (Masonry): CSS-Spalten statt Raster. Die Karten behalten
   ihre natürliche Höhe und rücken in der nächsten Spalte nach oben —
   dadurch entstehen keine Lücken wie im gleichhohen Grid. */
.revgrid { columns: 4 260px; column-gap: 18px; margin-top: 22px; }
.revitem { display: block; min-width: 0; margin: 0 0 18px; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
/* Vom Blättern ausgeblendete Stimmen (siehe initReviewPager). */
.revitem.is-off { display: none; }
.revitem__core { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.revitem__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.revitem__stars { display: inline-flex; gap: 2px; color: var(--accent); }
.revitem__stars svg { width: 14px; height: 14px; display: block; }
.revitem__product { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.revitem__text { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--ink-2); }
/* Foto zur Stimme — einer von drei bis fünf Stimmen liegt ein Bild bei */
.revitem__img { display: block; width: 100%; height: auto; margin-top: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.revitem__meta { margin-top: 14px; font-size: .8rem; color: var(--muted); }
.revmore { display: flex; justify-content: center; margin: 26px 0 0; }
.revmore[hidden] { display: none; }
/* Auf dem Smartphone blättert die Liste (#revPager) durch alle Stimmen —
   der Nachlade-Knopf hat dort nichts zu tun. */
@media (max-width: 760px) { .revmore { display: none; } }

/* Ein großes Bild, kein Rahmen, kein Innenabstand — das Motiv füllt
   die Fläche. Darunter eine Reihe Miniaturen: vorn das Sortenbild
   (wechselt mit der Sorte), dann die sortenunabhängigen Produktfotos. */
.gallery__main { border-radius: var(--r-shell); }
.gallery__main-core {
  aspect-ratio: 1/1; display: grid; place-items: center;
  isolation: isolate;
}
/* max- statt width/height: kleine Motive werden nicht hochgerechnet. */
.gallery__main-core img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.gallery__thumbs { display: flex; gap: 12px; margin-top: 12px; }
.gallery__thumb {
  flex: 0 0 calc((100% - 36px) / 4);
  border-radius: var(--r-inner); background: var(--surface);
  aspect-ratio: 1/1; padding: 7px; display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  isolation: isolate;
}
.gallery__thumb:hover { background: var(--blue-tint-2); }
.gallery__thumb.is-active { background: var(--blue-tint-2); }
.gallery__thumb img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply;
  opacity: .74; transition: opacity var(--dur-fast) var(--ease);
}
.gallery__thumb:hover img, .gallery__thumb.is-active img { opacity: 1; }

.pdp__title { font-size: 2rem; margin-block: 14px 12px; }
.pdp__pricebox { display: flex; align-items: baseline; gap: 14px; margin-block: 22px 6px; flex-wrap: wrap; }
.pdp__price { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -.025em; color: var(--blue); }
.pdp__price-old { font-size: 1rem; color: var(--muted-2); text-decoration: line-through; }
.pdp__tax { font-size: .8rem; color: var(--muted); }
.pdp__block { padding-block: 26px; border-top: 1px solid var(--line); }
/* Direkt unter den Kaufknöpfen stört die Trennlinie — der Block hängt
   optisch noch an der Aktion. Über der Sortenauswahl bleibt sie. */
.pdp__block--noline { border-top: 0; }
.pdp__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; display: block; }
.pdp__actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
/* Höhe der Kaufknöpfe = Höhe des Mengenwählers: .qty misst 36 px Knopf +
   2 × 5 px Polster + 2 px Rahmen = 48 px. Links und rechts bleiben damit
   auf einer Linie, ohne dass die Knöpfe den Mengenwähler überragen. */
/* Die beiden Kaufen-Knöpfe tragen die Entscheidung — kräftiger als die
   restlichen .btn (font-weight 500). */
.pdp__actions .btn { height: 48px; padding-block: 0; font-weight: 700; }
/* Ausrichtung jetzt in CSS — inline hätte die Regeln unten blockiert.
   Beide Kauf-Buttons identisch aufgebaut: Label links, Icon-Kreis bündig
   rechts am Rahmen. „Sofort kaufen“ stand zuvor auf `center`, wodurch der
   Pfeil mitten in der Fläche saß statt am Rand wie der Warenkorb-Kreis. */
#pdpAdd, #pdpBuy { justify-content: space-between; }

/* Primärer CTA eine Stufe heller als das darunterliegende Bundle-Band
   (dessen Verlauf läuft von --blue über --blue-400 zurück auf --blue):
   Auf --blue sahen Button und Bundle wie eine Fläche aus.
   #2276C4 erreicht mit weißer Schrift 4,71:1 und bleibt damit WCAG-AA. */
/* Auf Wunsch helles Himmelblau (#2896fd) statt des dunklen Tons: Der
   Abstand zum darunterliegenden Bundle-Band ist damit maximal.
   Achtung: Mit weißer Schrift erreicht #2896fd nur 3,06:1 (WCAG-AA
   verlangt 4,5:1 für Text dieser Größe). Für AA genügt es, die
   Schrift auf --ink zu setzen (dann 5,84:1) — bewusst offen gelassen. */
#pdpAdd { --btn-bg: #2896fd; }

/* Die Kaufspalte ist ab ~1300 px breit genug für Menge + beide Knöpfe in
   einer Reihe. Darunter fallen die Icon-Kreise weg (sie kosten je 54 px),
   damit die Reihe möglichst lange hält; unter 641 px — und immer dann, wenn
   es eng wird — springt „Sofort kaufen“ in eine eigene Zeile. */
@media (max-width: 1299px) {
  .pdp__actions .btn__ico { display: none; }
  /* Nur die waagerechten Innenabstände — die Höhe kommt von oben (48 px). */
  .pdp__actions .btn { padding-inline: 20px; }
  /* Ohne Icon-Kreis gibt es nichts nach rechts zu schieben — Label mittig */
  #pdpAdd, #pdpBuy { justify-content: center; }
}
@media (max-width: 640px) { #pdpBuy { flex: 1 0 100%; } }

/* ============================================================
   Vorbestellung / Bald erhältlich
   Produkte ohne freigegebenen Preis: Kaufbereich ausblenden,
   stattdessen einen Hinweis zeigen. <body class="is-presale">
   ============================================================ */
.pdp__presale { display: none; }
.is-presale .pdp__presale { display: block; margin-block: 22px 0; }
.pdp__presale-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--blue-tint); color: var(--blue);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 10px;
}
.pdp__presale-note { font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 52ch; margin: 0; }
.pdp__presale-note strong { color: var(--ink); font-weight: 600; }

/* Kaufelemente für Vorbestellungen ausblenden */
.is-presale .pdp__pricerow,
.is-presale #pdpFlavorBlock,
.is-presale .pdp__actions,
.is-presale .pdp__block--noline { display: none !important; }

/* (Karten-Regeln für Vorbestellung liegen in components.css —
   dort wird .pcard gerendert, auch auf der Sortimentsseite.) */

/* „Ähnliche Modelle“: vier Karten in einer Reihe solange es PC-breit ist,
   darunter zwei. Die globalen .pgrid-Regeln (3 Spalten ab 1081 px, eine
   Spalte ab 521 px) werden hier bewusst überschrieben — sonst bliebe bei
   vier Karten eine Einzelkarte als Restzeile übrig. */
@media (max-width: 1080px) {
  #pdpRelated { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #pdpRelated { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  #pdpRelated { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 5px; background: #fff; }
.qty button { width: 36px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: 1.1rem; color: var(--ink-2); transition: background-color var(--dur-fast) var(--ease); }
.qty button:hover { background: var(--surface-2); }
/* Nur die Mengenangabe bekommt die Mindestbreite — sonst zieht die Regel
   auch die Icon-Hülle in den Buttons auf 34 px. */
.qty > span { min-width: 34px; text-align: center; font-family: var(--font-mono); font-weight: 500; }
/* Das Inline-SVG steht auf der Grundlinie und lässt Unterlängen-Abstand
   unter sich — dadurch saß das Zeichen über der Mitte (mit Hover-Fläche
   besonders sichtbar). display:block räumt den Abstand ab. */
.qty button svg, .qty button span { display: block; }

/* ============================================================
   Bundle & Sparen — Mengenrabatt-Konfigurator
   ============================================================ */
.sv-bundle { margin-top: 2px; border: 0; border-radius: 0; background: none; }
.sv-bundle > summary {
  list-style: none; position: relative; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; font-family: var(--font-body); cursor: pointer; user-select: none;
  -webkit-user-select: none;
}
.sv-bundle > summary::-webkit-details-marker { display: none; }
.sv-bundle > summary > * { position: relative; z-index: 1; }
.sv-bundle > summary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, var(--blue), var(--blue-400), var(--blue));
  background-size: 220% 100%; clip-path: inset(0 0 0 0);
  transition: clip-path .55s var(--ease);
  animation: sv-flow 3.4s ease-in-out infinite; z-index: 0;
}
@keyframes sv-flow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .sv-bundle > summary::before { animation: none; transition: none; } }
.sv-bundle[open] > summary { border-bottom: 0; padding-bottom: 18px; }
.sv-bundle[open] > summary::before { clip-path: inset(calc(100% - 10px) 0 0 0); }
.sv-bundle:not([open]) > summary { border-radius: var(--r-inner); box-shadow: 0 3px 10px rgba(15,23,42,.14); }
.sv-bundle:not([open]) .sv-bundle-title,
.sv-bundle:not([open]) .sv-bundle-chevron { color: #fff; }
.sv-bundle:not([open]) .sv-bundle-sub { color: rgba(255,255,255,.82); }
.sv-bundle-title { color: var(--blue); font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.sv-bundle-sub { margin-right: auto; color: var(--muted); font-size: 11px; line-height: 1.4; }
.sv-bundle-chevron { flex-shrink: 0; color: var(--blue); transition: transform .18s var(--ease); }
.sv-bundle[open] .sv-bundle-chevron { transform: rotate(180deg); }
.sv-bundle-body { padding: 2px 0 0; }

.sv-journey { margin: 12px 0 10px; padding: 13px 13px 12px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, #fff, var(--blue-tint)); }
.sv-journey-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.sv-journey-title { color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.sv-journey-title em { font-style: normal; color: var(--accent-ink); }
.sv-journey-badge { padding: 4px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s; }
.sv-journey-badge.is-zero { background: var(--surface-2); color: var(--muted); }

.sv-track { position: relative; height: 46px; margin: 0 2px; }
.sv-track-inner { position: absolute; left: 16px; right: 16px; top: 0; bottom: 0; }
.sv-rail { position: absolute; left: 0; right: 0; top: 13px; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sv-rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--blue-400), var(--blue)); transition: width .4s cubic-bezier(.4,0,.2,1); }
.sv-rail-trail { position: absolute; top: 13px; left: 88%; right: 0; height: 7px; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(15,23,42,.18) 0 4px, transparent 4px 9px); }
/* z-index 5 hält die Trefferflächen der Meilensteine über dem
   🚚-Marker — liegt ein Knoten auf derselben Position, gewinnt er. */
.sv-nodes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.sv-node { position: absolute; top: 0; left: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; pointer-events: auto; }
.sv-node:focus { outline: none; }
/* Soll-Bestand: Balkenmitte liegt bei rail-top (13 px) + halbe Balkenhöhe
   (3,5 px) = 16,5 px. Der Punkt ist 15 px hoch → margin-top 9 px setzt
   seine Mitte genau darauf. Davor waren es 6 px (Mittelpunkt 13,5 px),
   wodurch der Kreis 3 px über dem Balken saß. */
.sv-node-dot { width: 15px; height: 15px; margin-top: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); transition: background .25s, border-color .25s, box-shadow .25s, transform .2s; }
.sv-node-pct { margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; }
.sv-node.is-done .sv-node-dot { background: var(--blue); border-color: var(--blue); }
.sv-node.is-done .sv-node-pct { color: var(--blue); }
.sv-node.is-next .sv-node-dot { border-color: var(--blue); animation: sv-pulse 1.6s ease-in-out infinite; }
.sv-node.is-next .sv-node-pct { color: var(--blue); }
.sv-node.is-focus .sv-node-dot { box-shadow: 0 0 0 3px rgba(25,100,173,.18); transform: scale(1.16); }
.sv-node.is-focus .sv-node-pct { color: var(--blue); }
.sv-node-best { position: absolute; top: -12px; padding: 1px 5px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 7.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
/* Auf dem Smartphone weicht die Marke dem 🚚-Marker zur Seite, wenn beide
   nebeneinander liegen; auf dem Desktop ist der Balken breit genug. */
@media (max-width: 767px) { .sv-node-best.is-nudge { transform: translateX(10px); } }
@keyframes sv-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(25,100,173,.28); } 50% { box-shadow: 0 0 0 5px rgba(25,100,173,0); } }
@media (prefers-reduced-motion: reduce) { .sv-node.is-next .sv-node-dot { animation: none; } }

/* Der Marker ist eine echte Schaltfläche: antippen zeigt die Erklärung. */
.sv-ship { position: absolute; top: -9px; left: 0; transform: translateX(-50%); z-index: 4; display: block; padding: 0; border: 0; background: none; appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Unsichtbar vergrößerte Trefferfläche — ohne Einfluss auf die Position. */
.sv-ship::before { content: ''; position: absolute; inset: -7px; }
.sv-ship:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 50%; }
.sv-ship:hover .sv-ship-pin, .sv-ship.is-pinned .sv-ship-pin { border-color: var(--blue); }
.sv-ship.is-pinned .sv-ship-pin { transform: rotate(-45deg) scale(1.12); }
.sv-ship-pin { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; background: #fff; border: 1.5px solid var(--blue-400); box-shadow: 0 1px 4px rgba(15,23,42,.14); transform: rotate(-45deg); transition: background .25s, border-color .25s, transform .25s; }
/* Lastwagen als Zeichnung (die Fahrtrichtung zeigt nach rechts wie der
   Fortschritt) statt als Emoji — Emojis werden je System gespiegelt,
   ein wartendes Fahrzeug käme sonst verkehrt herum aus der Fabrik. */
.sv-ship-ic { display: block; width: 13px; height: 13px; color: var(--blue); line-height: 1; transform: rotate(45deg); }
.sv-ship-ic svg { display: block; width: 100%; height: 100%; stroke-width: 2.2; }
/* Erreicht: helles Bild auf blauem Grund. */
.sv-ship.is-done .sv-ship-ic { color: #fff; }
.sv-ship.is-done .sv-ship-pin { background: var(--blue); border-color: var(--blue); transform: rotate(-45deg) scale(1.12); }

/* Sprechblase unter der Achse: erklärt, was der 🚚-Marker bedeutet.
   Sie liegt in .sv-tipwrap, das dieselben Einrückungen hat wie
   .sv-track-inner — der Pfeil kann deshalb über left:% genau auf den
   Marker zeigen und läuft nicht aus der Karte heraus. */
/* Die Blase liegt als Überlagerung über dem folgenden Text — sie darf
   das Layout nicht aufklappen. Höhe 0 im Wrapper, Blase absolut. */
.sv-tipwrap { position: relative; height: 0; }
/* Zwei Blasen, ein Aussehen: 🚚-Marker (Gratislieferung) und angetippter
   Meilenstein (Vorschau auf diese Stufe). Beide liegen als Überlagerung
   über der Statuszeile — in deren voller Breite, damit an den Seiten
   nichts hervorlugt — und fahren beim nächsten Klick wieder ein. */
.sv-ship-tip, .sv-node-tip { position: absolute; top: 7px; left: 0; right: 0; z-index: 40; padding: 8px 11px; border: 1px solid rgba(25,100,173,.3); border-radius: 9px; background: #fff; box-shadow: 0 10px 22px rgba(15,23,42,.16); animation: sv-tip-in .16s var(--ease); }
.sv-ship-tip[hidden], .sv-node-tip[hidden] { display: none; }
/* Der Pfeil rechnet in denselben Koordinaten wie die Achse
   (.sv-track-inner liegt 18 px vom Karteninnenrand, mobil 16 px). */
.sv-ship-tip-arrow, .sv-node-tip-arrow { position: absolute; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-left: 1px solid rgba(25,100,173,.3); border-top: 1px solid rgba(25,100,173,.3); background: #fff; transform: rotate(45deg); left: calc(18px + (100% - 36px) * var(--f, 0)); }
.sv-ship-tip-body, .sv-node-tip-body { display: block; color: var(--ink-2); font-size: 11px; font-weight: 600; line-height: 1.5; }
/* Endzustand ohne transform (eigene Compositing-Ebene würde die Rasterung
   auf ganze Gerätepixel runden — siehe den 1-px-Fall beim ±-Block). */
@keyframes sv-tip-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sv-ship-tip, .sv-node-tip { animation: none; } }
/* 16,5 px = Balkenmitte (13 px top + 3,5 px halbe Höhe), identisch mit
   .sv-node-dot — beides sitzt damit exakt auf der Achse. */
.sv-you { position: absolute; top: 16.5px; left: 0; transform: translate(-50%, -50%); z-index: 3; transition: left .4s cubic-bezier(.4,0,.2,1); }
.sv-you-pin { display: block; width: 17px; height: 17px; border-radius: 50% 50% 50% 3px; background: var(--ink); border: 2px solid #fff; box-shadow: 0 2px 7px rgba(15,23,42,.4); transform: rotate(45deg); }

.sv-reward { margin-top: 6px; padding: 10px 11px; border-radius: 10px; background: var(--accent-tint); border: 1px solid #F3D9C2; }
.sv-reward-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--accent-ink); font-size: 12px; font-weight: 800; line-height: 1.3; }
/* Versand-Zusatz direkt neben der Statuszeile. */
.sv-ship-flag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(25,100,173,.3); background: #fff; color: var(--blue); font-size: 10px; font-weight: 700; line-height: 1.45; white-space: nowrap; }
.sv-ship-flag b { color: var(--blue); font-weight: 800; }
.sv-ship-flag.is-done { border-color: rgba(15,110,78,.32); background: var(--success-tint); color: var(--success); }
.sv-ship-flag.is-done b { color: var(--success); }
.sv-ship-flag-ic { font-size: 9px; line-height: 1; }
.sv-reward-sub { margin-top: 3px; color: var(--accent-ink); font-size: 11px; font-weight: 600; line-height: 1.5; }
/* Alleinstehend (Leerzustand) braucht die Zeile keinen Abstand nach oben. */
.sv-reward > .sv-reward-sub:first-child { margin-top: 0; }
.sv-reward-sub b { color: var(--ink); }

.sv-picker { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.sv-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.sv-picker-title { color: var(--ink); font-size: 12.5px; font-weight: 700; }
.sv-count-pill { flex-shrink: 0; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--blue); font-size: 11px; font-weight: 700; white-space: nowrap; }
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; max-height: 252px; overflow-y: auto; margin: 0; padding: 2px; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.25) transparent; }
.sv-grid::-webkit-scrollbar { width: 6px; }
.sv-grid::-webkit-scrollbar-thumb { background: rgba(15,23,42,.25); border-radius: 4px; }
.sv-chip { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 6px 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-2); font-size: 11.5px; font-weight: 600; transition: border-color .12s, background .12s, color .12s, border-radius .15s; }
.sv-chip:hover { border-color: var(--blue-400); }
.sv-chip.is-active { border-color: var(--blue); background: var(--blue-tint); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(25,100,173,.16); }
.sv-chip-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* Sortenbild im Bundle-Wähler — contain statt cover, damit das ganze
   Gerät sichtbar bleibt */
.sv-chip-media { flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sv-chip-dot { width: 22px; height: 22px; margin: 2px 2px 2px 0; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.sv-chip-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.sv-chip-text { display: inline-block; max-width: none; white-space: nowrap; }
@keyframes sv-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--sv-shift, 0px))); } }
.sv-chip-name.is-marquee > .sv-chip-text { animation: sv-marquee var(--sv-dur, 7s) ease-in-out infinite alternate; }
/* Nur Namen, die tatsächlich laufen, blenden an beiden Rändern aus —
   sonst wirkt der Text abgeschnitten, als würde die ×n-Pille ihn
   überdecken. Kurze Namen laufen nicht und bleiben unangetastet. */
.sv-chip-name.is-marquee { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.04), #000 13px, #000 calc(100% - 14px), rgba(0,0,0,.05)); mask-image: linear-gradient(90deg, rgba(0,0,0,.04), #000 13px, #000 calc(100% - 14px), rgba(0,0,0,.05)); }
/* Ist die Karte aufgeklappt, steht der Name unten vollständig — der
   Lauftext oben springt zurück zum Anfang und steht ruhig. */
.sv-chip.is-open .sv-chip-name.is-marquee > .sv-chip-text { animation: none; }
@media (prefers-reduced-motion: reduce) { .sv-chip-name.is-marquee > .sv-chip-text { animation: none; } }
/* Der Fortsatz unter der Karte (voller Name + −/Zahl/+). Auf dem Desktop
   steckt nur die Mengenleiste darin, sie bleibt deshalb eine normale
   Zeile im Karte — display:contents lässt sie durch. */
.sv-chip-panel { display: contents; }
.sv-chip-fullname { display: none; }
/* Der Hals ist ein Stück der Handy-Silhouette — auf dem Schreibtisch bleibt
   er weg (dort ist der Fortsatz per display:contents Teil der Karte). */
.sv-chip-neck { display: none; }
.sv-chip-badge { display: none; }
.sv-chevron { display: none; }
.sv-stepper { flex-shrink: 0; display: flex; align-items: center; gap: 1px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; }
.sv-step { width: 22px; height: 22px; border: 0; background: #fff; color: var(--blue); font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv-step:disabled { color: var(--muted); cursor: not-allowed; }
.sv-step-val { width: 30px; min-width: 30px; text-align: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; border: 0; background: transparent; color: inherit; font-family: inherit; padding: 1px 0; outline: none; }
.sv-chip.is-active .sv-stepper { border-color: rgba(25,100,173,.35); }
.sv-chip.is-active .sv-step-val { color: var(--ink); }
/* Zurücksetzen als richtige Schaltfläche (zuvor ein blasser Textlink).
   Ohne Auswahl deaktiviert — es gäbe nichts zurückzusetzen. */
.sv-clear { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--line-3); border-radius: 8px; background: #fff; color: var(--ink-2); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease); }
.sv-clear svg { flex-shrink: 0; }
.sv-clear:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }
.sv-clear:disabled { border-color: var(--line); color: var(--muted); background: var(--surface-2); cursor: not-allowed; }

.sv-summary { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; margin-top: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(135deg, #fff, var(--blue-tint)); }
.sv-summary-label { color: var(--ink-2); font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.sv-summary-label b { color: var(--blue); }
.sv-qty, .sv-flavor-count { color: var(--blue); }
.sv-price { text-align: right; }
.sv-price-total { display: block; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.sv-total { font-variant-numeric: tabular-nums; }
.sv-price-unit { display: block; margin-top: 1px; color: var(--muted); font-size: 10.5px; }
/* Gestrichener Einzelpreis neben dem reduzierten Stückpreis */
.sv-price-old { margin-left: 5px; color: var(--muted-2); font-size: 10px; }
.sv-save { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 5px; background: var(--blue); color: #fff; font-size: 9.5px; font-weight: 800; font-style: normal; letter-spacing: .03em; vertical-align: 2px; }
.sv-shipping { grid-column: 1/-1; margin: 0; padding-top: 2px; color: var(--success); font-size: 10.5px; font-weight: 600; }
.sv-actions { display: flex; gap: 10px; margin-top: 12px; }
.sv-add, .sv-buy { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 14px; border: 0; border-radius: 9px; font-family: var(--font-body); font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 22px rgba(15,23,42,.17); transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
/* Im Bundle dieselbe Warenkorb-Zeichnung wie in der Navigationsleiste. */
.sv-add > svg { flex-shrink: 0; width: 17px; height: 17px; stroke-width: 2; }
.sv-add { background: var(--blue); color: #fff; }
.sv-add:hover { transform: translateY(-1px); box-shadow: 0 15px 28px rgba(15,23,42,.23); }
.sv-add:active { transform: scale(.97); }
.sv-add:disabled { background: var(--muted); box-shadow: none; cursor: not-allowed; }
.sv-buy { border: 1.5px solid var(--blue); background: #fff; color: var(--blue); }
.sv-buy:hover { transform: translateY(-1px); }
.sv-buy:disabled { border-color: var(--line-2); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.sv-feedback { min-height: 15px; margin: 9px 0 0; color: var(--blue); font-size: 11px; font-weight: 600; }
/* Leer Feedback keine Höhe — sonst klafft der Abstand zum nächsten
   Block im aufgeklappten Zustand weiter auf als im geschlossenen. */
.sv-feedback:empty { min-height: 0; margin-top: 0; }

@media (max-width: 767px) {
  .sv-picker { padding: 10px; }
  .sv-journey { padding: 11px 11px 10px; }
  .sv-track { margin: 0; }
  /* Blase in voller Statuszeilenbreite; der Pfeil rechnet mobil mit
     16 px Einrückung der Achse. */
  .sv-ship-tip-arrow { left: calc(16px + (100% - 32px) * var(--f, 0)); }
  /* Marker etwas größer — er ist antippbar. */
  .sv-ship-pin { width: 18px; height: 18px; }
  .sv-ship-ic { width: 15px; height: 15px; }
  .sv-node-pct { font-size: 8.5px; }
  .sv-summary { grid-template-columns: 1fr; row-gap: 8px; }
  .sv-price { text-align: left; }
  .sv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-height: 340px; gap: 7px; }
  .sv-chip { flex-direction: column; align-items: stretch; padding: 0; gap: 0; border-radius: 10px; }
  .sv-chip-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; }
  .sv-chip-media { display: none; }
  .sv-chip-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; }
  /* ×0 = noch nicht gewählt: helles Blau statt vollflächig, damit gewählte
     Sorten sofort herausstechen. */
  .sv-chip:not(.is-active) .sv-chip-badge { background: var(--blue-tint); color: var(--blue); box-shadow: inset 0 0 0 1px rgba(25,100,173,.22); }
  .sv-chevron { display: inline-flex; margin-left: auto; color: var(--muted); transition: transform .2s var(--ease); }
  /* Silhouette 凸: schmale Karte oben, breiter Fortsatz unten — und die
     Schulter sitzt MITTEN zwischen zwei Sortenreihen. Läge sie direkt an
     der Kartenunterkante, läge sie zugleich auf dem Rahmen der Nachbar-
     karte; zwei Linien auf demselben Pixel wirken doppelt so dick. */
  .sv-chip.is-open { background: #fff; border-color: var(--blue); z-index: 30; border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
  .sv-chip.is-open .sv-chevron { transform: rotate(180deg); }
  /* Aufgeklappter Fortsatz: liegt als Überlagerung unter der Karte und
     deckt zu, was darunter steht — das Raster bleibt, wo es ist.
     Er zeichnet seinen Rahmen selbst (EIN Element, kein transform), damit
     Karte und Fortsatz nicht gegeneinander verrutschen können. (Ursache
     eines 1-px-Versatzes früher: der Rahmen saß auf einem eigenen, per
     transform hochgestuften Element.)
     Seine Breite setzt bundle.js beim Öffnen — der Fortsatz reicht dann
     über beide Spalten, damit lange Namen (50K/80K) lesbar umbrechen. */
  .sv-chip-panel {
    --neck: 4px;              /* Zeilenabstand 7px → Linie genau dazwischen */
    --fr: 4px;                /* Radius der Schulter */
    --cr: 8px;                /* Rundung oben auf der Nachbarseite */
    position: absolute; top: calc(100% + var(--neck)); left: -1px; right: -1px; z-index: 20;
    display: block; border: 1px solid var(--blue);
    border-radius: var(--cr) 0 10px 10px; background: #fff;
    box-shadow: 0 14px 20px -12px rgba(15,23,42,.3);
    opacity: 0; visibility: hidden;
    transition: opacity .18s var(--ease), visibility .18s;
  }
  /* Spiegelbild: Fortsatz ragt nach rechts → dort rundet die Ecke. */
  .sv-chip-panel.is-mir { border-radius: 0 var(--cr) 10px 10px; }
  /* Hals: füllt die Lücke zwischen Kartenunterseite und abgesenkter Schulter.
     Er trägt die beiden Kanten der Karte weiter (deshalb links/rechts eine
     Linie) und deckt die Schulterlinie über der eigenen Karte ab — dort ist
     alles eine Fläche, keine Naht. Seine Breite setzt bundle.js. */
  .sv-chip-neck {
    position: absolute; bottom: 100%; display: block;
    height: calc(var(--neck) + 1px); background: #fff;
    border-left: 1px solid var(--blue); border-right: 1px solid var(--blue);
  }
  /* Schulterbogen: aus der Schulterlinie in die Halskante. Ein Viertelkreis
     aus EINEM Element, kein transform → kein Pixelversatz. Ohne Nachbarspalte
     gibt es keine Schulter, dann bleibt der Bogen weg. */
  .sv-chip-neck::before {
    content: ''; position: absolute; box-sizing: border-box; display: none;
    left: calc(0px - var(--fr)); top: 0; width: var(--fr); height: var(--fr);
    border-right: 1px solid var(--blue); border-bottom-right-radius: var(--fr);
  }
  .sv-chip-panel.is-ext .sv-chip-neck::before { display: block; }
  /* Auf der Schulterseite ersetzt der Bogen die Kante des Halses — beide
     nebeneinander gäben eine Doppellinie. */
  .sv-chip-panel.is-ext:not(.is-mir) .sv-chip-neck { border-left-color: transparent; }
  .sv-chip-panel.is-ext.is-mir .sv-chip-neck { border-right-color: transparent; }
  .sv-chip-panel.is-mir.is-ext .sv-chip-neck::before {
    left: auto; right: calc(0px - var(--fr));
    border-right: 0; border-left: 1px solid var(--blue);
    border-bottom-right-radius: 0; border-bottom-left-radius: var(--fr);
  }
  .sv-chip.is-open .sv-chip-panel { opacity: 1; visibility: visible; }
  /* Der ganze Sortenname — erst beim Antippen, dann in voller Breite und
     mit Zeilenumbruch statt Lauftext. */
  .sv-chip-fullname { display: block; padding: 9px 12px 1px; color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
  .sv-stepper { display: flex; justify-content: center; gap: 12px; padding: 7px 10px 10px; border: 0; background: transparent; }
  @media (prefers-reduced-motion: reduce) { .sv-chip-panel { transition: none; } }
  .sv-step { width: 34px; height: 34px; font-size: 18px; }
  .sv-step-val { min-width: 44px; width: 44px; font-size: 15px; }
  .sv-actions { flex-direction: column; }
}

.speclist { display: grid; gap: 0; }
.speclist__row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.speclist__row dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); padding-top: 3px; }
.speclist__row dd { margin: 0; color: var(--ink-2); }

/* Parametervergleich (z. B. 22000 vs. 12000): Tabelle mit fester
   1. Spalte (Parametername); mobil seitlich scrollbar, 1. Spalte klebt. */
.speccompare {
  margin: 4px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
}
.speccompare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.speccompare__table th,
.speccompare__table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.speccompare__table tbody tr:last-child th,
.speccompare__table tbody tr:last-child td {
  border-bottom: 0;
}
.speccompare__table thead th {
  background: var(--blue-tint-2);
  color: var(--ink);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
}
/* Vergleichsspalte „Digital Box 22000“ ist ein Produktlink */
.speccompare__table thead th a.speccompare__link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.speccompare__table thead th a.speccompare__link:hover {
  color: #1a4fd6;
}
.speccompare__table td { color: var(--ink-2); }
/* 1. Spalte (Parameter) — bleibt beim horizontalen Scrollen stehen */
.speccompare__param {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 1px 0 0 var(--line);
}
.speccompare__table thead .speccompare__param {
  z-index: 3;
  background: var(--blue-tint-2);
}
@media (max-width: 600px) {
  .speccompare__table { min-width: 540px; font-size: .88rem; }
  .speccompare__table th,
  .speccompare__table td { padding: 11px 13px; }
}

/* ============================================================
   Produktinfo — Beschreibung / Daten / Versand
   Ab 761 px sind alle Blöcke offen; darunter werden sie zu
   aufklappbaren Karten (Klasse .js-accordion, siehe product.js).
   ============================================================ */
.pinfo__section { border-top: 1px solid var(--line); }
.pinfo__section:last-child { border-bottom: 1px solid var(--line); }
/* Erster Block (Beschreibung): keine Trennlinie — beim Scrollen zum
   Video klebt sie sonst als Streifen direkt unter der Fixed-Nav.
   Nur Desktop; mobil sind die Blöcke umrandete Karten. */
@media (min-width: 761px) {
  .pinfo__section:first-child { border-top: 0; }
}
.pinfo__heading { margin: 0; }
.pinfo__toggle {
  appearance: none; -webkit-appearance: none; display: flex; align-items: baseline; gap: 14px;
  width: 100%; margin: 0; padding: 30px 0 20px; background: none; border: 0; text-align: left;
  cursor: default; font-family: var(--font-body); color: inherit;
}
.pinfo__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pinfo__title {
  display: block; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
.pinfo__meta { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pinfo__chevron { display: none; flex-shrink: 0; color: var(--blue); transition: transform .2s var(--ease); }
.pinfo__body { padding: 0 0 62px; }
.pinfo__mail {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
.pinfo__mail:hover { color: var(--accent-ink); }
/* Keine Trennlinie mehr: beim Scrollen in das Sortenraster läuft sie sonst
   direkt unter der schwebenden Navigation durch und wirkt dort wie eine
   fremde Linie. Der Abstand (34/30 px) und die Überschrift trennen bereits. */
.pinfo__flavors { margin-top: 34px; padding-top: 30px; }

@media (max-width: 760px) {
  .pinfo__section { border: 1px solid var(--line); border-radius: var(--r-inner); background: #fff; overflow: hidden; margin-bottom: 10px; }
  .pinfo__section:last-child { border-bottom: 1px solid var(--line); margin-bottom: 0; }
  .pinfo__toggle { display: block; position: relative; padding: 15px 44px 15px 16px; cursor: pointer; }
  .pinfo__toggle:active { background: var(--blue-tint-2); }
  .pinfo__title { font-size: 16.5px; letter-spacing: -.01em; }
  .pinfo__meta { display: block; margin: 4px 0 0; font-size: 11.5px; white-space: normal; }
  .pinfo__chevron { display: block; position: absolute; right: 16px; top: 20px; }
  .pinfo__section.is-open .pinfo__chevron { transform: rotate(180deg); }
  .pinfo.js-accordion .pinfo__body { display: none; padding: 0 16px 18px; }
  .pinfo.js-accordion .pinfo__section.is-open .pinfo__body { display: block; }
  .pinfo__flavors { margin-top: 24px; padding-top: 22px; }
}

/* Die alten Reiter (Beschreibung / Daten / Versand) sind durch den
   Info-Bereich oben ersetzt — Reste wurden entfernt. */

/* Anker-Sprünge (#reviews, #sorten, #sorte-…) dürfen nicht unter der
   fixierten Navigation landen. */
#sorten, #reviews, .fchip { scroll-margin-top: 112px; }

/* ============================================================
   Responsiv — Produktdetailseite
   ============================================================ */
@media (max-width: 900px) {
  /* Einspaltig: Sticky würde die Galerie hier vom Rest abschneiden */
  .pdp__gallery { position: static; }
  .pdp__grid { grid-template-columns: minmax(0, 1fr); }
  /* Mobil (einspaltige Layoutstufe): kompakterer Titel */
  .pdp__title { font-size: 1.5rem; }
}
@media (max-width: 760px) {
  /* Zwei schmale Spalten — sonst wäre der Wasserfall auf dem Smartphone
     ein einspaltiger Stapel und der Versatz nicht mehr erkennbar. */
  .revgrid { columns: 2; column-gap: 12px; }
  .revitem { margin-bottom: 12px; }
  .revitem__core { padding: 15px 15px 16px; }
  .revitem__text { font-size: .86rem; line-height: 1.55; }
  .revitem__top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .revitem__meta { margin-top: 10px; font-size: .74rem; }
}
@media (max-width: 720px) {
  .speclist__row { grid-template-columns: 1fr; gap: 4px; }
  .gallery__thumbs { gap: 8px; }
  .gallery__thumb { flex-basis: calc((100% - 24px) / 4); }
  .fgrid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
  .fchip { font-size: .82rem; padding: 9px 11px; min-height: 44px; }
  .revsum { gap: 16px; }
  .revsum__bars { min-width: 0; }
  .revitem__core { padding: 17px 18px; }
}

/* Blättern durch die Bewertungen (nur wenn mehr als eine Seite übrig
   bleibt — gefüllt von initReviewPager). */
.revpager:empty { display: none; }
.revpager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.revpager__btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.revpager__btn svg { display: block; width: 15px; height: 15px; }
.revpager__btn:not([disabled]):hover { border-color: var(--blue); color: var(--blue); background: var(--blue-tint-2); }
.revpager__btn[disabled] { opacity: .35; cursor: default; }
.revpager__info { font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); min-width: 132px; text-align: center; }
@media (max-width: 520px) {
  /* „Ähnliche Modelle“ bleibt auch auf dem Smartphone zweispaltig —
     die globale Regel stellt .pgrid--2 sonst auf eine Spalte um. */
  .pgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vier Karten pro Reihe — die globale .pgrid-Regel liefert das bereits. */

/* ============================================================
   Beschreibung — redaktioneller Langtext mit Video, Merkmalen,
   Echtheitsprüfung und Sorten. Bewusst ohne Rahmen um Bilder:
   Fläche und Schatten tragen die Trennung, keine Linien.
   ============================================================ */
/* Breite = Inhaltsspalte der Seite (Container 1400 px abzüglich
   Innenabstand, gemessen 1380 px) — kein eigener Lesespalt. */
.pdesc { max-width: 1400px; }
.pdesc__video {
  margin: 0 0 12px; border-radius: var(--r-inner); overflow: hidden;
  background: #0B1220; box-shadow: 0 20px 44px -26px rgba(15, 23, 42, .55);
}
.pdesc__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0B1220; }
.pdesc__cap { margin: 0 0 6px; font-size: .8rem; font-weight: 300; line-height: 1.55; color: var(--muted); }
.pdesc__h { margin-top: 40px; }
.pdesc__sub { margin-top: 7px; font-size: .9rem; }
.pdesc__list { margin: 15px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pdesc__list li {
  position: relative; padding-left: 20px; font-size: .93rem; line-height: 1.68;
  font-weight: 300; color: var(--muted);
}
.pdesc__list li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue); opacity: .5;
}
/* Vier Merkmale füllen die Inhaltsspalte — deshalb größer aufspielen. */
.pdesc__cards { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pdesc__card {
  margin: 0; padding: 16px 16px 18px; border-radius: var(--r-inner);
  background: var(--surface); box-shadow: 0 14px 30px -24px rgba(15, 23, 42, .45);
}
.pdesc__card > span { display: grid; place-items: center; height: 150px; }
.pdesc__card img { max-width: 100%; max-height: 132px; width: auto; height: auto; object-fit: contain; }
.pdesc__card figcaption { margin-top: 13px; font-size: .84rem; line-height: 1.5; font-weight: 300; color: var(--muted); }
.pdesc__steps { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 13px; }
.pdesc__steps li {
  counter-increment: step; position: relative; padding-left: 38px;
  font-size: .93rem; line-height: 1.68; font-weight: 300; color: var(--muted);
}
.pdesc__steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--blue-tint);
  color: var(--blue); font-family: var(--font-display); font-size: 12.5px;
  font-weight: 600; line-height: 26px; text-align: center;
}
.pdesc__steps a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.pdesc__fig { margin: 20px 0 0; }
.pdesc__fig img { display: block; width: 100%; height: auto; border-radius: var(--r-inner); }
.pdesc__fig--narrow { max-width: 420px; }
.pdesc__fig figcaption { margin-top: 9px; font-size: .8rem; line-height: 1.55; font-weight: 300; color: var(--muted); }
.pdesc__note {
  margin-top: 16px; padding: 15px 17px; border-radius: var(--r-inner);
  background: var(--blue-tint-2); color: var(--ink-2);
  font-size: .9rem; line-height: 1.62; font-weight: 300;
}
.pdesc__note a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.pdesc__sorten { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.pdesc__sorte {
  display: flex; align-items: center; gap: 13px; padding: 10px 14px 10px 10px;
  border-radius: var(--r-inner); background: var(--surface);
}
.pdesc__sorte img {
  flex: 0 0 auto; width: 54px; height: 54px; object-fit: contain;
  border-radius: 12px; background: #fff;
}
.pdesc__sorte b { display: block; font-size: .94rem; font-weight: 600; color: var(--ink); }
.pdesc__sorte span { display: block; margin-top: 3px; font-size: .85rem; line-height: 1.55; font-weight: 300; color: var(--muted); }
/* Zwei Fragen nebeneinander, unter 761 px untereinander. */
.pdesc__qa { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pdesc__qa > div { padding: 15px 17px; border-radius: var(--r-inner); background: var(--surface); }
.pdesc__qa b { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); }
.pdesc__qa p { margin: 6px 0 0; font-size: .9rem; line-height: 1.66; font-weight: 300; color: var(--muted); }
@media (max-width: 760px) {
  .pdesc__h { margin-top: 32px; }
  /* Bilder waagerecht wischen statt als Raster zu stapeln. */
  .pdesc__cards {
    display: flex; gap: 10px; margin-top: 16px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .pdesc__cards::-webkit-scrollbar { display: none; }
  .pdesc__card { flex: 0 0 66%; scroll-snap-align: start; padding: 12px 12px 14px; }
  .pdesc__card > span { height: 120px; }
  .pdesc__card img { max-height: 104px; }
  .pdesc__sorten { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pdesc__sorte { padding: 9px 12px 9px 9px; gap: 11px; }
  .pdesc__sorte img { width: 46px; height: 46px; }
  .pdesc__qa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pdesc__card { flex-basis: 74%; }
  .pdesc__card > span { height: 104px; }
  .pdesc__card img { max-height: 88px; }
}
/* Echtheit (eigene Sektion): Text links, Verpackungsbild mit Prüfcode rechts. */
.pauth {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 30px; align-items: start;
}
.pauth__text { min-width: 0; }
.pauth__fig { margin: 0; }
.pauth__fig img { display: block; width: auto; max-width: 100%; max-height: 380px; height: auto; margin-inline: auto; border-radius: var(--r-inner); background: #fff; }
.pauth__fig figcaption { margin-top: 9px; font-size: .8rem; line-height: 1.55; font-weight: 300; color: var(--muted); }
/* Hochkant-Bild (Tornado 15000): Höhe ≈ Textblock, mittig ausgerichtet. */
.pauth__fig--portrait { align-self: center; }
.pauth__fig--portrait img { max-height: 260px; }
@media (max-width: 900px) {
  .pauth { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pauth__fig { max-width: 440px; }
}