/* ============================================================
   LP-ERWEITERUNG "Gemacht fürs echte Leben" – TÜV/StiWa 2026
   Anhängen an bundlebV1.css (gleiche Konventionen: #main-Scope,
   Breakpoint-Leiter 1920/1280/1024/768/480, Dark Theme,
   Sektions-Radius-Leiter, .tuev-button-Buttonfamilie)
   ============================================================ */

/* ---------- Buttonfamilie: ergänzt .tuev-button um Solid-Variante ---------- */
#main .tuev-button.solid {
  background-color: #fff;
  color: #1d1d1b;
  border-color: #fff;
}
#main .tuev-button.solid:hover {
  background-color: rgba(255, 255, 255, 0.85);
}

/* ---------- TRUST (Sektion direkt nach dem Hero) ---------- */
#main section.trust {
  background-color: #1E2E3F;
  position: relative;
  border-top-left-radius: 46px;
  border-top-right-radius: 46px;
}
@media (max-width: 1920px) { #main section.trust { border-top-left-radius: 40px; border-top-right-radius: 40px; } }
@media (max-width: 1280px) { #main section.trust { border-top-left-radius: 30px; border-top-right-radius: 30px; } }
@media (max-width: 1024px) { #main section.trust { border-top-left-radius: 24px; border-top-right-radius: 24px; } }

#main section.trust > div {
  width: 100%;
  max-width: 1281px;
  margin: 0 auto;
  padding: 110px 20px 90px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (max-width: 1280px) { #main section.trust > div { max-width: 854px; padding-top: 90px; } }
@media (max-width: 1024px) { #main section.trust > div { max-width: 682px; padding-top: 72px; } }
@media (max-width: 768px)  { #main section.trust > div { max-width: 512px; padding-top: 56px; } }

#main section.trust > div > h2 {
  text-align: center;
  font-weight: 600;
  color: #fff;
  font-size: 46px;
}
@media (max-width: 1920px) { #main section.trust > div > h2 { font-size: 42px; } }
@media (max-width: 1280px) { #main section.trust > div > h2 { font-size: 36px; } }
@media (max-width: 1024px) { #main section.trust > div > h2 { font-size: 30px; } }
@media (max-width: 768px)  { #main section.trust > div > h2 { font-size: 26px; } }
@media (max-width: 480px)  { #main section.trust > div > h2 { font-size: 24px; } }

#main section.trust .trust-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 768px) { #main section.trust .trust-cards { grid-template-columns: 1fr; } }

#main section.trust .trust-cards > div {
  border: 2px solid #fff;
  padding: 32px;
  display: flex;
  flex-direction: row;
  gap: 24px;
  color: #fff;
}
@media (max-width: 480px) { #main section.trust .trust-cards > div { flex-direction: column; padding: 24px; } }

#main section.trust .trust-cards > div > img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 12px;
  padding: 8px;
}
#main section.trust .trust-cards h3 {
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 10px 0;
}
@media (max-width: 1024px) { #main section.trust .trust-cards h3 { font-size: 18px; } }
#main section.trust .trust-cards p {
  margin: 0 0 12px 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.85;
}
@media (max-width: 1024px) { #main section.trust .trust-cards p { font-size: 14px; } }
#main section.trust .trust-cards a {
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  text-decoration: underline !important;
}
#main section.trust .trust-cards a:hover { color: #039FF9; }
#main section.trust .trust-legal {
  text-align: center;
  color: #fff;
  opacity: 0.6;
  font-size: 12px;
  margin: 0;
}

/* ---------- PRODUCTS (Conversion-Kern) ---------- */
#main section.products {
  background-color: #1E2E3F;
  scroll-margin-top: 100px; /* sticky Header (84px) + Luft, Ziel des Keyvisual-CTA #tuev-produkte */
}
#main section.products > div {
  width: 100%;
  max-width: 1281px;
  margin: 0 auto;
  padding: 40px 20px 110px 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
@media (max-width: 1280px) { #main section.products > div { max-width: 854px; } }
@media (max-width: 1024px) { #main section.products > div { max-width: 682px; } }

#main section.products > div > h2 {
  text-align: center;
  font-weight: 600;
  color: #fff;
  font-size: 46px;
}
@media (max-width: 1920px) { #main section.products > div > h2 { font-size: 42px; } }
@media (max-width: 1280px) { #main section.products > div > h2 { font-size: 36px; } }
@media (max-width: 1024px) { #main section.products > div > h2 { font-size: 30px; } }
@media (max-width: 768px)  { #main section.products > div > h2 { font-size: 26px; } }
@media (max-width: 480px)  { #main section.products > div > h2 { font-size: 24px; } }

#main section.products.dark { background-color: #1d1d1b; }
#main section.products .product-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { #main section.products .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #main section.products .product-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } }

/* ---------- Produktkachel (Briefing 3.2/3.5) ----------
   Dunkle Kachel mit feiner Linie wie die Seite; Produkt steht auf einer hellen
   "Bühne" (Lichtkegel wie im StiWa-Banner). Radius aus der Media-Leiter (22px). */
#main .product-card {
  --pc-line: rgba(255, 255, 255, 0.14);
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pc-line);
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.03);
  color: #fff;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
#main .product-card:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.06);
}

#main .product-card .pc-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  margin: 12px 12px 0 12px;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #ffffff 0%, #f1f3f5 55%, #dfe4e9 100%);
}
#main .product-card .pc-media .pc-img {
  width: 76%;
  height: 84%;
  object-fit: contain;
  mix-blend-mode: multiply; /* weiße Bildhintergründe verschmelzen mit der Bühne */
  transition: transform 0.5s ease;
}
#main .product-card:hover .pc-media .pc-img { transform: scale(1.04); }
#main .product-card .pc-media .pc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38%;
  aspect-ratio: 1 / 1;
  opacity: 0.55;
}
#main .product-card .pc-media .pc-icon svg { width: 100%; height: 100%; }
#main .product-card .pc-media .pc-icon svg :is(path, rect, circle) { stroke: #7c8794; stroke-width: 1; }

/* Stiftung-Warentest-Siegel oben links, EU-Energiepfeil unten links */
#main .product-card .pc-seal {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 120px;                 /* V4: feste Größe wie das TÜV-Siegel */
  height: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
@media (max-width: 1024px) { #main .product-card .pc-seal { width: 104px; } }
@media (max-width: 480px)  { #main .product-card .pc-seal { width: 100px; } }
/* TÜV-Rheinland-Siegel unten rechts (Kundenwunsch 08.10.2026, alle TÜV-Produkte) */
#main .product-card .pc-tuev {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 160px;                 /* V4: feste Größe auf allen Karten (vorher 44 % der Karte -> je Raster unterschiedlich) */
  height: 63px;                 /* 601:237, die Zuschnitte sind 595–613 x 231–237 px -> object-fit gleicht aus */
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  background: #fff;
}
@media (max-width: 1024px) { #main .product-card .pc-tuev { width: 140px; height: 55px; } }
@media (max-width: 480px)  { #main .product-card .pc-tuev { width: 132px; height: 52px; } }
/* V4 (Punkt 03): EU-Energielabel = Original-PNG von beko.com (img.pc-energy, LP_ENERGY_ICONS), Fallback Inline-SVG */
#main .product-card .pc-energy {
  position: absolute;
  left: 12px;
  bottom: 14px;
  height: 40px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
#main .product-card img.pc-energy { image-rendering: auto; }
@media (max-width: 480px) { #main .product-card .pc-energy { height: 34px; } }

#main .product-card .pc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  padding: 20px 20px 22px 20px;
}
#main .product-card .pc-name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.7;
}
#main .product-card h3 {
  margin: 0;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.01em;
}
#main .product-card .pc-facts {
  margin: 4px 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
}
#main .product-card .pc-facts li {
  position: relative;
  padding-left: 18px;
  opacity: 0.85;
}
#main .product-card .pc-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
#main .product-card .pc-facts li.is-tuev::before { background-color: #039FF9; }
#main .product-card .pc-facts li.is-stiwa::before { background-color: #dc0a3c; }

#main .product-card .pc-ctas {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#main .product-card .tuev-button {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 14px 18px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
#main .product-card .tuev-button.solid {
  background-color: #fff;
  color: #1d1d1b;
  border-color: #fff;
}
#main .product-card .tuev-button.solid:hover { background-color: rgba(255, 255, 255, 0.85); }

/* Überschrift je Produktbereich – gleiche Kastenlabel-Optik wie die Test-Labels */
#main section.products .products-head {
  margin: 0;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
}
#main section.products .products-head > span:first-child {
  border: 3px solid #fff;
  padding: 6px 14px;
}
#main section.products .products-head > span:last-child {
  border-bottom: 3px solid #fff;
  padding: 6px 4px 6px 12px;
  font-weight: 600;
}
@media (max-width: 768px) {
  #main section.products .products-head { font-size: 17px; align-self: center; }
}

#main section.products .products-all {
  max-width: 420px;
  flex: none;
}
@media (min-width: 1024px) { #main section.products .products-all { max-width: none; } }  /* V4: lange Labels einzeilig auf Desktop */
@media (max-width: 360px) { #main section.tests2.cat#waschmaschinen > div > .fact.fact2 > div > p.info { width: 230px; } }  /* V4: ragte bei 320 px 3 px links raus */

/* ---------- SELL-OUT ---------- */
#main section.sellout {
  background-color: #1d1d1b;
  position: relative;
  border-top-left-radius: 46px;
  border-top-right-radius: 46px;
}
@media (max-width: 1920px) { #main section.sellout { border-top-left-radius: 40px; border-top-right-radius: 40px; } }
@media (max-width: 1280px) { #main section.sellout { border-top-left-radius: 30px; border-top-right-radius: 30px; } }
@media (max-width: 1024px) { #main section.sellout { border-top-left-radius: 24px; border-top-right-radius: 24px; } }

#main section.sellout > div {
  width: 100%;
  max-width: 1281px;
  margin: 0 auto;
  padding: 90px 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
}
#main section.sellout > div > h2 {
  text-align: center;
  font-weight: 600;
  color: #fff;
  font-size: 40px;
}
@media (max-width: 1280px) { #main section.sellout > div > h2 { font-size: 30px; } }
@media (max-width: 768px)  { #main section.sellout > div > h2 { font-size: 24px; } }

#main section.sellout .sellout-promo {
  border: 2px dashed #039FF9;
  color: #039FF9;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px;
}
#main section.sellout .sellout-retailers {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#main section.sellout .sellout-retailers > a {
  width: 160px;
  height: 60px;
  background-color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
}
#main section.sellout .sellout-retailers > a > img {
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 480px) {
  #main section.sellout .sellout-retailers > a { width: calc(50% - 8px); }
}

/* ---------- Sichtbares TÜV-SÜD-Label an den Testkarten ---------- */
#main .supervised {
  display: inline-block;
  border: 1px solid #fff;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  margin-top: 12px;
}

