/* ============================================================
   FUMOT — Startseite: Hero, Vertrauensleiste, Kapitelstrecke,
   Modellvergleich, Geschmackswelt, Kundenstimmen
   ============================================================ */

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: clamp(520px, 72vh, 760px);
  display: flex; align-items: center;
  padding-top: 112px; padding-bottom: clamp(34px, 4vw, 60px);
  background:
    radial-gradient(1000px 640px at 16% 74%, rgba(25,100,173,.32), transparent 68%),
    radial-gradient(760px 520px at 84% 20%, rgba(25,100,173,.15), transparent 70%),
    linear-gradient(180deg, #111B31 0%, var(--ink) 46%, #0C1424 100%);
  overflow: hidden;
  isolation: isolate;
}
.hero__grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner { width: 100%; }
/* Startseite: Rand auf einer Linie mit dem restlichen Inhalt */
.hero .wrap { max-width: var(--maxw); padding-inline: var(--gutter); }
.hero__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(32px,5vw,80px); align-items: end; }
.hero .eyebrow { margin-bottom: 22px; }
.hero h1 { color: #fff; margin-bottom: 22px; max-width: 20ch; }
.hero h1 em { font-style: normal; color: #7FBBEA; }
.hero__lead { color: rgba(255,255,255,.68); max-width: 46ch; font-weight: 300; }
.hero__facts { display: flex; gap: clamp(20px,3vw,44px); margin-top: 44px; flex-wrap: wrap; }
.hero__fact .n { font-family: var(--font-display); font-size: clamp(1.4rem,2.3vw,1.95rem); font-weight: 600; color: #fff; letter-spacing: -.02em; }
.hero__fact .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.46); margin-top: 4px; }

/* Hero side: Produkt-Umschalter 12K / 15K (kein Lichtteppich mehr) */
.hero__card {
  position: relative;
  width: fit-content;
  justify-self: end;
}
.hero__card-core {
  position: relative; z-index: 0;
  padding: 0;
  width: fit-content;
  display: grid; place-items: center;
  isolation: isolate;
}
/* Beide Panels liegen auf derselben Grid-Zelle — die Box ist so hoch wie das
   höhere Panel, der Umschalter springt also nicht. */
.hero__slides { display: grid; width: 100%; }
.hero__panel {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(16px) scale(.965);
  will-change: opacity, transform;
  transition: opacity .72s var(--ease-soft), transform .72s var(--ease-soft), visibility .72s var(--ease-soft);
}
.hero__panel.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
/* Weichzeichnung nur am Produktbild (filter kollidiert nicht mit der
   heroFloat-Transform-Animation); Text bleibt während des Übergangs scharf. */
.hero__panel img { filter: blur(4px); transition: filter .72s var(--ease-soft); }
.hero__panel.is-on img { filter: blur(0); }
.hero__card-core img {
  width: clamp(240px, 26vw, 370px); height: auto; object-fit: contain;
  animation: heroFloat 6.5s var(--ease-soft) infinite;
  transition: transform var(--dur) var(--ease);
  will-change: transform;
}
.hero__card:hover .hero__card-core .hero__panel.is-on img { animation-play-state: paused; transform: translate3d(0,-12px,0) scale(1.035); }
@keyframes heroFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-14px,0); } }
/* Umschalt-Punkte */
.hero__dots { display: flex; gap: 9px; justify-content: center; margin-top: 20px; }
.hero__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.28); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease);
}
.hero__dot:hover { background: rgba(255,255,255,.5); }
.hero__dot.is-on { width: 26px; border-radius: var(--r-pill); background: #fff; }
.hero__card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 14px; }
.hero__card-meta .t { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.hero__card-meta .s { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 3px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--ink);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 14px;
}

/* ============================================================
   Trust strip
   ============================================================ */
.trustbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}
.trustbar__cell {
  display: flex; align-items: center; gap: 14px;
  padding: 26px clamp(14px,2vw,30px);
  border-left: 1px solid var(--line);
}
.trustbar__cell:first-child { border-left: 0; }
.trustbar__cell svg { width: 22px; height: 22px; flex: none; color: var(--blue); }
.trustbar__cell .t { font-family: var(--font-display); font-weight: 600; font-size: .93rem; }
.trustbar__cell .s { font-size: .8rem; color: var(--muted); }

/* ============================================================
   Spec table
   ============================================================ */
