@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/assets/fonts/caveat-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* =====================================================================
   Farben: Palette aus dem Logo, unveraendert. Die Verwendung ist geregelt,
   weil Rose, Salbei, Koralle und Gold auf Creme nur 1,7 bis 2,4 zu 1 kommen
   und als Textfarbe damit ausfallen. Text laeuft in Ink, farbige Toene
   tragen Flaechen. Fuer farbige Schrift gibt es die -text-Varianten,
   gleicher Farbton, nur dunkler, alle ab 4,5 zu 1 auf Creme.
   ===================================================================== */
:root {
  --rose: #c79380;
  --rose-text: #a05e46;
  --salbei: #9ba98d;
  --salbei-text: #657457;
  --ink: #3d2820;
  --cream: #f9f5e9;
  --sand: #efe7d6;
  --koralle: #f0a89b;
  --koralle-text: #ce3a1f;
  --gold: #e8b54f;
  --gold-text: #906613;
  --linie: #e3d9c6;
  --linie-dunkel: rgba(61, 40, 32, 0.22);

  --sans: 'Poppins', 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Segoe UI', cursive;

  --t-xs: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --t-sm: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --t-base: clamp(1.0625rem, 1.02rem + 0.23vw, 1.1875rem);
  --t-lead: clamp(1.1875rem, 1.1rem + 0.38vw, 1.375rem);
  --t-h4: clamp(1.0625rem, 1.02rem + 0.23vw, 1.1875rem);
  --t-h3: clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);
  --t-h2: clamp(1.875rem, 1.4rem + 2.4vw, 2.875rem);
  --t-h1: clamp(2.25rem, 1.5rem + 3.8vw, 4rem);
  --t-hand: clamp(1.75rem, 1.2rem + 2.7vw, 3rem);
  --t-zahl: clamp(2rem, 1.4rem + 3vw, 3.25rem);

  --sp-1: clamp(0.375rem, 0.35rem + 0.13vw, 0.5rem);
  --sp-2: clamp(0.625rem, 0.58rem + 0.22vw, 0.875rem);
  --sp-3: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --sp-4: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --sp-5: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  --sp-6: clamp(3.5rem, 2.6rem + 4.5vw, 6rem);
  --sp-7: clamp(4.5rem, 3.2rem + 6.5vw, 8rem);

  --wrap: 76rem;
  --wrap-text: 48rem;
  --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2rem);
  --rund: 1.25rem;
  --rund-klein: 0.75rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::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: var(--sans);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--rose-text); text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 0.1875rem solid var(--ink); outline-offset: 0.1875rem; border-radius: 0.25rem; }
.band-ink :focus-visible, .band-rose :focus-visible { outline-color: var(--cream); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-text { max-width: var(--wrap-text); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--ink); color: var(--cream); padding: var(--sp-2) var(--sp-4);
}
.skip:focus { left: 0; color: var(--cream); }

/* Baender */
.band { padding: var(--sp-7) 0; }
.band-rose { background: var(--rose); }
.band-salbei { background: var(--salbei); }
.band-sand { background: var(--sand); }
.band-ink { background: var(--ink); color: var(--cream); }
.band-ink a { color: var(--cream); }

/* Kopf */
.kopf { padding: var(--sp-3) 0; border-bottom: 0.0625rem solid var(--linie); }
.kopf-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.marke { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--ink); }
/* Das Logo ist freigestellt, die Sandflaeche kommt aus dem CSS. So schneidet
   der Kreis weder Ohrenspitzen noch Schal an. */
.marke img { width: clamp(2.75rem, 2.2rem + 2vw, 3.5rem); border-radius: 50%; background: var(--sand); }
.marke-name { font-family: var(--hand); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); line-height: 1; display: block; }
.marke-tag { display: block; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-text); font-weight: 600; }
.nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--sp-3);
  border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 500;
  font-size: var(--t-sm); transition: background-color 0.2s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--sand); }

/* Hero */
.hero { padding: var(--sp-5) 0 var(--sp-6); }
.hero-grid { display: grid; gap: var(--sp-5); align-items: center; }
.hero h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 var(--sp-3); font-weight: 700; }
.hand { display: block; font-family: var(--hand); font-weight: 700; font-size: var(--t-hand); color: var(--rose-text); line-height: 1; margin-bottom: var(--sp-1); }
.hero-lead { font-size: var(--t-lead); max-width: 36ch; margin: 0 0 var(--sp-4); }