/* Info-Toggle als echter Button statt onclick-img */
#main .fact button.info-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
}
#main .fact button.info-toggle > img { display: block; }

/* ---------- STICKY MOBILE CTA ---------- */
#main .lp-sticky {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 900;
  display: none;
}
#main .lp-sticky > a {
  width: 100%;
  max-width: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
@media (max-width: 800px) {
  #main .lp-sticky.is-visible { display: flex; }
}

/* ============================================================
   FEEDBACK-UMSETZUNG (Briefing 14.09.2026)
   ============================================================ */

/* ---------- 3.1 Keyvisual (Stand 08.10.2026) ----------
   Weiße Bildkarte mit unteren Rundungen auf Navy (#1E2E3F); der Navy-Hero schließt darunter ohne Bruch an.
   Desktop quer (>= 768px) / Mobil hoch (< 768px) über <picture> im Markup.
   CTA: >= 1300px absolut im Weißraum unter der Headline, <= 1299px im Fluss zentriert unter dem Bild.
   Ein <a> für beide Layouts. */
html { scroll-behavior: smooth; } /* Anker-CTA -> #tuev-produkte */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

#main section.keyvisual {
  background-color: #1E2E3F; /* scheint in den unteren Ecken der Karte durch */
  line-height: 0;            /* kein Inline-Spalt unter dem Bild */
}
#main section.keyvisual > .kv-card {
  position: relative;        /* Bezug für den absoluten CTA */
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-bottom-left-radius: 46px;
  border-bottom-right-radius: 46px;
  overflow: hidden;
}
@media (max-width: 1920px) { #main section.keyvisual > .kv-card { border-bottom-left-radius: 34px; border-bottom-right-radius: 34px; } }
@media (max-width: 1280px) { #main section.keyvisual > .kv-card { border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; } }
@media (max-width: 1024px) { #main section.keyvisual > .kv-card { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; } }
#main section.keyvisual picture,
#main section.keyvisual img {
  display: block;
  width: 100%;
  height: auto;
}

/* CTA (Kundenfeedback 08.10.2026): klar als Button erkennbar – Pille, Pfeil, Schatten, sanfter Puls.
   Versalien/Letter-Spacing kommen aus .tuev-button (Bundle); dessen flex:1 / min-/max-width / Padding sind zurückgesetzt. */
@keyframes kvCtaPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(255, 255, 255, 0.75); }
  60%      { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 0.9em rgba(255, 255, 255, 0); }
  61%      { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes kvCtaPulseBlue {
  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(1, 128, 201, 0.55); }
  60%      { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 0 0.9em rgba(1, 128, 201, 0); }
  61%      { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(1, 128, 201, 0); }
}
#main section.keyvisual .kv-cta {
  flex: none;
  min-width: 0;
  max-width: none;
  gap: 0.6em;
  border-radius: 100px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#main section.keyvisual .kv-cta .kv-cta__arrow {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  transition: transform 0.2s ease;
}
#main section.keyvisual .kv-cta:hover .kv-cta__arrow { transform: translateX(0.25em); }
#main section.keyvisual .kv-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #main section.keyvisual .kv-cta { animation: none !important; }
}
@media (min-width: 1400px) {
  /* Links unten, auf Höhe des Beko-Claims rechts (Claim y 523–605 von 645), skaliert mit dem Bild
     (0.78vw ≈ 14,5 px im 1863-px-Original). Dort läuft die Bandkante diagonal durch den Button,
     deshalb Beko-Blau mit weißem Rand: auf dem dunkelblauen Band und auf Weiß gleich gut sichtbar. */
  #main section.keyvisual .kv-cta {
    position: absolute;
    z-index: 2;
    left: 3.2%;
    top: 83.6%;
    font-size: clamp(11px, 0.78vw, 22px);
    letter-spacing: 0.06em;
    padding: 0 1.6em;
    height: 3.4em;
    white-space: nowrap;
    background-color: #0180C9;
    border: 2px solid #fff;
    color: #fff;
    animation: kvCtaPulse 2.4s ease-out infinite;
  }
  #main section.keyvisual .kv-cta:hover,
  #main section.keyvisual .kv-cta:focus-visible {
    background-color: #fff;
    color: #0180C9;
    transform: translateY(-2px) scale(1.03);
    animation: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  }
}
@media (max-width: 1399px) {
  /* Im Fluss unter dem Bild, zentriert in der weißen Karte: blaue Pille */
  #main section.keyvisual .kv-cta {
    position: static;
    align-self: center;
    width: auto;               /* Bundle <= 800px: width 100% / max-width 320px */
    max-width: calc(100% - 40px);
    margin: 18px 20px 30px;
    font-size: 14px;
    padding: 18px 32px;
    white-space: normal;       /* schmale Phones: 2 Zeilen erlaubt */
    text-align: center;
    background-color: #0180C9;
    border: 2px solid #0180C9;
    color: #fff;
    animation: kvCtaPulseBlue 2.4s ease-out infinite;
  }
  #main section.keyvisual .kv-cta:hover,
  #main section.keyvisual .kv-cta:focus-visible {
    background-color: #005781;
    border-color: #005781;
    transform: translateY(-2px);
    animation: none;
  }
  #main section.keyvisual .kv-cta:focus-visible { outline-color: #0180C9; }
}