.spectable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spectable th {
  text-align: left; padding: 16px 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 500;
  border-bottom: 1px solid var(--line-2);
}
.spectable td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.spectable tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.spectable tbody tr:hover { background: var(--blue-tint-2); }
.spectable .m { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.spectable .m img { width: 40px; height: 40px; object-fit: contain; border-radius: 9px; background: var(--surface); padding: 3px; }
.spectable .num { font-family: var(--font-mono); color: var(--ink-2); }
.spectable .hot { color: var(--accent-ink); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; margin-left: 6px; }
.spectable .m a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.spectable .m a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.spectable .m a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   Reviews
   ============================================================ */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(13px,1.5vw,20px); }
.review {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-shell); padding: 9px;
}
.review__core { background: #fff; border-radius: var(--r-core); padding: clamp(18px,1.9vw,26px); height: 100%; box-shadow: inset 0 1px 1px rgba(255,255,255,.9); }
.review__stars { display: flex; gap: 3px; margin-bottom: 12px; }
.review__stars svg { width: 14px; height: 14px; color: var(--accent); }
.review__quote { font-size: .98rem; line-height: 1.7; color: var(--ink-2); }
.review__who { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 13px; }
.review__av { width: 38px; height: 38px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: .85rem; flex: none; }
.review__name { font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.review__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 3px; }

/* ============================================================
   Editorial-Strecke — Kapitel-Intro, Zahlenband, Geschmackswelt
   (Kapitel-Kopf und Trennlinie stehen in components.css)
   ============================================================ */

/* --- Kapitel-Intro: Bild + Text, zwei Spalten --- */
.section--ink + .section .chapter-sep,
.section--ink .chapter-sep { background: linear-gradient(90deg, rgba(255,255,255,.18), transparent 70%); }

/* --- Kapitel-Intro: Bild + Text, zwei Spalten --- */
.chapter-split {
  display: grid; grid-template-columns: minmax(0, 400px) 1fr;
  gap: clamp(22px, 2.6vw, 38px);
  margin-block: clamp(12px, 1.8vw, 22px) clamp(30px, 3.4vw, 46px);
}
/* DOM-Reihenfolge ist bewusst „Bild zuerst" — mobil floatet es links oben und
   der Text läuft darum. Desktop platziert Text/Bild deshalb explizit,
   damit das Bild in der --rev-Variante weiter rechts steht. */
.chapter-split--rev { grid-template-columns: 1fr minmax(0, 400px); }
.chapter-split--rev .chapter-split__text { grid-column: 1; grid-row: 1; }
.chapter-split--rev .chapter-split__media { grid-column: 2; grid-row: 1; }
.chapter-split__media {
  border-radius: var(--r-shell);
  background: linear-gradient(168deg, #fff, var(--blue-tint-2));
  padding: 9px; overflow: hidden;
  max-width: min(100%, 400px); margin-inline: 0;
}
.chapter-split__media-core {
  border-radius: var(--r-core); overflow: hidden;
  background: linear-gradient(168deg, var(--blue-tint-2), var(--surface-2));
  aspect-ratio: 1 / 1; display: grid; place-items: center;
}
.chapter-split__media-core img { width: 100%; height: 100%; object-fit: contain; }
.chapter-split__text { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding-block: clamp(4px, 1.2vw, 14px); }
/* Merkmal-Liste: hellgraue Karten, kein seitlicher Akzentbalken */
.chapter-split__list { list-style: none; display: grid; gap: 8px; margin-top: 2px; }
.chapter-split__list li {
  position: relative;
  padding: 13px 16px 13px 18px;
  border-radius: 12px;
  background: var(--blue-tint-2);
  font-size: .89rem; font-weight: 300; color: var(--muted); line-height: 1.55;
}
.chapter-split__list li b,
.chapter-split__list li strong { color: var(--ink-2); font-weight: 600; }
.chapter-split__list svg { display: none; }

/* --- Zahlenband --- */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.statband__cell {
  border: 1px solid var(--line); border-radius: var(--r-shell);
  background: #fff; padding: clamp(20px, 2.4vw, 32px);
  box-shadow: var(--sh-1);
}
.statband__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1; letter-spacing: -.035em;
  color: var(--ink); margin-bottom: 10px;
}
.statband__n small { font-size: .48em; font-weight: 600; letter-spacing: -.01em; color: var(--blue); }
.statband__l {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2);
}