.maskottchen { position: relative; justify-self: center; width: min(100%, 26rem); aspect-ratio: 1; display: grid; place-items: center; }
.maskottchen::before { content: ""; position: absolute; inset: 0; background: var(--sand); border-radius: 50%; }
.maskottchen img { position: relative; width: 80%; animation: wippen 6s var(--ease) infinite; }
.maskottchen .herz {
  position: absolute; top: 8%; right: 12%; width: 2.5rem; height: 2.5rem;
  background: var(--koralle); border-radius: 50% 50% 6% 50%; transform: rotate(45deg);
  animation: pochen 3.2s ease-in-out infinite;
}
@keyframes wippen { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-0.75rem) rotate(-1.2deg); } }
@keyframes pochen { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .maskottchen img, .maskottchen .herz { animation: none; } }

/* Knoepfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 3.25rem; padding: 0 var(--sp-4); background: var(--ink); color: var(--cream);
  text-decoration: none; border: none; border-radius: 999px; font-family: inherit;
  font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.knopf:hover { transform: translateY(-0.125rem); color: var(--cream); background: #4d3529; }
.knopf-hell { background: var(--cream); color: var(--ink); }
.knopf-hell:hover { background: #fff; color: var(--ink); }

/* Abschnittskopf */
.kopfzeile { max-width: 46ch; margin-bottom: var(--sp-5); }
.kopfzeile h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--sp-2); font-weight: 700; }
.kopfzeile p { margin: 0; font-size: var(--t-lead); }

/* Fliesstext */
.prose h2 { font-size: var(--t-h2); line-height: 1.14; margin: var(--sp-6) 0 var(--sp-3); font-weight: 700; letter-spacing: -0.015em; }
.prose h3 { font-size: var(--t-h3); margin: var(--sp-5) 0 var(--sp-2); font-weight: 600; }
.prose p { margin: 0 0 var(--sp-3); max-width: 68ch; }
.prose ul, .prose ol { max-width: 66ch; padding-left: 1.25em; }
.prose li { margin-bottom: var(--sp-1); }
.prose h2:first-child { margin-top: 0; }

/* Seitenkopf der Unterseiten */
.kicker {
  font-family: var(--hand); font-size: var(--t-hand); line-height: 1;
  color: var(--rose-text); margin: 0 0 var(--sp-1);
}
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 var(--sp-3); }
.zeile-datum { font-size: var(--t-sm); margin: 0 0 var(--sp-4); opacity: 0.85; }

/* Seitenkopf mit Illustration daneben */
.seitenkopf { display: grid; gap: var(--sp-4); align-items: center; }
.seitenkopf > img { width: min(100%, 17rem); height: auto; justify-self: center; }
@media (min-width: 56rem) {
  .seitenkopf { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--sp-5); }
  .seitenkopf > img { width: 100%; }
}

/* Sprungmarken */
.sprungmarken {
  background: var(--sand); border-radius: var(--rund-klein);
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-5);
}
.sprungmarken h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 var(--sp-2); }
.sprungmarken ol { margin: 0; padding-left: 1.1em; display: grid; gap: var(--sp-1); font-size: var(--t-sm); }

/* Rechtsseiten: kleinere Ueberschriften, sonst wirkt ein Impressum mit einem
   Dutzend Abschnitten wie eine Plakatwand. */
.legal h2 { font-size: var(--t-h3); margin: var(--sp-5) 0 var(--sp-2); font-weight: 700; letter-spacing: 0; }
.legal h3 { font-size: var(--t-h4); margin: var(--sp-4) 0 var(--sp-1); }
.legal p, .legal li { font-size: var(--t-sm); }
.legal .vorspann { font-size: var(--t-base); }

