/*
 * v2.css — die Bausteine der Kundenvision (27.08.2026, 8 Blätter).
 * Ergänzt js-seite.css, überschreibt nichts Bestehendes.
 * 🔴 Projektregel: NIE overflow-x am html (killt jedes sticky).
 *    Jede neue Sektion dichtet sich selbst mit overflow:clip ab.
 */

/* ── Kopfzeile (Blatt 1: sticky, Logo links, Symbole rechts) ─────────── */
.v2-kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--rand);
  /* Kunde 31.08.: der oberste Streifen soll die Farbe des Hintergrunds haben,
     also durchsichtig sein — KEIN eigener Balken. Damit die Wortmarke über
     hellen Bildern nicht verschwindet (gemessen 1,02:1 über der Sakura-Szene),
     trägt ein weicher Verlauf von oben die Schrift. Er hat keine Kante und
     wirkt nicht wie ein Streifen. */
  background: linear-gradient(180deg, rgba(6,10,8,.74) 0%, rgba(6,10,8,.58) 46%, rgba(6,10,8,.18) 78%, rgba(6,10,8,0) 100%);
  border-bottom: 0;
}
.v2-kopf .marke {
  font-family: var(--display); font-weight: 800; letter-spacing: .34em;
  font-size: 15px; color: var(--kalkweiss); text-decoration: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.92), 0 2px 14px rgba(0,0,0,.8);
}
.v2-kopf .werkzeuge svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)) drop-shadow(0 2px 10px rgba(0,0,0,.75)); }
.v2-kopf .werkzeuge { display: flex; gap: 6px; align-items: center; }
.v2-kopf .werkzeuge button, .v2-kopf .werkzeuge a {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
  color: var(--kalkweiss); text-decoration: none;
}
.v2-kopf .werkzeuge button:hover, .v2-kopf .werkzeuge a:hover { background: rgba(255,253,248,.1); }
.v2-kopf svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.v2-kopf .zaehlerpunkt {
  position: absolute; translate: 11px -10px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: #E4B84C; color: #16211C; font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}

/* ── Hero mit Hintergrund-Video (Blatt 1) ────────────────────────────── */
.v2-hero { position: relative; height: 100svh; overflow: clip; display: grid; align-items: center; }
.v2-hero video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.v2-hero .schleier {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10,14,12,.72) 0%, rgba(10,14,12,.38) 55%, rgba(10,14,12,.12) 100%);
}
.v2-hero .inhalt { position: relative; z-index: 2; padding: 0 var(--rand); max-width: 760px; }
/* Kunde 01.09.: das justsoap-Logo steht groß über der Überschrift — und in
   WEISS, passend zur Schrift. Die Datei selbst ist dunkelgrün (#143521),
   deshalb derselbe Filter wie im Fuß (js-seite.css:400). */