/* --- Geschmackswelt: vier Erlebniswelten --- */
.fwgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.fwcard {
  border: 1px solid var(--line); border-radius: var(--r-shell);
  background: #fff; padding: 9px; height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fwcard:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.fwcard__core {
  border-radius: var(--r-core); padding: clamp(20px, 2.3vw, 30px);
  min-height: 244px; display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(168deg, var(--fw-a, #F3F8FD), var(--fw-b, #FFFFFF) 62%);
}
.fwcard__swatch {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--fw-dot, var(--blue));
  display: grid; place-items: center; color: #fff; margin-bottom: 4px;
}
.fwcard__swatch svg { width: 22px; height: 22px; }
.fwcard__t { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; letter-spacing: -.015em; color: var(--ink); }
.fwcard__d { font-size: .89rem; font-weight: 300; line-height: 1.6; color: var(--muted); }
.fwcard__flavors { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.fwcard__frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fwcard__fmodel {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .08em; color: #fff; background: var(--fw-dot, var(--blue));
  border-radius: var(--r-pill); padding: 4px 8px;
}
.fwcard__f {
  font-size: .78rem; padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.82); border: 1px solid var(--line); color: var(--ink-2);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.fwcard__f:hover { border-color: var(--fw-dot, var(--blue)); color: var(--fw-dot, var(--blue)); background: #fff; }
.fwcard__n {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2);
}

/* --- Sorten-Chips unter der Geschmackswelt --- */
.flavorstrip {
  margin-top: clamp(20px, 2.4vw, 32px); padding: 9px;
  border: 1px solid var(--line); border-radius: var(--r-shell); background: var(--surface);
}
.flavorstrip__core {
  border-radius: var(--r-core); background: #fff; padding: clamp(20px, 2.4vw, 32px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 30px); align-items: center;
}
.flavorstrip__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); max-width: 12ch; line-height: 1.7;
}

/* --- Sorten-Empfehlung: eine Karte je Sorte (Kapitel 2 / 3) --- */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(13px, 1.5vw, 20px); }
.fcard {
  display: block;
  background: #fff;
  border-radius: var(--r-shell); padding: 0; overflow: hidden;
  box-shadow: 0 8px 22px rgba(15,23,42,.07);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .fcard:hover { transform: translate3d(0, -5px, 0); box-shadow: 0 18px 40px rgba(15,23,42,.14); }
}
.fcard__core {
  background: transparent; border-radius: 0;
  padding: 0 0 0 16px; height: 100%;
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center;
}
.fcard__media {
  border-radius: 14px; overflow: hidden; padding: 0;
  background: linear-gradient(168deg, var(--blue-tint-2), var(--surface-2));
  aspect-ratio: 1 / 1; display: grid; place-items: center;
}
.fcard__media img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.fcard__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 14px 16px 14px 0; }
.fcard__model {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2);
}
.fcard__flavor {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  line-height: 1.32; letter-spacing: -.015em; color: var(--ink);
}
.fcard__meta { font-size: .82rem; font-weight: 300; color: var(--muted); }
.fcard__add {
  margin-top: 6px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-pill, 999px);
  background: var(--blue, #2E90D9); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: .8rem; line-height: 1;
  border: none; cursor: pointer; user-select: none; white-space: nowrap;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fcard__add:hover { filter: brightness(1.07); }
.fcard__add.is-busy { opacity: .6; pointer-events: none; }
.fcard__add.is-added { background: #1FA97A; }

/* --- Nikotinfreie Sorten: responsives Raster (alle 10 Sorten sichtbar, kein Horizontal-Scroll) --- */
.zgrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(13px, 1.5vw, 20px);
}
.zcard { display: block; min-width: 0; }
.zcard__core {
  background: #fff; border-radius: var(--r-shell);
  padding: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 22px rgba(15,23,42,.07);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
  .zcard:hover .zcard__core { transform: translate3d(0, -5px, 0); box-shadow: 0 18px 40px rgba(15,23,42,.14); }
}
.zcard__media {
  position: relative; border-radius: 0; overflow: hidden; padding: 0;
  background: linear-gradient(168deg, var(--blue-tint-2), var(--surface-2));
  aspect-ratio: 1 / 1; display: grid; place-items: center;
}
.zcard__media img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.zcard__badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
}
.zcard__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 14px; }
.zcard__flavor { font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; color: var(--ink); }
.zcard__model { font-size: .78rem; color: var(--blue); }
.zcard__meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.zcard__note { font-size: .8rem; font-weight: 300; color: var(--muted); line-height: 1.5; }
/* („Wischen“-Hinweis entfernt — Sorten stehen jetzt als Raster) */

/* --- Rangliste der Top-Sorten (Kapitel 5) --- */
.frank {
  margin-top: clamp(20px, 2.4vw, 32px); padding: 9px;
  border: 1px solid var(--line); border-radius: var(--r-shell); background: var(--surface);
}
.frank__core { border-radius: var(--r-core); background: #fff; padding: clamp(20px, 2.4vw, 32px); }
.frank__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 2.4vw, 30px);
  align-items: start; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.frank__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); line-height: 1.7; max-width: 16ch;
}
.frank__note { font-size: .87rem; font-weight: 300; color: var(--muted); line-height: 1.6; max-width: 74ch; }
/* flex (nicht grid): die Whitespace-Textknoten zwischen den <li> würden
   im Grid anonyme Zeilen erzeugen und die Liste künstlich auseinanderziehen. */