/* Rechtsseiten: Vorspann und abgesetzte Adressblöcke */
.prose .vorspann { font-size: var(--t-lead); margin-bottom: var(--sp-4); }
.legal-box {
  background: var(--sand); border-left: 0.125rem solid var(--rose);
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0 var(--sp-4);
  font-style: normal; font-size: var(--t-sm); line-height: 1.7;
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
}
.prose code {
  background: var(--sand); padding: 0.1em 0.4em; border-radius: 0.25rem;
  font-size: 0.9em; font-family: ui-monospace, Consolas, monospace;
}

.notiz {
  background: var(--sand); border-left: 0.25rem solid var(--rose);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  margin: var(--sp-4) 0;
}
.notiz p:last-child { margin-bottom: 0; }

/* Liste mit Trennlinien statt Kachelwand */
.liste { display: grid; }
.liste a, .liste .zeile {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-4) 0; border-top: 0.0625rem solid var(--linie); text-decoration: none; color: inherit;
  transition: padding-left 0.25s var(--ease);
}
.liste a:last-child, .liste .zeile:last-child { border-bottom: 0.0625rem solid var(--linie); }
.liste a:hover { padding-left: var(--sp-2); }
.liste h3 { margin: 0 0 var(--sp-1); font-size: var(--t-h3); font-weight: 600; }
.liste p { margin: 0; font-size: var(--t-sm); max-width: 54ch; }
.liste .zahl { font-family: var(--hand); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: var(--rose-text); white-space: nowrap; }
.band-salbei .liste a, .band-salbei .liste .zeile, .band-rose .liste a { border-color: var(--linie-dunkel); }
.band-salbei .liste .zahl, .band-rose .liste .zahl { color: var(--ink); }

/* Tabellen */
.tabelle-scroll { overflow-x: auto; border-radius: var(--rund-klein); background: var(--cream); margin: var(--sp-4) 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
caption { text-align: left; font-size: var(--t-sm); padding: var(--sp-3); color: var(--ink); background: var(--sand); border-radius: var(--rund-klein) var(--rund-klein) 0 0; }
th, td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 0.0625rem solid var(--linie); }
thead th { background: var(--sand); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }

/* Rechner */
/* Der Rechner braucht Kontrast zum Untergrund. Auf dem hellen Standardband
   ist das Sand, auf den farbigen Baendern Creme. */
.rechner { background: var(--sand); border-radius: var(--rund); padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.band-rose .rechner, .band-salbei .rechner, .band-sand .rechner { background: var(--cream); }
/* min-width:0 ist noetig, sonst sprengt ein <select> mit langem Optionstext
   die Rasterspalte: Grid-Elemente schrumpfen von sich aus nicht unter ihre
   inhaltliche Mindestbreite. Das gilt auf JEDER Ebene, deshalb auch fuer die
   direkten Kinder des Rechners selbst. */
.rechner > * { min-width: 0; }
.feldzeile { display: grid; gap: var(--sp-3); min-width: 0; }
.feld { min-width: 0; }
.feld select, .feld input { max-width: 100%; }
.feld label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--sp-1); }
.feld input, .feld select {
  width: 100%; min-height: 3.25rem; padding: 0 var(--sp-3); font: inherit; font-size: var(--t-base);
  color: var(--ink); background: #fff; border: 0.125rem solid var(--linie); border-radius: var(--rund-klein);
}
.feld input:focus, .feld select:focus { outline: none; border-color: var(--ink); }
.feld .hilfe { font-size: var(--t-xs); margin: var(--sp-1) 0 0; }
.ergebnis { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-3); border-top: 0.125rem dashed var(--linie); }
.ergebnis > * { min-width: 0; }
.ergebnis strong { overflow-wrap: anywhere; }
.ergebnis strong { font-size: var(--t-zahl); line-height: 1; font-weight: 700; }
.ergebnis .erklaerung { font-size: var(--t-sm); max-width: 40ch; margin: 0; }



/* =====================================================================
   Amazon-Produktbox (.ab-product). Das Markup kommt aus dem zentralen Modul
   und bleibt unangetastet, hier wird nur gestaltet. Bewusst OHNE den linken
   Akzentbalken des Standard-Stylesheets: Die Seite arbeitet mit Farbflaechen
   und weichen Formen, ein Signalstreifen an der Kante passt nicht dazu.
   Stattdessen traegt eine Cremekarte mit weichem Schatten die Box, das Bild
   sitzt auf einer Sandflaeche, und das Etikett steht in der Handschrift der
   Marke.
   ===================================================================== */