.v2-hero .heldenlogo {
  /* Auch an die Fensterhöhe koppeln: bei 1440x720 ragte das Logo sonst
     18 px in die Kopfzeile (gemessen). */
  display: block; width: clamp(140px, min(19vw, 19svh), 268px); height: auto;
  margin: 0 0 26px;
  filter: brightness(0) invert(1) drop-shadow(0 4px 22px rgba(0,0,0,.55));
}
@media (max-width: 900px) {
  .v2-hero .heldenlogo { width: clamp(140px, 42vw, 190px); margin-bottom: 18px; }
}
.v2-hero h1 {
  font-family: var(--display); font-weight: 800; line-height: .98;
  font-size: clamp(38px, 6.4vw, 84px); margin: 0 0 18px; text-wrap: balance;
}
.v2-hero .slogan { font-size: clamp(16px, 2vw, 21px); color: #E7E4DC; margin: 0 0 10px; }
.v2-hero .herkunft { display: flex; align-items: center; gap: 10px; color: #CFCBC2; font-size: 15px; margin: 0 0 34px; }
.v2-hero .flagge { width: 26px; height: 16px; border-radius: 2px; overflow: hidden; display: inline-block; flex: none;
  background: linear-gradient(180deg, #000 33%, #DD0000 33% 66%, #FFCE00 66%); }
.v2-knopf {
  display: inline-block; padding: 16px 34px; border-radius: 999px;
  background: var(--kalkweiss); color: #16211C; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 16px;
  transition: transform .2s ease, background .2s ease;
}
.v2-knopf:hover { transform: translateY(-2px); background: #fff; }

/* ── Sortenwelt (Blatt 2: aufklappen, Hover-Explosion, Warenkorb) ───── */
.v2-sorten { position: relative; height: 320svh; overflow: clip; }
.v2-sorten .klebt { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: clip; }
.v2-sorten h2 { position: absolute; top: max(84px, 11svh); left: 0; right: 0; text-align: center; margin: 0;
  font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3.4vw, 44px); }
/* Ramon 31.08. (Nacht): die Seifen deutlich größer — Bühne wächst mit. */
.v2-sorten .buehne { position: relative; width: min(96vw, 1560px); height: 72svh; }
@media (max-width: 899px) {
  /* Kunde 01.09.: die Überschrift verschwindet, die Seifen werden deutlich
     größer und der Warenkorb-Knopf steht NEBEN der Seife — so nutzt der
     Stapel die ganze Seite aus. */
  .v2-sorten h2 { display: none; }
  .v2-sorten .klebt { padding-top: 0; }
  .v2-sorten .buehne { width: 96vw; height: 100svh; }
}
/* Ramon 31.08. (spät): am Handy MUSS es sich genauso verhalten wie am
   Rechner — eine Seife nach links, eine nach rechts, aus der Mitte heraus.
   Vorher schob es am Handy nach oben/unten. Deshalb gilt translateX überall;
   am Handy nur mit kleineren Karten, damit alle drei nebeneinander passen. */
.v2-sorte {
  /* --breite steuert alles: der Versatz wird daraus gerechnet, damit die drei
     Karten bei JEDER Bildschirmbreite gleich sauber stehen. */
  --breite: min(94vw, 560px); --luecke: 12px;
  position: absolute; left: 50%; top: 50%; width: var(--breite);
  translate: -50% -50%;
  /* 🔴 Kunde 31.08.: AM HANDY kommen die Seifen ÜBEREINANDER heraus, nicht
     nebeneinander — eine oben, eine mittig, eine unten (er hat es auf seinem
     Foto eingezeichnet). Am Rechner bleibt es bei links/Mitte/rechts.
     Deshalb hier translateY, ab 900 px translateX. */
  transform: translateY(calc(var(--k, 0) * var(--ziel, 0) * .01 * (var(--hoch, 190px) + var(--luecke))))
             scale(calc(.92 + var(--k, 0) * .08));
  transition: filter .25s ease;
  text-align: center;
}
@media (min-width: 900px) {
  .v2-sorte {
    --breite: min(31vw, 500px);
    transform: translateX(calc(var(--k, 0) * var(--ziel, 0) * .01 * (var(--breite) + var(--luecke))))
               scale(calc(.92 + var(--k, 0) * .08));
  }
}
/* Kunde 31.08.: "ganz simpel, ohne Hintergrundbild, Hintergrund schwarz,
   keine Umrandungen" — deshalb kein Rahmen, kein Schatten, keine Ecken. */
.v2-sorten { background: #000; }
.v2-sorten .klebt { background: #000; }
.v2-sorte .fenster { position: relative; cursor: pointer; display: block;
  border-radius: 0; overflow: hidden; box-shadow: none; background: #000; }
/* Zoom beim Darüberfahren — reine CSS-Sache, dafür braucht es kein KI-Video */
.v2-sorte img.still { width: 100%; height: auto; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
/* Beim Darüberfahren wächst die Seife — und sie PLATZT: der Explosionsfilm
   blendet über das Draufsicht-Bild (Kunde 31.08.). Der Klick öffnet weiterhin
   direkt die Unterseite, es bleibt bei EINEM Klick. */
.v2-sorte .fenster:hover img.still,
.v2-sorte.nah img.still { transform: scale(1.24); }
.v2-sorte .name { font-family: var(--display); font-weight: 800; font-size: 18px; margin: 14px 0 8px; }
.v2-sorte .kaufen {
  display: inline-block; padding: 10px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,253,248,.4); background: none; color: var(--kalkweiss);
  font-family: var(--display); font-weight: 700; font-size: 14px;
}
/* Am Handy sind die Karten schmal — der Knopf muss in die Karte passen,
   sonst überlappen die drei Knöpfe einander (gemessen bei 375 px). */
@media (max-width: 899px) {
  /* Bild links, Name und Knopf rechts daneben (Kundenwunsch 01.09.) */
  /* Ramon 01.09.: die Seifen am Handy etwas größer — das Bild bekommt mehr
     Anteil, Name und Knopf rücken enger zusammen. */
  .v2-sorte { display: grid; grid-template-columns: 1fr 118px; gap: 12px;
    align-items: center; text-align: left; }
  .v2-sorte .fenster { grid-row: 1 / 3; }
  .v2-sorte .name { font-size: 17px; margin: 0 0 8px; align-self: end; line-height: 1.15; }
  .v2-sorte .kaufen { display: block; width: 100%; padding: 9px 6px;
    font-size: 12.5px; align-self: start; line-height: 1.25; }
  .v2-sorte .kaufen .preis-im-knopf { display: none; }
}
.v2-sorte .kaufen:hover { background: var(--kalkweiss); color: #16211C; }

/* ── Impact-Zahlen (Blatt 4: drei Spalten) ──────────────────────────── */
.v2-impact { background: var(--hell); color: var(--tinte); padding: var(--luft) var(--rand); overflow: clip; }
.v2-impact .spalten { display: grid; gap: 48px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: 1240px; margin: 0 auto; }
.v2-impact h3 { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 22px; }
.v2-impact .riesig { font-family: var(--display); font-weight: 800; font-size: clamp(56px, 7vw, 96px); line-height: 1; }
.v2-impact .einheit { font-size: 15px; color: #6E6A61; display: block; margin-top: 6px; }
.v2-impact .fussnote { font-size: 13px; color: #8A857B; margin-top: 14px; }
.v2-impact .flaschen { display: flex; gap: 8px; align-items: flex-end; height: 110px; margin: 8px 0 4px; }
.v2-impact .flasche { width: 34px; height: 92px; opacity: 0; transform: translateX(46px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.v2-impact .flasche svg { width: 100%; height: 100%; stroke: var(--tinte); fill: none; stroke-width: 2; }
/* Blatt 4 + Ramon 31.08. (spät): "Aus dieser EINEN Flasche werden sechs, jede
   bildet sich hintereinander." Flasche 1 steht zuerst allein in der Mitte,
   rückt dann nach links, und die übrigen fünf wachsen EINZELN nacheinander
   an ihrem Platz auf — nicht alle gleichzeitig eingeflogen.
   --mitte rechnet das JS aus den echten Maßen der Reihe. */
.v2-impact .flasche { transform-origin: bottom center; }
.v2-impact .flasche.erste { transform: translateX(var(--mitte, 105px)); }
.v2-impact .flasche.erste.da { opacity: 1; }
.v2-impact .flasche.erste.gerueckt { transform: translateX(0); }
/* Die fünf weiteren gehen aus der jeweils vorherigen hervor: sie starten auf
   deren Platz (--her, vom JS gesetzt) und gleiten von dort an ihre Stelle.
   Ramon 31.08. (Nacht): das reine Aufskalieren sah nicht gut aus. */
.v2-impact .flasche:not(.erste) {
  transform: translateX(var(--her, -42px)) scale(.72); opacity: 0;
  transition: opacity .6s ease, transform 1.15s cubic-bezier(.22,.68,.24,1); }
.v2-impact .flasche:not(.erste).da { opacity: 1; transform: translateX(0) scale(1); }
.v2-impact .seifenkasten { width: 64px; height: 64px; border: 2.5px solid var(--tinte); border-radius: 10px;
  transform: scale(var(--gr, .66)); transform-origin: left bottom; transition: transform .8s cubic-bezier(.2,.7,.2,1); margin: 24px 0 10px; }
.v2-impact.da .seifenkasten { --gr: 1; }

/* ── Bewertungen + Icons (Blatt 5) ──────────────────────────────────── */
.v2-stimmen { padding: var(--luft) var(--rand); overflow: clip; }
.v2-stimmen .reihe { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 1240px; margin: 0 auto; }
.v2-stimme { background: rgba(255,253,248,.05); border: 1px solid rgba(255,253,248,.1); border-radius: 16px; padding: 24px; }
.v2-stimme .sterne { color: #E4B84C; letter-spacing: 3px; font-size: 15px; }
.v2-stimme p { color: #DAD6CC; font-size: 15.5px; line-height: 1.65; }
.v2-stimme .wer { color: #9A968C; font-size: 13.5px; }
.v2-stimme .quelle { color: #7B776E; font-size: 12.5px; }

/* ── Story (Blatt 6) ────────────────────────────────────────────────── */
.v2-story { padding: var(--luft) var(--rand); max-width: 860px; margin: 0 auto; overflow: clip; }
.v2-story .usps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 40px; }
.v2-story .usp { border-top: 2px solid rgba(255,253,248,.25); padding-top: 12px; }
.v2-story .usp b { font-family: var(--display); display: block; margin-bottom: 4px; }
.v2-story .usp span { color: #B9B5AB; font-size: 14.5px; }

/* ── FAQ (Blatt 7) ──────────────────────────────────────────────────── */
.v2-faq { background: var(--hell); color: var(--tinte); padding: var(--luft) var(--rand); overflow: clip; }
.v2-faq .innen { max-width: 860px; margin: 0 auto; }
.v2-faq details { border-bottom: 1px solid var(--hellrand); padding: 4px 0; }
.v2-faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 17.5px; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.v2-faq summary::after { content: '+'; font-weight: 400; font-size: 24px; line-height: 1; color: #8A857B; }
.v2-faq details[open] summary::after { content: '–'; }
.v2-faq details p { margin: 0 0 18px; color: #4A473F; line-height: 1.7; }
.v2-faq .redemit { text-align: center; margin-top: 44px; }

/* ── Warenkorb-Panel ────────────────────────────────────────────────── */
.v2-korb {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(420px, 100vw); background: var(--kalkweiss); color: var(--tinte);
  transform: translateX(105%); transition: transform .35s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column; box-shadow: -18px 0 60px rgba(0,0,0,.3);
}
.v2-korb.offen { transform: none; }
.v2-korb .kopf { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--hellrand); }
.v2-korb .kopf b { font-family: var(--display); font-size: 18px; }
.v2-korb .zu { background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--tinte); }
.v2-korb .posten { flex: 1; overflow-y: auto; padding: 12px 24px; }
.v2-posten { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hellrand); }
/* Ramon 01.09.: im Warenkorb KEIN Film mehr — die freigestellte Draufsicht
   steht frei, wie in der Sortenwelt. Kein Kasten, kein Hintergrund, und
   `contain`, damit die Seife ganz zu sehen ist statt angeschnitten. */
.v2-posten .bild { position: relative; display: block; width: 76px; height: 62px;
  background: none; }
.v2-posten .bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.28)); }
.v2-posten .menge { display: flex; align-items: center; gap: 10px; }
.v2-posten .menge button { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--hellrand); background: none; cursor: pointer; font-size: 16px; }
.v2-korb .fussbereich { padding: 20px 24px; border-top: 1px solid var(--hellrand); }
.v2-korb .summe { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.v2-korb .hinweis { font-size: 12.5px; color: #8A857B; margin: 0 0 14px; }
.v2-korb .zurkasse { width: 100%; text-align: center; }
.v2-schleier { position: fixed; inset: 0; z-index: 70; background: rgba(10,14,12,.45); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.v2-schleier.offen { opacity: 1; pointer-events: auto; }

/* ── Menü + Suche Overlays ──────────────────────────────────────────── */
.v2-menue { position: fixed; inset: 0; z-index: 80; background: var(--tief); display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.v2-menue.offen { opacity: 1; pointer-events: auto; }
.v2-menue nav { display: grid; gap: 22px; text-align: center; }
.v2-menue a { color: var(--kalkweiss); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4.4vw, 44px); }
.v2-menue a:hover { color: #E4B84C; }
.v2-menue .zu, .v2-suche .zu { position: absolute; top: 18px; right: max(18px, var(--rand)); background: none; border: 0; color: var(--kalkweiss); font-size: 32px; cursor: pointer; }
.v2-suche { position: fixed; inset: 0; z-index: 80; background: color-mix(in oklab, var(--tief) 96%, transparent); padding: 120px var(--rand) 0;
  opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.v2-suche.offen { opacity: 1; pointer-events: auto; }
.v2-suche input { width: min(680px, 100%); display: block; margin: 0 auto; background: none; border: 0; border-bottom: 2px solid rgba(255,253,248,.4);
  color: var(--kalkweiss); font-family: var(--display); font-size: clamp(24px, 3.4vw, 40px); padding: 10px 4px; outline: none; }
.v2-suche .treffer { max-width: 680px; margin: 26px auto; display: grid; gap: 12px; }
.v2-suche .treffer a { color: #DAD6CC; text-decoration: none; font-size: 18px; padding: 10px 4px; border-radius: 10px; }
.v2-suche .treffer a:hover { background: rgba(255,253,248,.08); }

/* ── Produktseite (Blatt 3) ─────────────────────────────────────────── */
.v2-produkt { position: relative; overflow: clip; }
/* Kunde 01.09.: das Video füllt die ganze Fläche, die Kaufoption liegt als
   Fenster OBEN DRAUF — nicht mehr daneben. Am Handy geht das Video randlos
   von der linken bis zur rechten Kante, ohne leeren Hintergrund. */
/* Kunde 02.09., Punkt 10: Video — Galerie — Kaufbox in dieser Reihenfolge.
   Am Rechner liegt die Kaufbox weiter ueber dem Video (gleiche Rasterzelle),
   darunter die Galerie. Am Handy stehen alle drei untereinander. */
.v2-produkt .oben { position: relative; display: grid;
  /* 🔴 minmax(0,1fr), NICHT 1fr: der Bildstreifen der Galerie ist breiter als
     der Bildschirm, und eine 1fr-Spalte waechst auf ihren Inhalt mit. Am Handy
     wurde die Spalte dadurch 980 px breit und schob die ganze Kaufbox
     (Name, Preis, Grundpreis, Kaufknopf) aus dem sichtbaren Bereich. */
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
  padding: 0; max-width: none; margin: 0; }
.v2-produkt .oben .kino { grid-area: 1 / 1; }
.v2-produkt .oben .js-galerie { grid-area: 2 / 1; }

.v2-produkt .kino { position: relative; aspect-ratio: 16/9; border-radius: 0; overflow: clip;
  background: var(--tief); width: 100%; }
@media (max-width: 900px) {
  /* randlos und formatfüllend: lieber seitlich etwas beschneiden als leere
     Ränder zeigen (ausdrücklicher Kundenwunsch). */
  .v2-produkt .kino { aspect-ratio: auto; height: 74svh; }
}
.v2-produkt .kino canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-produkt .kino video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-kaufbox { position: sticky; top: 96px; background: rgba(255,253,248,.05); border: 1px solid rgba(255,253,248,.12); border-radius: 18px; padding: 28px; }
.v2-kaufbox h1 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 6px; }
.v2-kaufbox .duft { color: #B9B5AB; margin: 0 0 18px; }
.v2-kaufbox .preis { font-family: var(--display); font-weight: 800; font-size: 30px; }
.v2-kaufbox .grundpreis { color: #9A968C; font-size: 13.5px; margin: 2px 0 20px; }
.v2-kaufbox .mengenwahl { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.v2-kaufbox .mengenwahl button { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,253,248,.35); background: none; color: var(--kalkweiss); font-size: 18px; cursor: pointer; }
.v2-kaufbox .versand { font-size: 13px; color: #9A968C; margin-top: 12px; }
.v2-kaufbox .andere { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,253,248,.12); display: flex; gap: 10px; }
.v2-kaufbox .andere a { flex: 1; text-align: center; font-size: 13.5px; color: #DAD6CC; text-decoration: none; border: 1px solid rgba(255,253,248,.2); border-radius: 12px; padding: 10px 6px; }
.v2-kaufbox .andere a:hover { background: rgba(255,253,248,.08); }
.v2-nummeriert { max-width: 860px; margin: 0 auto; padding: 30px var(--rand) var(--luft); }
.v2-nummeriert .block { border-top: 1px solid rgba(255,253,248,.14); padding: 34px 0; }
.v2-nummeriert .nr { font-family: var(--display); color: #E4B84C; font-weight: 800; letter-spacing: .12em; font-size: 13px; }
.v2-nummeriert h2 { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 32px); margin: 8px 0 12px; }
.v2-nummeriert .inci { font-size: 13.5px; color: #9A968C; line-height: 1.8; word-break: break-word; }
.v2-icons { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.v2-icons figure { margin: 0; text-align: center; width: 108px; }
.v2-icons img { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.v2-icons figcaption { font-size: 12.5px; color: #B9B5AB; margin-top: 6px; }

/* ── Community + Login Unterseiten ──────────────────────────────────── */
.v2-blatt { min-height: 100svh; display: grid; place-items: center; padding: 120px var(--rand) 80px; overflow: clip; }
.v2-blatt .innen { width: min(680px, 100%); }
.v2-blatt h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.4vw, 52px); margin: 0 0 8px; }
.v2-blatt .frage { color: #B9B5AB; margin: 0 0 26px; }
.v2-blatt textarea { width: 100%; min-height: 190px; border-radius: 16px; border: 1px solid rgba(255,253,248,.25);
  background: rgba(255,253,248,.05); color: var(--kalkweiss); padding: 18px; font-family: var(--text); font-size: 16px; resize: vertical; outline: none; }
.v2-blatt textarea:focus { border-color: rgba(255,253,248,.6); }
.v2-blatt .senden { margin-top: 18px; }
.v2-blatt .danke { display: none; background: rgba(228,184,76,.14); border: 1px solid rgba(228,184,76,.4); border-radius: 14px; padding: 18px; margin-top: 18px; }
.v2-blatt .danke.da { display: block; }

/* Fußzeile mit Rechtlichem */
.v2-fuss-recht { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 18px; }
.v2-fuss-recht a { color: #9A968C; font-size: 13px; text-decoration: none; }
.v2-fuss-recht a:hover { color: var(--kalkweiss); }

@media (prefers-reduced-motion: reduce) {
  .v2-sorte, .v2-impact .flasche, .v2-impact .seifenkasten { transition: none; }
  .v2-sorte img.still { transition: none; }
  /* Ohne Bewegung stehen alle sechs Flaschen sofort an ihrem Platz. */
  .v2-impact.da .flasche,
  .v2-impact .flasche.erste,
  .v2-impact .flasche:not(.erste) { opacity: 1; transform: none; }
}

/* 🔴 GEMESSEN 27.08.2026: In WebKit bricht auch overflow-x:CLIP am html
   die Sticky-Pins (Sortenwelt-Pin stand bei -610/-1420 statt 0).
   Deshalb bleibt html unangetastet. Die Wisch-Sicherheit kommt daher, dass
   JEDE Sektion sich selbst mit overflow:clip abdichtet — Endprüfung misst
   scrollWidth == Schirmbreite an 12 Positionen. */

/* ── Sortenkopf in der Kaufbox: Wort + Klotz (Ramon 31.08.) ─────────── */
.v2-kaufbox .sortenkopf { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
.v2-kaufbox .sortenkopf h1 { margin: 0; }
.v2-kaufbox .sortenkopf .klotz {
  width: 74px; height: 60px; flex: 0 0 auto; object-fit: cover;
  border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
@media (max-width: 560px) { .v2-kaufbox .sortenkopf .klotz { width: 58px; height: 48px; } }

/* ── Kino-Fahrt am Handy (Ramon 31.08., Abschluss) ───────────────────────
   "Keine Seite verloren — von der linken bis zur rechten Kante, und mittig."
   js-kino.js malt mit cover, also formatfüllend MIT Beschnitt. Bei einem
   hochkanten Bild im Handyfenster gingen dadurch links und rechts je rund
   4 % weg. Deshalb bekommt die Lage am Handy exakt das Seitenverhältnis der
   Handy-Frames (900 × 566 → 62,92vw): dann füllt cover die Zone GENAU aus,
   nichts wird abgeschnitten, und die Zone sitzt mittig im Fenster. */
@media (max-width: 899px) {
  .js-buehne .lagen { display: grid; place-items: center; }
  .js-buehne .lage {
    /* alle drei Lagen in DIESELBE Rasterzelle — sonst stapeln sie sich
       untereinander und die erste klebt oben (gemessen: 17 px oben,
       559 px unten). So liegen sie übereinander und sitzen mittig. */
    position: relative; inset: auto; grid-area: 1 / 1;
    /* 🔴 Die Höhe MUSS zum Seitenverhältnis der Handy-Frames passen, sonst
       schneidet die cover-Logik ab oder die Fläche bleibt leer. Die
       Wasseranimation liefert 900 × 1800 (Verhältnis 0,5) → 200vw, begrenzt
       auf die Fensterhöhe. Bei einem Wechsel des Frame-Satzes hier mitziehen! */
    width: 100%; height: min(200vw, 100svh);
  }
  .js-buehne .lage canvas { width: 100%; height: 100%; }
}

/* ── „Mehr Seife fürs Geld" (Kunde 01.09.) ───────────────────────────────
   Die Maßlinie läuft DIAGONAL von unten links nach oben rechts durch das
   große Viereck, die „+50 %" stehen NEBEN dem Viereck. */
.v2-impact .seifenwuchs { position: relative; width: 250px; max-width: 100%; height: 180px; margin: 20px 0 12px; }
.v2-impact .seifenwuchs .klein,
.v2-impact .seifenwuchs .gross {
  position: absolute; left: 0; bottom: 0;
  border: 2.5px solid var(--tinte); border-radius: 10px;
}
.v2-impact .seifenwuchs .klein { width: 120px; height: 120px; border-style: dashed; opacity: .42; }
.v2-impact .seifenwuchs .gross {
  width: 180px; height: 180px; overflow: hidden;
  transform: scale(var(--gr, .667)); transform-origin: left bottom;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.v2-impact.da .seifenwuchs .gross { --gr: 1; }
/* die diagonale Maßlinie: unten links → oben rechts */
.v2-impact .seifenwuchs .masspfeil { position: absolute; inset: 0; opacity: .9; }
/* Ramon 01.09.: „der Pfeil soll sich von unten links nach oben entwickeln" —
   die Linie WÄCHST also aus der unteren linken Ecke heraus (scaleX von 0 auf 1
   entlang der gedrehten Achse), statt einfach einzublenden. Und deutlich
   langsamer: 3,4 s statt 0,4 s. */
.v2-impact .seifenwuchs .masspfeil i {
  position: absolute; left: 12px; bottom: 12px;
  width: calc(1.414 * (180px - 24px)); height: 2px; background: var(--tinte);
  transform-origin: left center;
  transform: rotate(-45deg) scaleX(0);
  transition: transform 3.4s cubic-bezier(.25,.6,.3,1) 1.1s;
}
.v2-impact.da .seifenwuchs .masspfeil i { transform: rotate(-45deg) scaleX(1); }
.v2-impact .seifenwuchs .masspfeil i::before,
.v2-impact .seifenwuchs .masspfeil i::after {
  content: ""; position: absolute; top: -4px; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.v2-impact .seifenwuchs .masspfeil i::before,
.v2-impact .seifenwuchs .masspfeil i::after { opacity: 0; transition: opacity .6s ease; }
.v2-impact.da .seifenwuchs .masspfeil i::before { opacity: 1; transition-delay: 1.4s; }
.v2-impact.da .seifenwuchs .masspfeil i::after  { opacity: 1; transition-delay: 4.3s; }
/* Die Spitzen sitzen an den Enden der Linie und werden von deren scaleX
   mitgestaucht — deshalb gegenskalieren, sonst werden sie zu Strichen. */
.v2-impact .seifenwuchs .masspfeil i::before { left: -1px; border-right: 9px solid var(--tinte); }
.v2-impact .seifenwuchs .masspfeil i::after  { right: -1px; border-left: 9px solid var(--tinte); }
/* Beschriftungen */
.v2-impact .seifenwuchs .wert {
  position: absolute; font-family: var(--display); font-weight: 800;
  font-size: 13px; letter-spacing: .04em;
}
.v2-impact .seifenwuchs .klein .wert { left: 50%; translate: -50% 0; bottom: 8px; font-size: 11.5px; opacity: .75; }
.v2-impact .seifenwuchs .gross .wert { left: 50%; translate: -50% 0; bottom: 10px; }
/* die +50 % stehen NEBEN dem Viereck (Kunde 01.09.) */
.v2-impact .seifenwuchs .plus {
  position: absolute; left: 196px; top: 50%; translate: 0 -50%;
  font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4vw, 38px);
  line-height: 1; opacity: 0; transition: opacity .5s ease .7s; white-space: nowrap;
}
.v2-impact.da .seifenwuchs .plus { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .v2-impact .seifenwuchs .gross { transition: none; --gr: 1; }
  .v2-impact .seifenwuchs .masspfeil,
  .v2-impact .seifenwuchs .plus { transition: none; opacity: 1; }
}

/* ── Knopf mit Logo (Kunde 01.09.) ───────────────────────────────────── */
.v2-knopf.mitlogo { display: inline-flex; align-items: center; gap: 12px; }
.v2-knopf.mitlogo img { height: 22px; width: auto; display: block; }
.v2-kopf .v2-knopf.mitlogo img,
.v2-menue .v2-knopf.mitlogo img { height: 18px; }

/* Die Kaufbox als Fenster über dem Video (Kunde 01.09.) */
.v2-produkt .oben .v2-kaufbox {
  /* liegt in derselben Rasterzelle wie das Video und schwebt darueber */
  grid-area: 1 / 1; justify-self: end; align-self: center;
  margin-right: clamp(16px, 4vw, 56px);
  width: min(400px, 42vw); z-index: 3;
  /* Kunde 01.09.: „Liquid Glass" — das Fenster ist stark durchsichtig, damit
     die Animation dahinter zu sehen bleibt. Nur am Rechner; am Handy steht
     die Box unter dem Video und braucht das nicht. */
  /* Gemessen: bei 26 % Deckkraft sank der Kontrast der Grundpreis-Zeile über
     der hellen Sakura-Szene auf 1,07:1 — die PAngV-Pflichtangabe war faktisch
     unsichtbar. Jetzt bleibt der Glaseffekt, bekommt aber einen dunklen
     Verlauf, der von oben nach unten trägt. */
  background:
    linear-gradient(180deg, rgba(8,12,10,.30) 0%, rgba(8,12,10,.62) 100%),
    color-mix(in oklab, var(--tief) 30%, transparent);
  backdrop-filter: blur(24px) saturate(1.2) brightness(.72);
  -webkit-backdrop-filter: blur(24px) saturate(1.2) brightness(.72);
  border: 1px solid rgba(255,253,248,.24); border-radius: 22px;
  padding: clamp(18px, 2vw, 28px);
  box-shadow: 0 30px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow: 0 1px 14px rgba(0,0,0,.7);
}
.v2-produkt .oben .v2-kaufbox .grundpreis,
.v2-produkt .oben .v2-kaufbox .duft,
.v2-produkt .oben .v2-kaufbox .klein { color: #F4F1EA; }
/* Die Grundpreis-Zeile ist eine PAngV-Pflichtangabe — sie bekommt zusätzlich
   einen eigenen Schatten, damit sie auch über hellen Videobildern trägt. */
.v2-produkt .oben .v2-kaufbox .grundpreis {
  color: #F6F3ED; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.8); }

@media (max-width: 900px) {
  /* Ramon 01.09.: am Handy liegt die Kaufbox NICHT über dem Video — sonst
     sieht man die Animation kaum. Sie steht darunter, das Video bleibt frei. */
  .v2-produkt .oben .v2-kaufbox {
    position: static; translate: 0 0; width: auto; margin: 0 12px;
    border-radius: 18px; padding: 18px;
    /* Am Handy steht die Box unter dem Video — dort braucht es weder
       Durchsicht noch Glaseffekt (Kundenwunsch), also volle Deckung. */
    background: var(--tief);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    text-shadow: none;
  }
  .v2-produkt .oben .v2-kaufbox .sortenkopf .klotz { width: 46px; height: 40px; }
  .v2-produkt .oben .v2-kaufbox h1 { font-size: clamp(22px, 6vw, 30px); }
  .v2-produkt .oben .v2-kaufbox .duft { display: none; }
}

/* ── Echte Amazon-Bewertungen (Kunde 01.09.) ────────────────────────── */
.v2-stimmen .gesamtnote { text-align: center; color: #E4B84C; font-family: var(--display);
  font-weight: 800; font-size: 15px; margin: -6px 0 26px; letter-spacing: .04em; }
.v2-stimme .titel { font-family: var(--display); font-weight: 800; font-size: 15px; margin: 0 0 8px; }
.v2-stimmen .quellzeile { text-align: center; font-size: 12px; color: #8A857B; margin-top: 22px; }


/* ── Nachbesserungen nach der Agentenprüfung (01.09.) ─────────────────── */
/* Die vier Zutaten-Blöcke klebten aneinander (gemessen: 0 px Abstand,
   Glyphen berührten sich, weil .mittel line-height .95 hat). */
.v2-produkt .strang .beat { margin-bottom: 26px; }
.v2-produkt .strang .beat:last-child { margin-bottom: 0; }
.v2-produkt .strang .mittel { line-height: 1.12; margin-bottom: 6px; }

/* Die goldene Gesamtnote saß auf den Unterlängen der Überschrift (6 px). */
.v2-stimmen .gesamtnote { margin-top: 10px; }
.v2-stimmen h3.mittel { line-height: 1.12; }

/* „~100 g" und „150 g" überlappten sich um 9 px — der kleine Wert wandert
   unter das kleine Viereck, der große bleibt im großen. */
.v2-impact .seifenwuchs .klein .wert { left: 0; translate: 0 0; bottom: -22px; }
.v2-impact .seifenwuchs .gross .wert { left: auto; right: 12px; translate: 0 0; bottom: 10px; }
.v2-impact .seifenwuchs { margin-bottom: 34px; }

/* Der Duft-Hinweis ist bei Sakura eine Pflicht-Formulierung („inspiriert von
   der japanischen Kirschblüte") — er darf am Handy NICHT ausgeblendet werden. */
@media (max-width: 900px) {
  .v2-produkt .oben .v2-kaufbox .duft { display: block; font-size: 14px; margin: 4px 0 10px; }
}


/* ── Tafeln der Scroll-Fahrt lesbar halten (Agentenbefund 01.09.) ────────
   Über der hellen Sakura-Szene sank der Kontrast auf 1,57:1. Ein weicher
   Abdunkler am unteren Rand trägt die Schrift, ohne das Bild zuzudecken. */
.js-buehne .klebt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, rgba(6,10,8,0) 0%, rgba(6,10,8,.72) 78%, rgba(6,10,8,.86) 100%);
  pointer-events: none; z-index: 1;
}
/* 🔴 NUR z-index setzen. `position: relative` hier hat die Tafeln aus dem
   Bild geschoben (gemessen: y = −149 bis −212 px), weil sie in js-seite.css
   absolut positioniert sind und `bottom` dann nicht mehr verankert, sondern
   verschiebt. Die Positionierung bleibt unangetastet. */
.js-buehne .tafelsatz, .js-buehne .sortenname, .js-buehne .zeichen { z-index: 2; }
.js-buehne .tafel b, .js-buehne .tafel span, .js-buehne .sortenname {
  text-shadow: 0 2px 16px rgba(0,0,0,.85); }


/* ── Bildausschnitt je Sorte (Kunde 01.09.) ─────────────────────────────
   „Die Seife 20–30 % nach links, damit man die Animation rechts sieht."
   Am Rechner: leicht vergrößern und verschieben. Am Handy zusätzlich flacher,
   damit weniger seitlich beschnitten wird („bisschen herauszoomen"). */
.v2-produkt .kino video { transform: scale(var(--zoom, 1)) translate(var(--links, 0), var(--oben, 0)); }
/* 🔴 Der Zoom MUSS zur Verschiebung passen: die rechte Videokante liegt bei
   (0.5 + links) * zoom und muss >= 0.5 bleiben, sonst klafft rechts eine
   leere Fläche (gemessen: Ocean 41,5 px, Sakura 12,4 px bei 1440).
   Faustregel: zoom >= 0.5 / (0.5 + links), plus etwas Reserve. */
/* 🔴 Sakura: Ramon 01.09. — „das blaue Pulver ist hier fehl am Platz".
   Es liegt im Quellvideo bei y 74–92 %. Stärkerer Zoom plus Verschiebung nach
   unten schneidet es weg; sichtbar bleibt y 9–73 %. Die Rechnung für die
   rechte Kante gilt weiter: (0.5 + links) * zoom >= 0.5. */
body.welt-sakura-spirit .v2-produkt .kino video { --zoom: 1.58; --links: -9%; --oben: 9%; }
/* Ramon 01.09.: der neue 2-Sekunden-Film ist schon 16:9 und randvoll
   komponiert — jeder Zoom wuerde die Explosion anschneiden. */
body.welt-ocean-drive   .v2-produkt .kino video { --zoom: 1; --links: 0%; }
body.welt-black-forest  .v2-produkt .kino video { --zoom: 1.17; --links: -6%; }

@media (max-width: 900px) {
  /* flacher = weniger seitlicher Beschnitt = mehr vom Bild zu sehen */
  .v2-produkt .kino { height: 58svh; }
  /* 🔴 Am Handy steht ein Querformat-Video in einer hochkanten Fläche: bei
     `cover` wird nur SEITLICH beschnitten, vertikal ist kein Spielraum —
     `object-position` kann dort also nichts nach oben schieben. Damit das
     blaue Pulver bei Sakura (y 74–92 % der Quelle) verschwindet, braucht es
     echten Zoom plus Verschiebung, genau wie am Rechner. */
  .v2-produkt .kino video {
    object-position: var(--ausschnitt, 50%) center;
    transform: scale(var(--hzoom, 1)) translateY(var(--hoben, 0));
  }
  body.welt-sakura-spirit .v2-produkt .kino video { --ausschnitt: 62%; --hzoom: 1.5; --hoben: 10%; }
  /* am Handy etwas weiter nach links, damit die Seife mit im Bild bleibt */
  body.welt-ocean-drive   .v2-produkt .kino video { --ausschnitt: 56%; }
  body.welt-black-forest  .v2-produkt .kino video { --ausschnitt: 62%; }
}

/* Kunde 01.09.: die Kaufbox soll noch durchsichtiger sein. */
.v2-produkt .oben .v2-kaufbox {
  background:
    linear-gradient(180deg, rgba(8,12,10,.20) 0%, rgba(8,12,10,.42) 52%, rgba(8,12,10,.60) 100%),
    color-mix(in oklab, var(--tief) 18%, transparent);
  backdrop-filter: blur(20px) saturate(1.2) brightness(.78);
  -webkit-backdrop-filter: blur(20px) saturate(1.2) brightness(.78);
}


/* ── Name und Knopf erst nach dem Aufklappen (Ramon 01.09.) ───────────── */
.v2-sorte .name, .v2-sorte .kaufen {
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.v2-sorten.offen .v2-sorte .name,
.v2-sorten.offen .v2-sorte .kaufen { opacity: 1; transform: none; pointer-events: auto; }
.v2-sorten.offen .v2-sorte .kaufen { transition-delay: .12s; }

/* ── „Mehr Seife fürs Geld": langsamer und lesbar (Ramon 01.09.) ──────── */
/* Vorher 0,9 s — die Animation war vorbei, bevor man hinsah. */
.v2-impact .seifenwuchs .gross { transition: transform 4.6s cubic-bezier(.22,.68,.24,1) .3s; }

.v2-impact .seifenwuchs .plus { transition: opacity 1.1s ease 4.9s; }
/* Das kleine Viereck und seine Beschriftung waren kaum zu sehen. */
.v2-impact .seifenwuchs .klein { opacity: .62; border-width: 2px; }
.v2-impact .seifenwuchs .klein .wert { color: var(--tinte); opacity: .72; font-size: 12.5px; }


/* ── Made-in-Germany-Siegel behält seine Farbe (Ramon 01.09.) ─────────────
   Die Siegel sind weiß auf Transparenz und werden per invert-Filter dunkel
   gemacht (js-seite.css:502). Diese eine Datei ist bereits fertig eingefärbt
   — Ring dunkel, Flagge in Schwarz-Rot-Gold — und darf den Filter nicht
   abbekommen, sonst wird die Flagge wieder grau. */
.js-siegel .reihe img[src*="Made-in-Germany-Farbe"] { filter: none; }

/* Auch die helle Fassung (weißer Ring, farbige Flagge) darf nicht entfärbt
   werden — sie steht auf den dunklen Produktseiten. */
.v2-icons img[src*="Made-in-Germany-Farbe"] { filter: none; }

/* ── Bildergalerie (Ramon 02.09.2026) ──────────────────────────────────────
   Die echten Amazon-Bilder. Der Streifen erscheint, wenn der Film oben
   durchgelaufen ist (Klasse `da` kommt aus dem JS). Klick oeffnet die
   Grossansicht, dort blaettert man links/rechts. */
.js-galerie {
  /* 🔴 width:100% ist Pflicht, nicht Kosmetik: ohne sie rechnet sich der
     Bildstreifen auf seine Inhaltsbreite (948 px) auf, überläuft die
     Rasterspalte und ist dann NICHT MEHR SCROLLBAR — scrollWidth = clientWidth,
     also greift overflow-x nie. Am Handy waren dadurch 5 von 8 Bildern
     unerreichbar und wurden nie geladen. */
  width: 100%; max-width: min(1240px, 100%); margin: 0 auto; padding: 8px 20px 46px;
  box-sizing: border-box;
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.25,.7,.3,1);
}
.js-galerie.da { opacity: 1; transform: none; }
.js-galerie .streifen {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px;
  width: 100%; max-width: 100%; min-width: 0;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.js-galerie .mini {
  flex: 0 0 auto; width: 132px; height: 132px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.04); scroll-snap-align: start;
  transition: transform .28s cubic-bezier(.25,.7,.3,1), border-color .28s ease;
}
.js-galerie .mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.js-galerie .mini:hover, .js-galerie .mini:focus-visible {
  transform: translateY(-3px) scale(1.03); border-color: #E4B84C; outline: none;
}

/* Grossansicht */
.js-lupe {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-columns: 64px 1fr 64px; align-items: center;
  background: rgba(8,10,10,.94);
  opacity: 0; transition: opacity .26s ease;
}
/* 🔴 `hidden` allein reicht NICHT: die eigene `display`-Angabe oben schlaegt
   die Browser-Regel fuer [hidden]. Ohne diese Zeile liegt die Grossansicht
   unsichtbar ueber der Seite und faengt jeden Klick ab. */
.js-lupe[hidden] { display: none; }
.js-lupe.offen { opacity: 1; }
.js-lupe figure { grid-column: 2; margin: 0; display: grid; justify-items: center; gap: 14px; }
.js-lupe img {
  max-width: min(92vw, 860px); max-height: 74vh; width: auto; height: auto;
  border-radius: 14px; background: #fff;
}
.js-lupe figcaption {
  color: #E8E4DA; font-size: 14.5px; text-align: center; max-width: 620px;
  line-height: 1.45; padding: 0 10px;
}
/* Dunkel gefuellt, NICHT durchscheinend: am Handy liegen die Pfeile ueber dem
   Bild, und mehrere Bilder haben weissen Grund — hell auf hell waere blind. */
.js-lupe .blaettern {
  width: 52px; height: 52px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.3); background: rgba(16,19,19,.72);
  color: #fff; font-size: 30px; line-height: 1; justify-self: center;
  display: grid; place-items: center; transition: background .2s ease;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.js-lupe .blaettern:hover { background: rgba(16,19,19,.92); }
.js-lupe .zurueck { grid-column: 1; }
.js-lupe .vor { grid-column: 3; }
.js-lupe .zu {
  position: absolute; top: 18px; right: 20px; width: 44px; height: 44px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(16,19,19,.72); color: #fff; font-size: 26px; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.js-lupe .zaehler {
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  color: #B9B5AB; font-size: 13px; margin: 0;
}

@media (max-width: 860px) {
  .js-galerie { padding: 4px 16px 36px; }
  .js-galerie .mini { width: 108px; height: 108px; }
  /* Am Handy nehmen die Pfeile zu viel Platz — dort wird gewischt, und die
     Pfeile liegen ueber dem Bild statt daneben. */
  .js-lupe { grid-template-columns: 1fr; }
  .js-lupe figure { grid-column: 1; }
  .js-lupe img { max-width: 94vw; max-height: 66vh; }
  .js-lupe .blaettern { position: absolute; top: 50%; margin-top: -26px; }
  .js-lupe .zurueck { left: 10px; grid-column: 1; }
  .js-lupe .vor { right: 10px; grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js-galerie { transition: none; opacity: 1; transform: none; }
  .js-galerie .mini { transition: none; }
}

/* ── Sparpakete (Ramon 02.09.2026) ─────────────────────────────────────────
   Die Pakete, die der Kunde auf Amazon wirklich verkauft. Der Grundpreis
   steht an jedem Preis — das verlangt sein eigenes Briefing. */
.js-pakete { max-width: 1240px; margin: 0 auto; padding: 6px 20px 54px; }
.js-pakete h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 22px; color: var(--kalkweiss);
}
.js-pakete .paket {
  display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: center;
  padding: 18px; margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 16px;
  background: rgba(255,255,255,.045);
}
.js-pakete .paket img {
  width: 190px; height: 190px; object-fit: cover; border-radius: 12px; background: #fff;
}
.js-pakete .paket h3 {
  font-family: var(--display); font-weight: 800; font-size: 21px; margin: 0 0 6px;
  color: var(--kalkweiss);
}
.js-pakete .paket .lauf { margin: 0 0 12px; color: #C9C5BB; font-size: 15px; line-height: 1.5; }
.js-pakete .preiszeile {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 4px;
}
.js-pakete .preiszeile b { font-family: var(--display); font-weight: 800; font-size: 27px; color: #fff; }
.js-pakete .preiszeile s { color: #9A968D; font-size: 16px; }
.js-pakete .spart {
  font-size: 13px; font-weight: 700; color: #0F1512; background: #E4B84C;
  padding: 3px 10px; border-radius: 999px;
}
/* Pflichtangabe — heller als der Fliesstext, damit sie sicher lesbar bleibt */
.js-pakete .grundpreis { color: #B9B5AB; font-size: 13px; margin: 0 0 14px; }
.js-pakete .paket .v2-knopf { display: inline-block; }

@media (max-width: 720px) {
  .js-pakete { padding: 4px 16px 40px; }
  .js-pakete .paket { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .js-pakete .paket img { width: 100%; height: auto; aspect-ratio: 1; }
  .js-pakete .paket .v2-knopf { width: 100%; text-align: center; }
}

/* ── Angebotspreis (Ramon 02.09.2026) ──────────────────────────────────────
   Genau wie bei Amazon: laufender Preis gross, UVP durchgestrichen daneben,
   Nachlass als Plakette. */
.v2-produkt .preis.imangebot {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.v2-produkt .preis b { font: inherit; }
.v2-produkt .preis.imangebot s { font-size: .58em; color: #9A968D; font-weight: 500; }
.v2-produkt .preis.imangebot .minus {
  font-size: .34em; font-weight: 800; letter-spacing: .02em;
  color: #0F1512; background: #E4B84C; padding: 5px 11px; border-radius: 999px;
  position: relative; top: -.28em;
}
/* Grundpreis unter dem Kaufknopf der Sortenwelt — Pflichtangabe bei JEDER
   Produktangabe (Briefing Zeile 351), nicht nur auf den Produktseiten. */
.v2-sorte .preisfuss {
  margin: 8px 0 0; font-size: 12.5px; color: #CFCBC2; text-align: center;
  opacity: 0; transition: opacity .45s ease .1s;
}
.v2-sorten.offen .v2-sorte .preisfuss { opacity: 1; }

/* ══ Kundendokument 02.09.2026 — Punkte 3, 6, 9, 14 ══════════════════════ */

/* Punkt 14: Burger-Menü linksbündig statt mittig */
.v2-menue { place-items: center start; }
.v2-menue nav { text-align: left; justify-items: start; padding-left: clamp(24px, 8vw, 90px); }

/* Punkt 6: Die Zahlenblöcke sind unterschiedlich hoch — bündig ausrichten.
   Jede Spalte wird ein Raster mit festen Zeilen, dann stehen Überschrift,
   Zahl, Einheit und Fußnote in allen Spalten auf derselben Linie. */
.v2-impact .spalten { align-items: stretch; }
.v2-impact .spalten > div {
  display: grid; grid-template-rows: auto auto auto 1fr; align-content: start;
}
.v2-impact .spalten > div > h3 { align-self: start; }
.v2-impact .spalten > div > .fussnote { align-self: start; }

/* Punkt 3: Am Handy stehen Name, Preis und Grundpreis mittig unter dem
   runden Bild — vorher waren sie linksbündig und wirkten verrutscht. */
@media (max-width: 900px) {
  .v2-sorte { text-align: center; }
  .v2-sorte .name { text-align: center; }
  .v2-sorte .kaufen { margin-left: auto; margin-right: auto; }
  .v2-sorte .preisfuss { text-align: center; }
}

/* Punkt 9: Das Produktvideo war am Handy zu stark beschnitten — man sah nur
   einen Ausschnitt. Der Rahmen bekommt jetzt das Format des Videos, damit es
   vollständig und mittig zu sehen ist, ohne leere Ränder. */
@media (max-width: 900px) {
  .v2-produkt .kino { aspect-ratio: 16 / 9; height: auto; }
  .v2-produkt .kino video {
    object-fit: contain; object-position: center center;
    transform: none;
  }
}

/* Ramon 03.09.: Beim Sprung zur Produktwelt verschwand die Überschrift halb
   unter der festen Kopfzeile. */
#produktwelt { scroll-margin-top: 92px; }
.v2-sorten .klebt > h2 { padding-top: 18px; }

/* ══ Kundendokument 02.09.2026 — Struktur Version 2 ══════════════════════ */

/* Discovery Set als vierte Kachel: gleiche Größe wie die Einzelprodukte,
   nur mit Badge. Ausdrücklich NICHT dominanter (Dokument, Abschnitt 3). */
.v2-sorte.istset .fenster { position: relative; display: block; cursor: default; }
.v2-sorte.istset .badge {
  position: absolute; top: 6px; left: 50%; translate: -50% 0; z-index: 2;
  background: #E4B84C; color: #12180F; font-size: 11.5px; font-weight: 800;
  letter-spacing: .03em; padding: 4px 11px; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
/* Ramon 03.09.: die Set-Kachel soll aussehen wie die drei daneben —
   freigestellte Seifen, kein runder Beschnitt, nichts gestaucht. */

/* Zweiter, leiser Weg im Hero — für Unentschlossene (Dokument, 3a) */
.v2-leiser {
  display: inline-block; margin-top: 14px; color: #E8E4DA;
  font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(232,228,218,.5);
  padding-bottom: 2px; transition: color .2s ease, border-color .2s ease;
}
.v2-leiser:hover { color: #E4B84C; border-color: #E4B84C; }

/* Die drei wichtigsten Siegel zuerst und etwas größer */
.js-siegel .reihe figure.wichtig img { transform: scale(1.12); }

/* Vier Kacheln seit 03.09. (Discovery Set): am Rechner muessen sie schmaler
   sein, sonst ragen die aeusseren aus dem Bild. Gerechnet: Buehne 96vw,
   vier Karten plus drei Luecken -> je knapp ein Viertel. */
@media (min-width: 900px) {
  .v2-sorte { --breite: min(23vw, 336px); }
}

/* Am Handy stehen die vier Kacheln uebereinander. Mit der alten Breite waren
   sie zusammen hoeher als der Bildschirm und ueberlappten sich — deshalb
   etwas schmaler, damit alle vier frei stehen. */
@media (max-width: 899px) {
  .v2-sorte { --breite: min(72vw, 330px); }
}

/* Bundle-Auswahl direkt in der Kaufbox (Dokument 02.09., Abschnitt 4) */
.bundlewahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 16px; }
.bundlewahl .wahl {
  position: relative; display: grid; gap: 2px; padding: 10px 8px; cursor: pointer;
  border: 1px solid rgba(255,253,248,.22); border-radius: 12px; text-align: center;
  transition: border-color .2s ease, background .2s ease;
}
.bundlewahl .wahl input { position: absolute; opacity: 0; pointer-events: none; }
.bundlewahl .wahl b { font-size: 13.5px; font-weight: 800; }
.bundlewahl .wahl span { font-size: 13px; color: #B9B5AB; }
.bundlewahl .wahl:hover { border-color: rgba(228,184,76,.6); }
.bundlewahl .wahl.gewaehlt { border-color: #E4B84C; background: rgba(228,184,76,.12); }
.bundlewahl .wahl.gewaehlt span { color: #E4B84C; }
.bundlewahl .wahl input:focus-visible + b { outline: 2px solid #E4B84C; outline-offset: 3px; }

/* Hinweis im Warenkorb, wenn ein Einzelstück drin liegt (Abschnitt 3) */
.v2-korb .upsell {
  display: grid; gap: 8px; margin: 4px 0 14px; padding: 12px 14px;
  border: 1px dashed rgba(228,184,76,.55); border-radius: 12px;
  background: rgba(228,184,76,.07);
}
.v2-korb .upsell p { margin: 0; font-size: 13.5px; color: #4A463E; line-height: 1.45; }
.v2-korb .upsell button {
  justify-self: start; border: 1px solid #E4B84C; background: #E4B84C; color: #12180F;
  font-weight: 800; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.v2-korb .upsell button:hover { filter: brightness(1.06); }

/* 🔴 Ramon 03.09.: Das Dermatest-Siegel war ein dunkler Fleck — es lief durch
   denselben Filter wie die Strichzeichnungen (`invert(1) brightness(.15)`) und
   verlor dabei Farbe und Schrift. Ein Prüfsiegel darf ohnehin nicht umgefärbt
   werden, es bleibt im Original. Gleiche Falle wie bei der Deutschland-Flagge. */
.js-siegel figure img[src*="Dermatest"],
.v2-icons figure img[src*="Dermatest"] { filter: none; }

/* Am Handy steht die Kaufbox unter der Galerie und nutzt die volle Breite —
   `justify-self: end` aus der Rechner-Regel muss dort weg. */
@media (max-width: 900px) {
  .v2-produkt .oben .v2-kaufbox {
    grid-area: auto; justify-self: stretch; align-self: auto;
    margin-right: 0; width: auto;
  }
}

/* ── Nachbesserungen 03.09. (Prüfagent) ─────────────────────────────────── */

/* Punkt 3 richtig: am Handy stand die Beschriftung NEBEN dem Bild (zweispaltig)
   und war deshalb nie mittig darunter. Jetzt untereinander und zentriert, so
   wie der Kunde es beschrieben hat. */
@media (max-width: 899px) {
  .v2-sorte {
    display: grid; grid-template-columns: 1fr; justify-items: center;
    gap: 6px; text-align: center;
  }
  .v2-sorte .fenster { width: 100%; }
  .v2-sorte .name { align-self: auto; margin: 6px 0 2px; }
  .v2-sorte .kaufen { width: auto; }
  /* Der Preis gehoert am Handy sichtbar an den Knopf (war ausgeblendet) */
  /* Der Preis MUSS am Knopf stehen — die alte Regel oben blendet ihn aus
     und ist spezifischer, deshalb hier mit derselben Tiefe. */
  .v2-sorte .kaufen .preis-im-knopf { display: inline; }
}

/* Punkt 6 richtig: die drei Zahlenblöcke teilen sich jetzt EIN Raster, dadurch
   stehen Überschrift, Zahl, Einheit und Fußnote in allen Spalten auf derselben
   Linie. Vorher hatte jede Spalte ihr eigenes Raster — die Fußnoten lagen
   211 px auseinander. */
@media (min-width: 760px) {
  .v2-impact .spalten { grid-template-rows: repeat(4, auto); }
  .v2-impact .spalten > div {
    grid-row: span 4; grid-template-rows: subgrid; gap: 0;
  }
  /* Die mittlere Spalte hat keine Einheiten-Zeile — ohne feste Zuweisung
     rutscht ihre Fußnote eine Zeile hoch. */
  .v2-impact .spalten > div > h3 { grid-row: 1; }
  .v2-impact .spalten > div > .fussnote { grid-row: 4; }
}

/* Punkt 10: am Rechner schwebt die Kaufbox über dem Video und verdeckte den
   rechten Teil des Bildstreifens. Die Galerie hält jetzt Abstand. */
@media (min-width: 901px) {
  /* 🔴 Der feste Abstand von 476 px schnitt bei breiten Fenstern drei der acht
     Bilder ab — sie waren nicht einmal anklickbar. Der Platz muss genau so
     groß sein wie die schwebende Kaufbox, nicht größer: dieselbe Formel wie
     dort (Breite + rechter Abstand). */
  .v2-produkt .js-galerie {
    padding-right: calc(min(400px, 42vw) + clamp(16px, 4vw, 56px) + 16px);
  }
  /* Sichtbarer Hinweis, dass der Streifen weitergeht */
  .v2-produkt .js-galerie .streifen { scrollbar-width: thin; padding-bottom: 14px; }
  .v2-produkt .js-galerie .streifen::-webkit-scrollbar { height: 6px; }
  .v2-produkt .js-galerie .streifen::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.28); border-radius: 999px; }
  .v2-produkt .js-galerie .streifen::-webkit-scrollbar-track { background: rgba(255,255,255,.07); border-radius: 999px; }
}

/* ══ Handy: aus einem Stapel werden vier (Ramon 04.09.) ══════════════════
   Gewünscht: oben liegt EINE Seife (das Discovery Set), und beim Scrollen
   verteilt sie sich in vier Kacheln. Kein Verblassen, kein Größerwerden —
   nur Bewegung, wie am Rechner auch.

   Warum ein 2×2-Raster und nicht vier untereinander: seit die Beschriftung
   unter dem Bild steht, ist eine Karte 400 px hoch. Vier davon brauchen
   1600 px, ein Handy hat 844 — sie überlappten sich um bis zu 368 px und die
   Seifen waren nicht mehr ganz zu sehen. */
@media (max-width: 899px) {
  .v2-sorten .buehne {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px 12px; align-content: center;
    width: 94vw; height: auto; min-height: 100svh;
    padding: 8px 0 20px;
  }
  .v2-sorte {
    position: static; left: auto; top: auto; translate: none;
    width: auto; --breite: auto; opacity: 1;
    /* --stapel-x/-y zeigen von der Rasterzelle zur Bühnenmitte. Bei k=0 liegen
       alle vier dort übereinander, bei k=1 sitzt jede an ihrem Platz. */
    transform: translate(
      calc((1 - var(--k, 0)) * var(--stapel-x, 0px)),
      calc((1 - var(--k, 0)) * var(--stapel-y, 0px)));
    transition: none;
  }
  .v2-sorte:nth-child(1) { --stapel-x: calc(50% + 6px);  --stapel-y: calc(50% + 6px); z-index: 1; }
  .v2-sorte:nth-child(2) { --stapel-x: calc(-50% - 6px); --stapel-y: calc(50% + 6px); z-index: 2; }
  .v2-sorte:nth-child(3) { --stapel-x: calc(50% + 6px);  --stapel-y: calc(-50% - 6px); z-index: 3; }
  /* Das Discovery Set liegt im Stapel obenauf — es ist der Blickfang. */
  .v2-sorte:nth-child(4) { --stapel-x: calc(-50% - 6px); --stapel-y: calc(-50% - 6px); z-index: 4; }

  .v2-sorte .fenster { aspect-ratio: 1; }
  .v2-sorte .still { width: 100%; height: 100%; object-fit: contain; }
  .v2-sorte .name { font-size: 15.5px; margin: 6px 0 2px; }
  .v2-sorte .kaufen { font-size: 13px; padding: 8px 12px; }
  .v2-sorte .kaufen .preis-im-knopf { display: inline; }
  .v2-sorte .preisfuss { font-size: 10.5px; line-height: 1.3; margin-top: 4px; }
  .v2-sorte.istset .badge { font-size: 10px; padding: 3px 8px; }
  /* Beschriftung erscheint erst, wenn die Karten auseinander sind — im Stapel
     lägen vier Namen übereinander. */
  .v2-sorte .name, .v2-sorte .kaufen, .v2-sorte .preisfuss, .v2-sorte .badge {
    opacity: var(--k, 0); transition: opacity .3s ease;
  }
}

/* Preis, Knopf und Pflichtangabe in der Kachel (Ramon 04.09.: keine kleinen
   Fehler mehr). Am Rechner bleibt der Preis wie bisher IM Knopf, am Handy
   steht er darüber — dort brach „In den Warenkorb · 16,95 €" sonst um. */
.v2-sorte .kachelpreis { display: none; }
@media (max-width: 899px) {
  .v2-sorte .kachelpreis {
    display: block; margin: 2px 0 6px; opacity: var(--k, 0);
    font-family: var(--display); font-weight: 800; font-size: 19px; color: #fff;
  }
  .v2-sorte .kaufen .preis-im-knopf { display: none; }
  .v2-sorte .kaufen { white-space: nowrap; font-size: 12.5px; padding: 8px 10px; }
  /* Die Pflichtangabe bricht sauber statt mit hängendem „g" */
  .v2-sorte .preisfuss { font-size: 10px; line-height: 1.35; max-width: 17ch; margin-left: auto; margin-right: auto; }
  /* Das Set-Bild füllte die Kachel schlechter als die Einzelseifen — aber
     nicht so weit vergrößern, dass es über die Kachelbreite hinausragt. */
  /* Kein Skalieren mehr — der Fächer ist jetzt im Bild selbst groß genug,
     vorher ragte er 11 px über die Kachel hinaus. */
  /* Der Badge saß über der Kachel und ragte in die Zeile darüber. */
  .v2-sorte.istset .badge { top: 8px; }
  .v2-sorten .buehne { gap: 18px 12px; }
}

/* ══ Lesbarkeit (Prüfagenten 04.09.) ═════════════════════════════════════
   Gemessen wurde gegen den ECHTEN Hintergrund, nicht gegen die CSS-Farbe.
   Alles unter 4,5:1 ist nachgebessert — besonders die Zeilen, die
   Werbeaussagen belegen oder Pflichtangaben sind. */

/* Quellenangabe unter jeder Bewertung: war 2,65:1 */
.v2-stimme .quelle { color: #C9C5BB; }
/* Die Zeile, die die Zitate überhaupt zulässig macht: war 3,71:1 */
.v2-stimmen .quellzeile { color: #C9C5BB; }
/* Name der Rezensenten: war 4,01:1 */
.v2-stimme .wer { color: #D6D2C8; }
/* Fußnoten im Fakten-Banner auf hellem Grund: waren 2,96:1 */
.v2-impact .fussnote { color: #5A554B; }
/* Streichpreise: waren 4,03–4,23:1 */
.v2-produkt .preis.imangebot s,
.js-pakete .preiszeile s { color: #B9B5AB; }
/* Hinweis im Warenkorb (PAngV-Pflichtangabe): war 3,61:1 */
.v2-korb .hinweis { color: #5A554B; }
/* Siegel-Bildunterschriften auf hellem Grund: waren 2,10:1 */
.js-siegel figcaption { color: #4A463E; }

/* 🔴 `hidden` versteckt die Mengenwahl nicht — .v2-kaufbox .mengenwahl setzt
   display:flex und schlägt die Browser-Regel. Bei einem Set war sie sichtbar,
   zählte hoch und wirkte nicht: der Kunde sah "2", im Korb lag 1 Set. */
.v2-kaufbox .mengenwahl[hidden],
.v2-kaufbox .mengenwahl.weg { display: none !important; }

/* ══ Feinschliff nach den Prüfagenten (04.09.) ═══════════════════════════ */

/* Die Kopfzeilen-Symbole lagen ab y≈400 auf dem Text der schwebenden Kaufbox.
   Die Box rückt so weit nach unten, dass sie darunter durchläuft. */
/* Die feste Kopfzeile liegt beim Scrollen zwangsläufig über dem Inhalt.
   Damit ihre Symbole nicht auf dem Text der Kaufbox stehen, bekommt sie ab
   dem ersten Scrollen einen eigenen, deckenden Grund. */
.v2-kopf.gescrollt {
  background: rgba(12,16,14,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}

/* Am kleinen Handy (360 px) legte sich die Kopfzeile über die obere
   Kachelreihe. Etwas mehr Luft oben in der Bühne. */
@media (max-width: 380px) {
  .v2-sorten .buehne { padding-top: 46px; }
}

/* Die Discovery-Set-Kachel stand 8 px höher und war 15 px höher als die drei
   anderen, weil ihre Grundpreiszeile zweizeilig umbricht. Feste Mindesthöhe
   für die Zeile bringt alle vier auf eine Linie. */
@media (min-width: 900px) {
  .v2-sorte { align-self: start; }
  .v2-sorte .preisfuss { min-height: 2.8em; }
}

/* Ein Siegel war 13 px höher als seine Nachbarn (283×320 statt quadratisch). */
.js-siegel .reihe figure img { height: 96px; width: 96px; object-fit: contain; }
.js-siegel .reihe figure.wichtig img { height: 107px; width: 107px; }

/* Beim Größenvergleich stand die Einheit groß ("150 G"), weil die Sektion
   uppercase vererbt — Gramm schreibt man klein. */
.seifenwuchs .wert { text-transform: none; }