.franklist {
  list-style: none; padding: 0; margin: 0;
  --frank-gap: clamp(22px, 3vw, 46px);
  display: flex; flex-wrap: wrap; column-gap: var(--frank-gap);
}
.frankrow {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; width: calc(50% - var(--frank-gap) / 2);
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.frankrow__media {
  width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden;
  background: linear-gradient(168deg, var(--blue-tint-2, #eaf2fb), var(--surface-2, #f4f7fb));
  display: grid; place-items: center;
}
.frankrow__media img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.frankrow__body { min-width: 0; }
.frankrow__t { display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.frankrow__t:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.frankrow__d { display: block; font-size: .78rem; font-weight: 300; color: var(--muted); line-height: 1.45; }
.frankrow__side { text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; justify-content: center; }
.frankrow__add {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: var(--r-pill, 999px);
  background: var(--blue, #2E90D9); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem; line-height: 1;
  border: none; cursor: pointer; white-space: nowrap;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.frankrow__add:hover { filter: brightness(1.07); }
.frankrow__add.is-busy { opacity: .6; pointer-events: none; }
.frankrow__add.is-added { background: #1FA97A; }

/* ============================================================
   Responsiv — Startseite
   ============================================================ */
@media (max-width: 1080px) {
  .fwgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Gestapelt: Bild klein links oben, Überschrift + Fließtext laufen darum
     (Magazin-Satz wie am Desktop) statt ein full-width Quadrat zu füllen.
     float statt grid — nur so umfließt der Text das Bild wirklich. */
  .chapter-split { display: block; }
  .chapter-split::after { content: ""; display: block; clear: both; }
  .chapter-split__media {
    float: left;
    width: clamp(138px, 45%, 205px);
    margin: 2px clamp(14px, 3.4vw, 22px) 6px 0;
  }
  .chapter-split__text { display: block; padding-block: 0; }
  .chapter-split__text > * + * { margin-top: 12px; }
  /* Merkmal-Karten haben eigene Flächen — sie starten unter dem Bild, sonst
     läge das Bild über ihren Hintergründen (Floats überdecken Blockflächen). */
  .chapter-split__list { clear: left; margin-top: 14px; }

  .statband { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zgrid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 84px; padding-bottom: 24px; }
  .hero__grid { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .hero h1 { font-size: clamp(2.05rem, 8.4vw, 2.55rem); margin-bottom: 12px; }
  .hero__lead { font-size: .93rem; }
  .hero__facts { display: none; }
  .hero__card { justify-self: center; max-width: none; }
  .hero__card-core img { width: min(52vw, 224px); }
  .hero__badge { margin-bottom: 8px; }
  .hero__card-meta { margin-top: 10px; }
  .reviews { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .flavorstrip__core { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .reviews { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .trustbar { grid-template-columns: 1fr 1fr; }
  .trustbar__cell { border-left: 0; border-top: 1px solid var(--line); padding-inline: 4px; }
  .trustbar__cell:nth-child(1), .trustbar__cell:nth-child(2) { border-top: 0; }
  .trustbar__cell:nth-child(even) { border-left: 1px solid var(--line); padding-left: 16px; }
  .hero { padding-top: 128px; }
  /* Geschmackswelt: auf Mobile statt Stapeln horizontal wischbar */
  .fwgrid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .fwgrid::-webkit-scrollbar { height: 6px; }
  .fwgrid::-webkit-scrollbar-thumb { background: var(--line-2, #e2e8f0); border-radius: 999px; }
  .fwcard { scroll-snap-align: start; }
  .fwcard__core { min-height: 0; }
  .fgrid { grid-template-columns: 1fr; }
  .franklist { flex-direction: column; }
  .frank__head { grid-template-columns: 1fr; gap: 10px; }
  .frank__label { max-width: none; white-space: nowrap; }
  /* Top-20 Zeile auf Mobile: Bild + Text oben, Button darunter
     (Button rechts neben dem Titel war zu eng) */
  .frankrow {
    width: 100%;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "media body"
      ". add";
    gap: 12px 14px;
    align-items: start;
  }
  .frankrow__media { grid-area: media; }
  .frankrow__body { grid-area: body; }
  .frankrow__side {
    grid-area: add;
    text-align: left;
    align-items: flex-start;
  }
  .frankrow__add { width: auto; }
  .zgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .reviews { grid-template-columns: 1fr; }
  .hero__facts { gap: 18px 26px; }
  .statband { grid-template-columns: 1fr 1fr; }
  .statband__cell { padding: 18px; }
}