:root {
  --ab-accent: #a05e46;
  --ab-accent-dark: #834b37;
  --ab-ink: #3d2820;
  --ab-ink-soft: #4d3529;
  --ab-muted: #7d6a5e;
  --ab-pro: #657457;
  --ab-con: #ce3a1f;
  --ab-bg: #f9f5e9;
  --ab-line: #e3d9c6;
  --ab-feedback-bg: #efe7d6;
  --ab-radius: 1.5rem;

  /* Amazon-Hausfarben fuer den Knopf, bewusst unveraendert uebernommen */
  --amazon-gelb: #ffd814;
  --amazon-gelb-dunkel: #f7ca00;
  --amazon-rand: #fcd200;
  --amazon-tinte: #0f1111;
}

.ab-product {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--ab-bg); border: 0.0625rem solid var(--ab-line);
  border-radius: var(--ab-radius); padding: var(--sp-4);
  margin: var(--sp-4) 0; color: var(--ab-ink-soft); font-size: var(--t-sm);
  box-shadow: 0 0.75rem 2rem -1.25rem rgba(61, 40, 32, 0.45);
}

/* Das Bild bekommt eine eigene weiche Flaeche statt eines Kastens mit Rahmen */
.ab-product__image {
  flex: 0 0 11.5rem; position: relative; background: #fff;
  border: 0; border-radius: 1.25rem; padding: var(--sp-3);
  text-align: center; box-shadow: inset 0 0 0 0.0625rem var(--ab-line);
}
.ab-product__image img {
  max-width: 100%; height: auto; max-height: 12rem;
  object-fit: contain; mix-blend-mode: multiply;
}

/* Etikett in der Handschrift der Marke, leicht schraeg wie angeheftet */
.ab-product__badge {
  position: absolute; top: -0.7rem; left: -0.5rem;
  background: var(--rose); color: #fff;
  font-family: var(--hand); font-weight: 700;
  font-size: 1.4rem; line-height: 1; letter-spacing: 0.01em;
  padding: 0.4rem 0.9rem 0.5rem; border-radius: 999px;
  transform: rotate(-4deg);
  box-shadow: 0 0.35rem 0.9rem -0.4rem rgba(61, 40, 32, 0.6);
}
.ab-product__badge--nobild {
  position: static; display: inline-block; margin: 0 0 var(--sp-2); transform: none;
}

.ab-product__body { min-width: 0; flex: 1; }
.ab-product__title { font-size: var(--t-h3); font-weight: 700; margin: 0 0 0.2rem; color: var(--ab-ink); line-height: 1.25; }
.ab-product__title a { color: var(--ab-ink); text-decoration: none; }
.ab-product__title a:hover { color: var(--ab-accent-dark); }
.ab-product__brand { display: block; font-size: var(--t-xs); color: var(--ab-muted); margin: 0 0 var(--sp-2); }
.ab-product__price { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); font-weight: 700; color: var(--ab-ink); line-height: 1.1; margin: 0 0 var(--sp-3); }
.ab-product__price-note { font-size: var(--t-xs); font-weight: 500; color: var(--ab-muted); }
.ab-product__desc { margin: 0 0 var(--sp-3); max-width: 62ch; }