/* ---------- 3.0 Hero: Navy-Sektion mit Headline + Videokarte, Optik "Tür-Belastungstest" (Stand 08.10.2026) ----------
   bundlebV1.css setzt section.hero auf 100svh/100svw mit Flex-Row-Kind; bundleb.js schreibt per ScrollMagic
   Inline-Styles (section.hero border-radius [alle Ecken], heroVideo width/border-radius, button.pause right)
   -> betroffene Eigenschaften hier mit !important. Spezifität: "#main section.hero > div > div.hero-media"
   schlägt die Bundle-Regel "#main section.hero > div > div" (position:absolute; inset:0). */
#main section.hero {
  width: 100%;               /* Bundle: 100svw */
  height: auto;              /* Bundle: calc(100svh - 80px) */
  aspect-ratio: auto;        /* Bundle <= 480px: 9/16 */
  background-color: #1E2E3F;
  border-radius: 0 0 46px 46px !important; /* unten gerundet, #main-Dunkel scheint vor dem Intro durch */
}
@media (max-width: 1920px) { #main section.hero { border-radius: 0 0 34px 34px !important; } }
@media (max-width: 1280px) { #main section.hero { border-radius: 0 0 30px 30px !important; } }
@media (max-width: 1024px) { #main section.hero { border-radius: 0 0 24px 24px !important; } }
/* Fehlende Videodatei (z. B. DAM-Pfad im CMS noch nicht gesetzt): mit Posterbild bleibt das Standbild stehen
   (Bedienelemente aus), ohne Posterbild Block ausblenden statt schwarzer Fläche. Klassen setzt lp-feedback.js. */
#main section.hero.is-missing .hero-media > button { display: none !important; }
#main section.hero.is-missing.no-poster { display: none; }

#main section.hero > div {
  height: auto;              /* Bundle: 100% */
  max-width: 1920px;         /* wie section.tests > div */
  margin: 0 auto;
  flex-direction: column;    /* Bundle: Flex-Row */
  justify-content: flex-start;
}

/* Headline: Typo-/Positionsleiter von section.tests > div > h2; max() verhindert negatives Padding
   zwischen den Leiterstufen, max-width lässt die Headline zweizeilig umbrechen. */
#main section.hero > div > h2 {
  box-sizing: content-box;   /* max-width = Textbreite, padding-left zählt nicht mit */
  color: #fff;
  font-size: 64px;
  width: auto;
  max-width: 620px;
  padding-top: 178px;
  padding-left: max(20px, calc((100% - 1281px) / 2));
}
@media (max-width: 1920px) { #main section.hero > div > h2 { max-width: 520px; padding-top: 124px; padding-left: max(20px, calc((100% - 960px) / 2)); font-size: 48px; } }
@media (max-width: 1280px) { #main section.hero > div > h2 { max-width: 460px; padding-top: 106px; padding-left: max(20px, calc((100% - 854px) / 2)); font-size: 42px; } }
@media (max-width: 1024px) { #main section.hero > div > h2 { max-width: 380px; padding-top: 88px;  padding-left: max(20px, calc((100% - 682px) / 2)); font-size: 34px; } }
@media (max-width: 768px)  { #main section.hero > div > h2 { max-width: 300px; padding-top: 64px;  padding-left: max(20px, calc((100% - 512px) / 2)); font-size: 26px; } }
@media (max-width: 480px)  { #main section.hero > div > h2 { max-width: none; padding: 84px 20px 0; font-size: 24px; text-align: center; } }
/* Kundenwunsch 08.10.2026: "Zuverlässig in jeder Situation" einzeilig, sobald Platz ist (ab 481px passt es in jeder Stufe) */
@media (min-width: 481px)  { #main section.hero > div > h2 { max-width: none; white-space: nowrap; } }

/* Videokarte: Breiten-/Abstandsleiter von .media1; 16:9 wird per ::before reserviert
   (kein Layout-Sprung vor den Video-Metadaten, ScrollMagic misst die Hero-Höhe beim Start). */
#main section.hero > div > div.hero-media {
  position: relative;        /* Bundle: absolute + inset 0 */
  top: auto; right: auto; bottom: auto; left: auto;
  display: block;            /* Bundle: flex */
  width: 1281px;
  max-width: 100%;
  margin: 46px auto;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;        /* Safari: Rundung clippt auch das Composited-Video */
  background-color: #000;
}
#main section.hero > div > div.hero-media::before {
  content: "";
  display: block;
  padding-top: 56.25%;       /* 16:9 */
}
@media (max-width: 1920px) { #main section.hero > div > div.hero-media { width: 960px; margin: 32px auto; } }
@media (max-width: 1280px) { #main section.hero > div > div.hero-media { width: 854px; margin: 28px auto; } }
@media (max-width: 1024px) { #main section.hero > div > div.hero-media { width: 682px; margin: 24px auto; } }
@media (max-width: 768px)  { #main section.hero > div > div.hero-media { width: 512px; margin: 20px auto; } }
@media (max-width: 480px)  { #main section.hero > div > div.hero-media { width: 100%; margin: 28px auto; border-radius: 0; } } /* bleibt 16:9, kein Quadrat */

#main section.hero .hero-media > video.heroVideo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100% !important;    /* Bundle schreibt calc(100% - Npx) inline */
  height: 100%;
  object-fit: cover;
  border-radius: 22px !important; /* Bundle schreibt border-radius inline; eigene Rundung = Fallback fürs Clipping */
}
@media (max-width: 480px) { #main section.hero .hero-media > video.heroVideo { border-radius: 0 !important; } }
#main section.hero .hero-media > video::-webkit-media-controls,
#main section.hero .hero-media > video::-webkit-media-controls-enclosure { display: none; }

/* Bedienelemente relativ zur Videokarte (Bundle-Regeln "> div > button" greifen verschachtelt nicht mehr) */
#main section.hero .hero-media > button {
  position: absolute;
  z-index: 4;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
}
#main section.hero .hero-media > button svg { display: block; width: 100%; height: 100%; }
#main section.hero .hero-media > button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%; }
#main section.hero .hero-media > button.pause,
#main section.hero .hero-media > button.mute {
  right: 30px !important;    /* ScrollMagic schreibt right inline */
  bottom: 30px;
  width: 40px;
  height: 40px;
  opacity: 1;
}
#main section.hero .hero-media > button.mute { right: 84px !important; }
/* Großer Play-Button in der Mitte: nur wenn pausiert (Autoplay blockiert / reduced motion / Pause) */
#main section.hero .hero-media > button.hero-play {
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
}
#main section.hero.is-paused .hero-media > button.hero-play { display: block; }
/* V3 (T-04): Wiedergabe nur im Overlay – Pause/Ton-Buttons in der Karte entfallen, Posterbild ist klickbar */
#main section.hero .hero-media > button.pause,
#main section.hero .hero-media > button.mute { display: none !important; }
#main section.hero .hero-media > video.heroVideo { cursor: pointer; }
/* Video-Overlay (dialog.lp-video, Markup erzeugt lp-feedback.js) */
html.lp-video-open { overflow: hidden; }
#main dialog.lp-video {
  position: fixed;
  inset: 0;
  width: min(1280px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}
#main dialog.lp-video:not([open]) { display: none; }
#main dialog.lp-video::backdrop { background: rgba(0, 0, 0, 0.86); }
#main dialog.lp-video.is-open { z-index: 10000; }                /* Fallback ohne showModal() */
#main dialog.lp-video.is-open::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.86); z-index: -1; }
#main dialog.lp-video .lp-video__panel {
  position: relative;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
#main dialog.lp-video video {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
#main dialog.lp-video .lp-video__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.2s ease;
}
#main dialog.lp-video .lp-video__close:hover { background: rgba(0, 0, 0, 0.85); }
#main dialog.lp-video .lp-video__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#main dialog.lp-video .lp-video__close svg { display: block; width: 100%; height: 100%; }
@keyframes lpVideoIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
#main dialog.lp-video[open] .lp-video__panel { animation: lpVideoIn 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#main dialog.lp-video[open]::backdrop { animation: lpWtbBackdrop 0.25s ease both; }
@media (prefers-reduced-motion: reduce) {
  #main dialog.lp-video[open] .lp-video__panel,
  #main dialog.lp-video[open]::backdrop { animation: none; }
}
@media (max-width: 768px) {
  #main dialog.lp-video { width: calc(100% - 16px); }
  #main dialog.lp-video .lp-video__panel { border-radius: 10px; }
  #main dialog.lp-video .lp-video__close { top: 8px; right: 8px; width: 38px; height: 38px; padding: 8px; }
}
/* Icon-Zustände: section.hero.is-paused / section.hero.is-unmuted setzt lp-feedback.js */
#main section.hero .hero-media > button.pause .ico-play,
#main section.hero.is-paused .hero-media > button.pause .ico-pause { display: none; }
#main section.hero.is-paused .hero-media > button.pause .ico-play { display: block; }
#main section.hero .hero-media > button.mute .ico-sound,
#main section.hero.is-unmuted .hero-media > button.mute .ico-muted { display: none; }
#main section.hero.is-unmuted .hero-media > button.mute .ico-sound { display: block; }
@media (max-width: 1024px) {
  #main section.hero .hero-media > button.pause,
  #main section.hero .hero-media > button.mute { width: 36px; height: 36px; bottom: 20px; right: 20px !important; }
  #main section.hero .hero-media > button.mute { right: 66px !important; }
  #main section.hero .hero-media > button.hero-play { width: 72px; height: 72px; }
}
@media (max-width: 480px) {
  #main section.hero .hero-media > button.pause,
  #main section.hero .hero-media > button.mute { width: 32px; height: 32px; bottom: 12px; right: 12px !important; }
  #main section.hero .hero-media > button.mute { right: 52px !important; }
  #main section.hero .hero-media > button.hero-play { width: 56px; height: 56px; }
}

/* Intro-Texte: schlichte dunkle Fläche (ScrollMagic pinnt die Sektion, deshalb keine negativen Margins hier).
   Kundenfeedback 08.10.2026: Abschnitt zu lang. Bundle: 100svh + Pin-Dauer = Höhe x 1,2 (drei Texte).
   60svh verkürzt Sektion und Pin-Strecke proportional (ca. 1,3 statt 2,2 Bildschirmhöhen Scrollweg). */
#main section.intro { background-color: #1d1d1b; height: 60svh; min-height: 400px; }
/* V3 (T-05): section.intro ist nur noch ein unsichtbarer Stub (Inline-Style im Markup), die Texte stehen im Keyvisual */

/* ---------- 3.2 Stiftung Warentest ----------
   V3 (09.10.2026): folgt direkt auf das weiße Keyvisual als erster dunkler Block (Navy, oben gerundet).
   Die Headline "… und bei Stiftung Warentest." führt den Satz der Intro-Zeilen fort (gleiche Typo-Leiter). */
#main section.stiwa {
  background-color: #1E2E3F;   /* läuft nahtlos aus dem navy Intro-Block (.kv-intro, oben gerundet) weiter */
  position: relative;
  margin-top: 0;
}
#main section.stiwa > div {
  width: 100%;
  max-width: 1281px;
  margin: 0 auto;
  padding: 0 20px 110px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
@media (max-width: 1280px) { #main section.stiwa > div { max-width: 854px; padding: 0 20px 90px; } }
@media (max-width: 1024px) { #main section.stiwa > div { max-width: 682px; padding: 0 20px 72px; } }
@media (max-width: 768px)  { #main section.stiwa > div { max-width: 512px; padding: 0 20px 56px; } }

#main section.stiwa > div > h2 {
  max-width: 1100px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  font-size: 60px;
  line-height: 125%;
}
@media (max-width: 1920px) { #main section.stiwa > div > h2 { font-size: 52px; } }
@media (max-width: 1280px) { #main section.stiwa > div > h2 { font-size: 46px; } }
@media (max-width: 1024px) { #main section.stiwa > div > h2 { font-size: 38px; } }
@media (max-width: 768px)  { #main section.stiwa > div > h2 { font-size: 30px; } }
@media (max-width: 480px)  { #main section.stiwa > div > h2 { font-size: 23px; } }

#main section.stiwa .stiwa-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { #main section.stiwa .stiwa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #main section.stiwa .stiwa-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } }

/* Motion: Karten gleiten beim Scrollen gestaffelt ein */
#main .lp-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--lp-delay, 0ms);
}
#main .lp-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  #main .lp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 3.5/3.6 Produktbereich: TÜV-Einleitung (neu 08.10.2026) ----------
   Zentriert: Überschrift, Text, darunter drei weiße Siegel-Kacheln mit Kategorie-Label. */
#main section.products .products-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 900px;
  color: #fff;
  padding-top: 70px;
  text-align: center;
}
#main section.products .products-intro > h3 {
  margin: 0;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
}
#main section.products .products-intro > p {
  margin: 0;
  max-width: 760px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  opacity: 0.88;
}
#main section.products .products-intro .tuev-seals {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}
#main section.products .products-intro .tuev-seals > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
#main section.products .products-intro .tuev-seals img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 601 / 237;   /* V3 (T-08): Zuschnitte sind 595–613 x 231–237 px -> gleiche Kachelhöhe */
  object-fit: contain;
}
#main section.products .products-intro .tuev-seals span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1E2E3F;
}
@media (max-width: 1024px) {
  #main section.products .products-intro > h3 { font-size: 26px; }
  #main section.products .products-intro > p { font-size: 16px; }
}
@media (max-width: 768px) {
  #main section.products .products-intro { padding-top: 40px; gap: 14px; }
  #main section.products .products-intro > h3 { font-size: 22px; }
  #main section.products .products-intro .tuev-seals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #main section.products .products-intro .tuev-seals > li:last-child { grid-column: 1 / -1; max-width: calc(50% - 6px); justify-self: center; width: 100%; }
}
@media (max-width: 480px) {
  #main section.products .products-intro .tuev-seals { grid-template-columns: 1fr; max-width: 320px; }
  #main section.products .products-intro .tuev-seals > li:last-child { max-width: none; }
}
/* ---------- 3.3 Tests nach Kategorien (section.cat) ----------
   Klassen tests/tests2 + factN bleiben, damit bundlebV1.css greift.
   Hier nur die Abstände, die für einen durchgehenden Block gedacht waren. */
#main section.tests2.cat > div {
  padding-top: clamp(64px, 9vw, 140px);
  padding-bottom: 40px;
}
#main section.tests2.cat > div > .and > p { padding-top: 0; }
#main section.tests2.cat > div > .fact2 { margin-bottom: clamp(110px, 12vw, 170px); }  /* V4: Platz für den aufgeklappten Tooltip (wurde bei 600–1280 px unten abgeschnitten) */
#main section.tests2.cat > div > .fact4 { margin-bottom: 40px; }
#main section.tests.cat > div { padding-bottom: 60px; }
/* V4 (Punkt 06): Ankerziele der Kategoriebereiche – Sprungziel nicht vom fixen Header verdeckt (mobil sitzt die Leiste unten) */
#main section.cat#waschmaschinen, #main section.cat#trockner, #main section.cat#geschirrspueler,
#main section.cat#kuehlen, #main section.cat#backoefen { scroll-margin-top: 100px; }
@media (max-width: 800px) {
  #main section.cat#waschmaschinen, #main section.cat#trockner, #main section.cat#geschirrspueler,
  #main section.cat#kuehlen, #main section.cat#backoefen { scroll-margin-top: 16px; }
}
/* V4: Film-Modul steht vor "Zuverlässige Technologien" – mehr Luft zwischen Videokarte und Überschrift */
#main section.tech-head > div { padding-top: clamp(80px, 9vw, 130px) !important; }   /* (zwischen hero und tech-head liegt die versteckte Icon-Quelle, daher kein "+") */
#main section.hero > div > div.hero-media { margin-bottom: clamp(64px, 7vw, 96px) !important; }  /* !important: die Breakpoint-Regeln oben setzen margin kurz */
/* V4 (Punkt 07): Legal Note unter dem Technologie-Slider */
#main section.tech .tech-footnote {
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}
@media (max-width: 768px) { #main section.tech .tech-footnote { font-size: 12px; margin-top: 20px; text-align: left; } }
#main section.tests.cat > div > .fact:first-child {
  margin-top: clamp(80px, 9vw, 140px);
  margin-bottom: clamp(32px, 5vw, 80px);
}
/* ---------- V3 (T-09, 09.10.2026): Tooltips der Tür-Tests im Textfluss statt absolut ----------
   Bundle: p.info absolut unter der Zahl, section.tests und > div mit overflow:hidden -> der Text wurde abgeschnitten
   ("*Die Kühlschranktür wurde 300.000 Mal …"). Im Fluss wächst der Abschnitt mit, Desktop und Mobil. */
#main section.tests.cat > div > .fact > div > p.info {
  position: static;
  display: none;
  width: auto;
  max-width: 420px;
  margin: 14px 0 0;
  visibility: visible;
  font-size: 12px;
  line-height: 1.45;
}
#main section.tests.cat > div > .fact > div > p.info.show { display: block; }
#main section.tests.cat > div > .fact > div > p.info > img { display: none; }   /* Sprechblasen-Pfeil ohne Bezug */
/* tests2 (Geschirrspüler .fact3, Glasböden .fact1): ebenfalls im Textfluss – mobil lag der Hinweis sonst über der Headline.
   .fact2 (Waschmaschinen, rotierter Block) bleibt beim Bundle-Verhalten. */
#main section.tests2.cat > div > .fact.fact1 > div > p.info,
#main section.tests2.cat > div > .fact.fact3 > div > p.info {
  position: static;
  display: none;
  width: auto;
  max-width: 420px;
  margin: 14px 0 0;
  visibility: visible;
  transform: none;
  font-size: 12px;
  line-height: 1.45;
}
#main section.tests2.cat > div > .fact.fact1 > div > p.info.show,
#main section.tests2.cat > div > .fact.fact3 > div > p.info.show { display: block; }
#main section.tests2.cat > div > .fact.fact1 > div > p.info > img,
#main section.tests2.cat > div > .fact.fact3 > div > p.info > img { display: none; }
/* Geschirrspüler mobil: das Bundle setzt das Info-Icon bei <= 640px absolut (top:-21px/right:-56px) und es landete auf der
   Headline "werden belastet mit" -> Icon bleibt im Textfluss hinter "in über 100.000 Zyklen" */
@media (max-width: 640px) {
  #main section.tests2.cat > div > .fact.fact3 > div > p.number > span:last-child > img { position: static; display: inline-block; vertical-align: middle; margin-left: 6px; }
}
/* ---------- V3 (T-09): Kategoriefarben – Kühlen durchgehend Navy, Kochen durchgehend Schwarz ---------- */
#main section.tests2.cat#kuehlen-glasboeden,
#main section.tests2.cat#kuehlen-glasboeden > div,
#main section.tests2.cat#kuehlen-glasboeden::before,
#main section.tests2.cat#kuehlen-glasboeden::after,
#main section.products.dark[data-lp-category="kuehlen"] { background-color: #1E2E3F; }
#main section.tests.cat#backoefen,
#main section.tests.cat#backoefen > div,
#main section.products[data-lp-category="backen"] { background-color: #1d1d1b; }
/* Navy-Streifen unter dem Kühlen-Produktblock: die abgerundeten oberen Ecken des schwarzen Kochen-Blocks zeigen so
   Navy statt des schwarzen #main-Hintergrunds (gleicher Kniff wie section.outro:after im Bundle) */
#main section.products[data-lp-category="kuehlen"] { position: relative; }
#main section.products[data-lp-category="kuehlen"]::after { content: ""; position: absolute; left: 0; bottom: -32px; width: 100%; height: 32px; background-color: #1E2E3F; }
/* ---------- V3 (T-12): Schräge Headline "ungleichmäßiger Beladung" mobil im Viewport halten ---------- */
@media (max-width: 768px) {
  #main section.tests2.cat#waschmaschinen > div > .fact.fact2 > div > p.number > span:first-child { font-size: clamp(30px, 9.2vw, 60px); }
  #main section.tests2.cat#waschmaschinen > div > .fact.fact2 > div > p.number > span:last-child { right: 0; font-size: clamp(16px, 5vw, 20px); }
}
/* V4 (Feedback 09.10., "mobil etwas eng"): die zwei Label-Kästen der Test-Überschriften (z. B. "Waschmaschinen | getestet mit")
   bekommen mobil Luft und dürfen umbrechen, statt sich zu berühren */
@media (max-width: 480px) {
  #main section.tests2.cat > div > .fact > div > h3 { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: flex-start; line-height: 1.2; }
  #main section.tests2.cat > div > .fact > div > h3 > span { white-space: nowrap; }
  #main section.tests2.cat > div > .fact.fact2 > div > h3 { justify-content: center; }
}
@media (max-width: 480px) {
  #main section.tests2.cat#waschmaschinen > div > .fact.fact2 { transform: rotate(-6deg); transform-origin: center center; padding: 0 16px; box-sizing: border-box; }
  #main section.tests2.cat#waschmaschinen > div > .fact.fact2 > div > p.number { text-align: center; }
  #main section.tests2.cat#waschmaschinen > div > .fact.fact2 > div > h3 { text-align: center; }
}
/* ---------- V3 (T-07): Statement-Blöcke nicht mehr bildschirmhoch, Outro-Video direkt unter dem Text ---------- */
#main section.tests.cat-statement > div .statement,
#main section.outro > div .statement {
  height: auto;
  min-height: 0;
  padding: clamp(96px, 16vh, 200px) 0;
}
#main section.outro > div > .media { display: block; width: 100%; height: auto; margin-bottom: clamp(72px, 10vh, 130px); } /* Luft zum schwarzen Block "Produkte entdecken" */
/* tests2 nach einem Navy-Block: abgerundeter dunkler Übergang (wie im Original tests → tests2) */
#main section.products:not(.dark) + section.tests2.cat::before,
#main section.tests.cat + section.tests2.cat::before { background-color: #1E2E3F; }
/* Statement + Outro schließen nahtlos an (beide Navy) */
#main section.tests.cat-statement,
#main section.tests.cat-statement + section.outro {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#main section.tests.cat-statement + section.outro { margin-top: -1px; }

/* ---------- "Hier kaufen"-Dialog (WTB, Stand 08.10.2026; Buttontext seit V4 "Hier kaufen") ----------
   Markup erzeugt lp-feedback.js (dialog.lp-wtb am Ende von #main). Optik wie der Where-to-buy-Dialog
   auf beko.com: weißes Panel, Händlerkacheln (Hintergrund rgba(233,236,239,.4), Radius 8px, Logo zentriert,
   Externer-Link-Icon oben rechts), Fußzeile mit Link auf die Händlersuche. <= 768px als Bottom-Sheet. */
html.lp-wtb-open { overflow: hidden; }
#main dialog.lp-wtb {
  position: fixed;
  inset: 0;
  width: min(880px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: #1E2E3F;
  overflow: visible;
  line-height: 1.4;
}
#main dialog.lp-wtb:not([open]) { display: none; }
#main dialog.lp-wtb::backdrop { background: rgba(30, 46, 63, 0.66); }
#main dialog.lp-wtb.is-open { z-index: 10000; }                /* Fallback ohne showModal() */
#main dialog.lp-wtb.is-open::before { content: ""; position: fixed; inset: 0; background: rgba(30, 46, 63, 0.66); z-index: -1; }
#main dialog.lp-wtb .lp-wtb__panel {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 40px 40px 32px;
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  overflow: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
#main dialog.lp-wtb .lp-wtb__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #1E2E3F;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#main dialog.lp-wtb .lp-wtb__close:hover { background-color: rgba(30, 46, 63, 0.08); }
#main dialog.lp-wtb .lp-wtb__close:focus-visible { outline: 2px solid #0180C9; outline-offset: 2px; }
#main dialog.lp-wtb .lp-wtb__close svg { display: block; width: 100%; height: 100%; }
#main dialog.lp-wtb .lp-wtb__kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0180C9;
}
#main dialog.lp-wtb .lp-wtb__title {
  margin: 0 48px 6px 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: #1E2E3F;
}
#main dialog.lp-wtb .lp-wtb__title strong { font-weight: 800; white-space: nowrap; }
#main dialog.lp-wtb .lp-wtb__note {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid #0180C9;
  background: rgba(1, 128, 201, 0.06);
  font-size: 13px;
  color: #1E2E3F;
}
#main dialog.lp-wtb .lp-wtb__note[hidden] { display: none; }
/* Kein Online-Händler gelistet (T-01, 09.10.2026): Hinweis statt Kacheln, Händlersuche bleibt in der Fußzeile */
#main dialog.lp-wtb .lp-wtb__empty {
  margin: 20px 0 0;
  padding: 18px 20px;
  border-radius: 8px;
  background-color: rgba(233, 236, 239, 0.4);
  border: 1px solid rgba(30, 46, 63, 0.08);
  font-size: 15px;
  line-height: 1.5;
  color: #1E2E3F;
}
#main dialog.lp-wtb .lp-wtb__empty[hidden],
#main dialog.lp-wtb .lp-wtb__grid[hidden] { display: none; }
#main dialog.lp-wtb.is-empty .lp-wtb__foot { margin-top: 18px; }
#main dialog.lp-wtb .lp-wtb__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
#main dialog.lp-wtb .lp-wtb__card {
  --i: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  padding: 22px 18px;
  border-radius: 8px;
  border: 1px solid rgba(30, 46, 63, 0.08);
  background-color: rgba(233, 236, 239, 0.4);
  color: #1E2E3F;
  text-decoration: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#main dialog.lp-wtb .lp-wtb__card:hover,