/* Vorteile und Einwaende: runde Marken statt Plus und Ausrufezeichen */
.ab-product__proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3); }
.ab-product__proscons ul { margin: 0.35rem 0 0; padding: 0; list-style: none; }
.ab-product__proscons li { position: relative; padding: 0.2rem 0 0.2rem 1.6rem; line-height: 1.5; }
.ab-product__pros-label, .ab-product__cons-label { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.ab-product__pros-label { color: var(--ab-pro); }
.ab-product__cons-label { color: var(--ab-con); }
.ab-product__pros li::before, .ab-product__cons li::before {
  position: absolute; left: 0; top: 0.45rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 800; line-height: 1; color: #fff;
}
.ab-product__pros li::before { content: "\2713"; background: var(--ab-pro); }
.ab-product__cons li::before { content: "!"; background: var(--ab-con); }

.ab-product__feedback { background: var(--ab-feedback-bg); border-radius: var(--rund-klein); padding: var(--sp-3); margin: 0 0 var(--sp-3); }
.ab-product__verdict { border-left: 0.1875rem solid var(--ab-accent); padding: 0.15rem 0 0.15rem var(--sp-2); margin: 0 0 var(--sp-3); }

/* ---------------------------------------------------------------------
   Amazon-Knopf in den Hausfarben von Amazon, mit dem Smile-Bogen als Zeichen
   und einem Lichtstreifen, der beim Darueberfahren wie ein Scanner
   durchlaeuft. Animiert werden nur transform und opacity.
   --------------------------------------------------------------------- */
.ab-product__cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0 var(--sp-4) 0 var(--sp-3);
  background: var(--amazon-gelb); color: var(--amazon-tinte);
  border: 0.0625rem solid var(--amazon-rand); border-radius: 999px;
  font-weight: 700; font-size: var(--t-sm); text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0.25rem 0.75rem -0.35rem rgba(15, 17, 17, 0.5);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
/* Der Smile-Bogen als Zeichen vor der Beschriftung */
.ab-product__cta::before {
  content: ""; flex: 0 0 1.15rem; height: 1.35rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%230f1111' d='M257.7 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56s-32.3-25.3-32.3-52.8l0-147.1C341.5 89 317 32 229.2 32 141.2 32 94.5 87 94.5 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8l0 40.6zM393.7 413c-7.7 10-70 67-174.5 67S34.7 408.5 10.2 379c-6.8-7.7 1-11.3 5.5-8.3 73.3 44.5 187.8 117.8 372.5 30.3 7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z'/></svg>") left center / contain no-repeat;
}
.ab-product__cta::after {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1;
  width: 45%; transform: translateX(-160%) skewX(-18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
}
.ab-product__cta:hover, .ab-product__cta:focus-visible {
  background: var(--amazon-gelb-dunkel); color: var(--amazon-tinte);
  transform: translateY(-0.125rem);
}
.ab-product__cta:hover::after, .ab-product__cta:focus-visible::after {
  animation: scanner 0.85s var(--ease);
}
@keyframes scanner {
  from { transform: translateX(-160%) skewX(-18deg); }
  to   { transform: translateX(320%)  skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-product__cta:hover::after, .ab-product__cta:focus-visible::after { animation: none; }
  .ab-product__cta:hover { transform: none; }
}

/* Auf den farbigen Baendern traegt die Cremekarte allein, ohne Rahmen */
.band-salbei .ab-product, .band-rose .ab-product {
  border-color: transparent;
  box-shadow: 0 1rem 2.5rem -1.25rem rgba(61, 40, 32, 0.55);
}

@media (max-width: 48rem) {
  .ab-product { flex-direction: column; gap: var(--sp-3); }
  .ab-product__image { flex: none; width: 100%; max-width: 15rem; margin: 0 auto; }
  .ab-product__badge { left: 0.5rem; }
  .ab-product__proscons { grid-template-columns: 1fr; }
  .ab-product__cta { display: flex; width: 100%; justify-content: center; padding: 0 var(--sp-3); }
}

/* Fuss */
.fuss { padding: var(--sp-6) 0 var(--sp-5); }
.fuss-inner { display: grid; gap: var(--sp-4); }
.fuss p { margin: 0 0 var(--sp-2); }
.fein { font-size: var(--t-sm); opacity: 0.88; }
.fuss-nav { display: grid; gap: var(--sp-1); }
.fuss-nav a { display: block; min-height: 2.25rem; }

/* Brotkrumen */
.krumen { padding: var(--sp-3) 0 0; font-size: var(--t-sm); }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; }
.krumen li::after { content: "›"; margin-left: var(--sp-1); color: var(--rose-text); }
.krumen li:last-child::after { content: ""; }

/* VG-Wort-Zaehlpixel bleibt im Textfluss, nie verstecken */
.vgw { display: inline-block; width: 1px; height: 1px; border: 0; vertical-align: bottom; }

@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); }
  .feldzeile { grid-template-columns: repeat(3, 1fr); }
  .produkte { grid-template-columns: repeat(3, 1fr); }
  .fuss-inner { grid-template-columns: 1.4fr 1fr 1fr; }
}