#main dialog.lp-wtb .lp-wtb__card:focus-visible {
  border-color: #0180C9;
  box-shadow: 0 8px 24px rgba(1, 128, 201, 0.16);
  transform: translateY(-2px);
  outline: none;
}
#main dialog.lp-wtb .lp-wtb__ext {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  color: #7c8794;
  transition: color 0.2s ease;
}
#main dialog.lp-wtb .lp-wtb__card:hover .lp-wtb__ext { color: #0180C9; }
#main dialog.lp-wtb .lp-wtb__ext svg,
#main dialog.lp-wtb .lp-wtb__locator svg { display: block; width: 100%; height: 100%; }
#main dialog.lp-wtb .lp-wtb__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
}
#main dialog.lp-wtb .lp-wtb__logo img { max-width: 80%; max-height: 42px; width: auto; object-fit: contain; } /* Logos 121x42 von Bekos Händlerdienst */
#main dialog.lp-wtb .lp-wtb__retailer { font-size: 20px; font-weight: 800; letter-spacing: 0.01em; }
#main dialog.lp-wtb .lp-wtb__go {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0180C9;
}
#main dialog.lp-wtb .lp-wtb__foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(30, 46, 63, 0.1);
  display: flex;
  justify-content: center;
}
#main dialog.lp-wtb .lp-wtb__locator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1E2E3F;
  text-decoration: underline !important;
}
#main dialog.lp-wtb .lp-wtb__locator svg { width: 18px; height: 18px; flex: none; }
#main dialog.lp-wtb .lp-wtb__locator:hover { color: #0180C9; }
/* Motion: Panel blendet ein, Kacheln gestaffelt (gleiche Sprache wie die Produktkarten) */
@keyframes lpWtbIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes lpWtbTile { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lpWtbBackdrop { from { opacity: 0; } to { opacity: 1; } }
#main dialog.lp-wtb[open] .lp-wtb__panel { animation: lpWtbIn 0.26s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#main dialog.lp-wtb[open] .lp-wtb__card { animation: lpWtbTile 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(80ms + var(--i) * 50ms); }
#main dialog.lp-wtb[open]::backdrop { animation: lpWtbBackdrop 0.25s ease both; }
@media (prefers-reduced-motion: reduce) {
  #main dialog.lp-wtb[open] .lp-wtb__panel,
  #main dialog.lp-wtb[open] .lp-wtb__card,
  #main dialog.lp-wtb[open]::backdrop { animation: none; }
  #main dialog.lp-wtb .lp-wtb__card { transition: none; }
}
@media (max-width: 1024px) {
  #main dialog.lp-wtb .lp-wtb__panel { padding: 32px 28px 28px; }
  #main dialog.lp-wtb .lp-wtb__title { font-size: 22px; }
}
@media (max-width: 768px) {
  /* Bottom-Sheet */
  #main dialog.lp-wtb { width: 100%; max-height: 100%; margin: auto 0 0; }
  #main dialog.lp-wtb .lp-wtb__panel {
    border-radius: 22px 22px 0 0;
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    max-height: 90vh;
    max-height: 90svh;
  }
  #main dialog.lp-wtb .lp-wtb__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
  #main dialog.lp-wtb .lp-wtb__card { min-height: 124px; padding: 18px 12px; }
  #main dialog.lp-wtb .lp-wtb__retailer { font-size: 17px; }
  #main dialog.lp-wtb .lp-wtb__title { font-size: 20px; margin-right: 40px; }
  #main dialog.lp-wtb .lp-wtb__close { top: 10px; right: 10px; }
  @keyframes lpWtbIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
}