/* ==========================================================================
   DIE NEUE PRODUKTSEITE (Watchmaster, 16.10.2026, Worker produktseite-neu)

   Gilt NUR mit body.wm-pdp-neu (wmch-shop, WMCH_Produktseite::neu_aktiv) und
   wird nur dann geladen (functions.php, ?v=<Dateizeit>). Vorlage:
   woocommerce/content-single-product-neu.php.

   MASSE AUS DEM MOCKUP DES NUTZERS (pdp-mockup-desktop-nutzer-20261016.webp).
   Es ist "A Kompakt" bei 1280 px, um 1.39 vergroessert; die Werte hier sind
   die von A am Desktop (Titel 34, Text 16, Knoepfe 48 px).

   SCHRIFTSCHNITTE DES THEMES: Manrope 400 = Light, 500 = Regular, 700 =
   Medium (basic.css, @font-face). Was im Entwurf "normal" war, ist hier 500,
   was dort halbfett oder fett war, 700. Die Familie heisst "Playfair".

   GEWICHT: Diese Datei laedt im <head> VOR den fest verlinkten Dateien des
   Themes (header.php: theme.css, basic.css, style.css nach wp_head) -- bei
   gleicher Spezifitaet gewinnt also das Theme. Jede Regel traegt darum
   "html body.wm-pdp-neu .wm-pdp" vorn: Das schlaegt auch
   ".woocommerce div.product .custom-product-gallery" (gemessen 16.10.2026:
   ohne "html" blieb die Galerie bei max-width 41 %, 266 statt 605 px).

   LINIEN (Entscheid des Nutzers 16.10.2026): zwischen Siegel und Kurztext,
   ueber "Finanzierung" und unter dem Kleingedruckten -- alle drei GLEICH
   stark (--wm-linie).

   HANDY: Das Mobil-Mockup kommt spaeter. Bis dahin unter 992 px eine Spalte,
   ohne waagrechte Scrollleiste.
   ========================================================================== */

html body.wm-pdp-neu .wm-pdp{
  --wm-navy: #00274C;
  --wm-gold: #FFCB05;
  --wm-rate: #3122F0;
  --wm-rate-hover: #2A1DD6;
  --wm-mute: rgba(0, 39, 76, .68);
  --wm-hell: rgba(0, 39, 76, .14);
  --wm-tint: #f3f5f8;
  --wm-linie: 1px solid rgba(0, 39, 76, .22);
  --wm-play: "Playfair", Georgia, serif;
  color: var(--wm-navy);
}
html body.wm-pdp-neu .entry-content section.vc_section__single_product.wm-pdp{
  padding-top: 40px;
}
html body.wm-pdp-neu .wm-pdp *{
  box-sizing: border-box;
}

/* ---- Raster: Bild links, Spalte rechts -------------------------------- */
html body.wm-pdp-neu .wm-pdp .wm-pdp__oben{
  display: grid;
  grid-template-columns: minmax(0, 860px) clamp(520px, 38vw, 720px);
  justify-content: space-between;
  column-gap: 48px;
  align-items: start;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp__spalte{
  min-width: 0;
  padding-top: 4px;
}

/* ---- Galerie (product-image.php, wie heute) ---------------------------- */
html body.wm-pdp-neu .wm-pdp .custom-product-gallery{
  float: none;
  max-width: none;
  width: 100%;
  margin-top: 0;
}
html body.wm-pdp-neu .wm-pdp .full-set-label{
  display: none; /* Full Set steht im Chip (Mockup) */
}
html body.wm-pdp-neu .wm-pdp .custom-main-slider{
  border: 1px solid var(--wm-hell);
  border-radius: 8px;
  overflow: hidden;
}
html body.wm-pdp-neu .wm-pdp .custom-main-slider.slick-initialized{
  overflow: hidden;
}
html body.wm-pdp-neu .wm-pdp .custom-thumb-slider{
  margin-top: 10px;
  max-width: 420px;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-zaehler{
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 3;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--wm-mute);
  background: rgba(255, 255, 255, .85);
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
}

/* ---- Titel und Metazeile ---------------------------------------------- */
html body.wm-pdp-neu .wm-pdp .wm-pdp__titel{
  font-family: var(--wm-play);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: .01em;
  margin: 0;
  color: var(--wm-navy);
  text-wrap: balance;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--wm-mute);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp__marke{
  color: var(--wm-navy);
  font-weight: 700;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp__punkt{
  color: rgba(0, 39, 76, .35);
}

/* ---- Chips ------------------------------------------------------------- */
html body.wm-pdp-neu .wm-pdp .wm-pdp-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--wm-tint);
  color: var(--wm-navy);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-chip::before,
html body.wm-pdp-neu .wm-pdp .wm-pdp-chip::marker{
  content: none;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-chip__icon{
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Siegel (meta.php, wie heute -- nur kleiner) ----------------------- */
html body.wm-pdp-neu .wm-pdp .wm-pdp__siegel .product_meta{
  display: none; /* die Artikelnummer steht in der Metazeile und im Datenblatt */
}
html body.wm-pdp-neu .wm-pdp .wm-pdp__siegel .wm-stamps-rund{
  margin-top: 18px !important;
  gap: 10px 14px !important;
  flex-wrap: nowrap !important;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp__siegel .wm-stamps-rund > div{
  gap: 8px !important;
  min-width: 0;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp__siegel .wm-stamps-rund img:first-child{
  width: 40px !important;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp__siegel .wm-stamps-rund .text_p{
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .01em;
  width: auto !important;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp__siegel .wm-signatur img{
  height: 22px !important;
  margin-top: 2px;
}

/* ---- Kurztext und "Mehr ueber ... lesen" ------------------------------- */
html body.wm-pdp-neu .wm-pdp .wm-pdp-text{
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--wm-linie);
}
/* unter der Kaufzone (deren Linie unten trennt schon) */
html body.wm-pdp-neu .wm-pdp .wm-pdp-text--unten{
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__kurz,
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__kurz p{
  font-size: 16px;
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0;
  max-width: 62ch;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__mehr{
  margin-top: 4px;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__mehr summary{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 2px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--wm-navy);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__mehr summary::-webkit-details-marker{
  display: none;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__pfeil{
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease-out;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__mehr[open] .wm-pdp-text__pfeil{
  transform: rotate(180deg);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__offen,
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__mehr[open] .wm-pdp-text__zu{
  display: none;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__mehr[open] .wm-pdp-text__offen{
  display: inline;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__lang{
  margin: 4px 0 6px;
  max-width: 68ch;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-text__lang p{
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  margin: 0 0 .8em;
}

/* ---- Kaufzone ---------------------------------------------------------- */
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf{
  margin-top: 14px;
  padding: 16px 0 18px;
  border-top: var(--wm-linie);
  border-bottom: var(--wm-linie);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__kopf{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__titel{
  font-family: inherit;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0;
  color: var(--wm-navy);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__laufzeiten{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border: 1.5px solid var(--wm-navy);
  border-radius: 6px;
  overflow: hidden;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__laufzeiten button{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 44px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--wm-navy);
  font: inherit;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__laufzeiten button + button{
  border-left: 1.5px solid var(--wm-navy);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__laufzeiten button:hover{
  background: var(--wm-tint);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__laufzeiten button[aria-pressed="true"]{
  background: var(--wm-navy);
  color: #fff;
  font-weight: 700;
}
/* Fokusring in der Schriftfarbe (26.10.2026, fokus-sichtbar): Gold auf Weiss
   hatte 1.5:1 -- Navy auf den offenen, Weiss auf der gewaehlten Laufzeit. */
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__laufzeiten button:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: -4px;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__betrag{
  font-size: 11px;
  font-weight: 500;
  opacity: .85;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__summe{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--wm-mute);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__summe[hidden],
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__knopf [hidden]{
  display: none;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__summe b{
  color: var(--wm-navy);
  font-weight: 700;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__knopf{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .15s ease-out;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__knopf--rate{
  background: var(--wm-rate);
  border: 1.5px solid var(--wm-rate);
  color: #fff;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__knopf--rate:hover{
  background: var(--wm-rate-hover);
  border-color: var(--wm-rate-hover);
  color: #fff;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__knopf--einmal{
  background: #fff;
  border: 1.5px solid var(--wm-navy);
  color: var(--wm-navy);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__knopf--einmal:hover{
  background: var(--wm-tint);
  color: var(--wm-navy);
}
/* Navy statt Gold (26.10.2026, fokus-sichtbar): der Ring liegt auf Weiss. */
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__knopf:focus-visible{
  outline: 2px solid var(--wm-navy);
  outline-offset: 2px;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__knopf .amount,
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__knopf bdi{
  color: inherit;
  font: inherit;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__preis del{
  opacity: .6;
  font-weight: 500;
  margin-right: 6px;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__preis ins{
  text-decoration: none;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf .add-to-cart__label{
  display: block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--wm-mute);
  opacity: 1;
}
/* Einmalzahlung unter der Linie (Reihenfolge wie die heutige Karte,
   Entscheid des Nutzers 16.10.2026): Titel mit Zusatz, Knopf nur mit dem
   Betrag, darunter die Zahlungs-Ikonen. Die Linie ist dieselbe wie die
   uebrigen (--wm-linie). */
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__einmal{
  margin-top: 18px;
  padding-top: 16px;
  border-top: var(--wm-linie);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__einmal-titel{
  font-family: inherit;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0 0 12px;
  color: var(--wm-navy);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__einmal-zusatz{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--wm-mute);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf__einmal .wm-pdp-kauf__knopf--einmal{
  margin-top: 0;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf .wm-pdp-kauf__zahlarten{
  margin-top: 0; /* nur die Ikonen (::after aus dem Block "zahlungsarten") */
  line-height: 0;
}
/* Ohne Raten: der Preisknopf des Themes (add-to-cart/simple.php) -- volle
   Breite, die Zeile darunter wie oben. */
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf--einmal > .stock{
  display: none; /* "1 vorraetig" -- heute blendet style.css es als Kind von .summary aus */
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf--einmal form.cart{
  margin: 0;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf--einmal .single_add_to_cart_button{
  width: 100%;
  min-height: 48px;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-kauf--einmal .summary_block.o-4 .price{
  margin: 0;
}

/* ---- Datenblatt (aus "C · Datenblatt") --------------------------------- */
html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt{
  position: relative;
  padding: 0; /* das Theme gibt jedem section 60 px oben und unten */
  margin-top: 64px;
  border: 1px solid var(--wm-navy);
  border-radius: 8px;
  background: #fff;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt::before{
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--wm-hell);
  border-radius: 5px;
  pointer-events: none;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt__kopf{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 12px;
  padding: 20px 26px 12px;
  border-bottom: 2px solid var(--wm-gold);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt__titel{
  font-family: var(--wm-play);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  margin: 0;
  color: var(--wm-navy);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt__ref{
  margin: 0;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt__inhalt{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  padding: 16px 38px 28px;
}
/* Kopfzeile rechts und Gruppentitel: EINE Schrift (Entscheid des Nutzers
   16.10.2026: Variante B, "wie Artikeldaten") -- und so gross wie die
   Eintraege darunter (15 px; vorher 13 px, kleiner als die Daten). */
html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt__ref,
html body.wm-pdp-neu .wm-pdp .wm-pdp-daten__gruppe{
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 6px 0 4px;
  color: var(--wm-navy);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-daten dl{
  margin: 0;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-daten__zeile{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--wm-hell);
  min-width: 0;
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-daten__zeile dt{
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--wm-mute);
}
html body.wm-pdp-neu .wm-pdp .wm-pdp-daten__zeile dd{
  margin: 0;
  text-align: right;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--wm-navy);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- schmaler: eine Spalte (bis das Mobil-Mockup da ist) --------------- */
@media (max-width: 991px){
  html body.wm-pdp-neu .wm-pdp .wm-pdp__oben{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt{
    margin-top: 40px;
  }
}
@media (max-width: 767px){
  html body.wm-pdp-neu .entry-content section.vc_section__single_product.wm-pdp{
    padding-top: 16px;
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp__titel{
    font-size: 28px;
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp__siegel .wm-stamps-rund{
    flex-wrap: wrap !important;
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt__kopf{
    margin: 0 8px;
    padding: 16px 12px 10px;
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt__titel{
    font-size: 22px;
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp-datenblatt__inhalt{
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 20px 20px;
  }
}
/* ---- die Fassung neu2-3 (seit 20.10.2026 die einzige) ---------------------
   Entstanden als neu2-2 (Nutzer 16.10.2026: "wir nehmen NEU2", Anmerkungen am
   Bild), dazu 19.10.2026 das Raster 50/50 (unten). Bis 20.10.2026 trug der
   body beide Klassen; neu, neu2, neu2-2, neu3, neu4 sind entfernt (Nutzer:
   "alle Varianten loeschen - ausser HEUTE und ... neu2-3"), die Regeln hier
   gehoeren seither neu2-3 allein. Doppelte Klasse am body, damit sie die
   gleichnamigen oben schlagen. Chips, Artikelnummer und Laufzeit macht die
   Vorlage. */
/* "kein Schriftarten-Mix ... die ganze Seite": keine Playfair -- Titel und
   "Datenblatt" in der Schrift der Seite (Manrope), Schnitt wie bisher. */
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__titel{
  font-family: inherit;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-datenblatt__titel{
  font-family: inherit;
}
/* Kaufzone: "0% Finanzierung" und darunter "Monatliche Raten" wie die
   heutige Karte (Texte aus deren Einstellungen); Groesse im Mass dieser
   Seite -- Titel 18 px wie "Einmalzahlung", die Zeile 16 px. */
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf__kopf{
  margin-bottom: 4px;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf__raten-titel{
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0 0 10px;
  color: var(--wm-navy);
}
/* Untertitel "Tudor · Ref. 25600TN" in EINER Farbe und einem Schnitt
   (Nutzer 16.10.2026: "nicht gemischt Schwarz / Grau"), auch die Punkte. */
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__meta,
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__meta .wm-pdp__marke,
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__meta .wm-pdp__punkt{
  color: var(--wm-navy);
  font-weight: 500;
}
/* Kein Rahmen um das Bild -- wie heute (gemessen 16.10.2026: Rahmen 0,
   Ecken 0). */
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .custom-main-slider{
  border: 0;
  border-radius: 0;
}
/* Kein Bildzaehler "1 / n" (Nutzer 17.10.2026: "das 1/1 unten links kann
   auch weg"); das Skript haengt ihn weiter an, er war ohnehin aria-hidden. */
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-zaehler{
  display: none;
}
/* SCHRIFTLEITER WIE DIE UEBRIGE SEITE (Nutzer 17.10.2026: "Die
   SCHRIFTGROESSEN ... nicht mehr identisch zum Rest der Website ... Du musst
   die Schriftgroessen mit dem Rest der Seite angleichen"). Statt eigener px
   die Variablen des Themes (theme.css, je Fensterbreite): --fz-h1 44/40,
   --fz-h2 32/24, --fz-h3 20/18, --fz-p 18/16, --fz-p-xs 16/14 px bei
   1440/390 px -- gemessen, dieselben Werte wie /sicherheit/, /finanzierung/,
   /verkaufen/ und die heutige Produktseite. Gewichte wie dort: Ueberschrift
   h1/h3 500, h2 400, Fliesstext 400 (= Manrope Light, Kurztext "nicht
   Bold"), Preisknopf 700 wie heute. */
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__titel{
  font-size: var(--fz-h1);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__meta{
  font-size: var(--fz-p);
  line-height: 1.4;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__meta,
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__meta .wm-pdp__marke,
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__meta .wm-pdp__punkt{
  font-weight: 400;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-chip{
  font-size: var(--fz-p-xs);
  font-weight: 500;
  padding: 8px 13px;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-chip__icon{
  width: 16px;
  height: 16px;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__siegel .wm-stamps-rund .text_p{
  font-size: var(--fz-p);
  line-height: 1.3;
  font-weight: 400;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-text__kurz,
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-text__kurz p,
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-text__lang p{
  font-size: var(--fz-p);
  line-height: 1.55;
  font-weight: 400;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-text__mehr summary{
  font-size: 1rem;
  font-weight: 500;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf__titel,
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf__einmal-titel{
  font-size: var(--fz-h3);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .02em;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf__raten-titel{
  font-size: var(--fz-p);
  font-weight: 400;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf__laufzeiten button{
  font-size: var(--fz-p-xs);
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf__betrag{
  font-size: .875rem;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf__summe{
  font-size: var(--fz-p);
  font-weight: 400;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf__knopf{
  font-size: var(--fz-p);
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf .add-to-cart__label{
  font-size: var(--fz-p-xs);
  font-weight: 400;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-kauf__einmal-zusatz{
  /* die kleinste Stufe der Leiter (Block schrift-leiter, 21.10.2026):
     12 px bis 1199, 13 ab 1200 -- vorher calc(--fz-p-xs - 2px) = 12/14.
     Der Rueckfall gilt, wenn der Customizer-Block fehlt. */
  font-size: var(--fz-min, .75rem);
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-datenblatt__titel{
  font-size: var(--fz-h2);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: .02em;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-datenblatt__ref{
  font-size: var(--fz-p);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-daten__gruppe{
  /* --fz-h4, nicht --fz-h3: am Telefon ist h3 seit dem Block schrift-leiter
     (21.10.2026) 16 px -- so gross wie der Wert daneben (dd 16/500). Die
     Gruppe ist ein Titel UEBER eigenem Text und bleibt dort 18 (eine der
     drei Ausnahmen, Entscheid des Nutzers 21.10.2026); ab 768 px h3 = h4. */
  font-size: var(--fz-h4);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  margin: 10px 0 4px;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-daten__zeile dd{
  font-size: var(--fz-p);
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-daten__zeile dt{
  /* Bezeichnung eine Stufe kleiner als der Wert -- wie die Kerndaten am
     Tablet (.wm-pdp-fakten dt, unten); bis 21.10.2026 beide --fz-p, was der
     Nutzer am Telefon als "zu gross" sah (schrift-audit, Befund D1). */
  font-size: var(--fz-p-xs);
  font-weight: 400;
  flex-shrink: 0; /* 390 px: sonst "Funktion|en" (gemessen 17.10.2026) */
  max-width: 50%;
}
html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-daten__zeile dd{
  font-weight: 500;
}
/* "Bildgroesse - kleiner!" (Nutzer 16.10.2026): das Bild HOECHSTENS 600 px
   (Nutzer 17.10.2026: "allerhoechstens auf die Groesse von HEUTE" -- heute
   714 px ab ~1920 px Fenster; hier ist die Schrift kleiner). Bis 20.10.2026
   stand hier auch das Raster von neu2-2 (Bild 44 %, Kaufspalte bis 760 px);
   in neu2-3 galt es nie, das Raster 50/50 unten schlug es. NUR ab 992 px --
   die doppelte Klasse schluege sonst die eine Spalte darunter. */
@media (min-width: 992px){
  /* Das Bild MITTIG in seiner Haelfte (Nutzer 17.10.2026, "Weg 2": die Luft
     verteilt sich links und rechts vom Bild). */
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .custom-product-gallery{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ---- neu2-3 (Nutzer 19.10.2026) ------------------------------------------
   "die vertikale Linie fuer die zweite Spalte [des Datenblatts] an der oberen
   linken Linie alignen. Hier aber umgekehrt, so dass das Bild nur 50%
   einnimmt, der Text / Buttons rechts des Bildes die anderen 50%." Oben zwei GLEICHE Spalten mit der Luecke 48 px (.wm-pdp__oben): Die
   rechte beginnt bei Breite/2 + 24. Das Datenblatt ist ebenso breit, Rand
   1 px, Polster 38 px, Luecke 48 px -- seine zweite Spalte beginnt bei
   1 + 38 + (Breite - 2 - 76 - 48)/2 + 48 = Breite/2 + 24, also auf derselben
   Linie. Wer eine der Luecken oder das Polster aendert, verschiebt sie
   (tests/test_wmch_produktseite.py haelt beide Luecken fest). Das Bild bleibt
   hoechstens 600 px und mittig in seiner Haelfte (oben). Unter 992 px
   eine Spalte. */
@media (min-width: 992px){
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__oben{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* Die Kaufspalte ist hier schmaler als im frueheren neu2-2 (992 px: 424, 1280: 563,
   1440: 638 px). Die drei Siegel brauchen nebeneinander ~575 px; mit
   nowrap (oben) schrumpfte das erste ("Geprueft durch" mit Unterschrift)
   unter seinen Inhalt und lief in das zweite (Shop Tester 19.10.2026, F1:
   DE 992 px 38 px Ueberlauf, 1100 px 23 px; nachgemessen 1280 px 12 px).
   Mit wrap bricht die Reihe NUR um, wenn der Platz fehlt (2 + 1), sonst
   bleibt sie einzeilig. */
@media (min-width: 992px){
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__siegel .wm-stamps-rund{
    flex-wrap: wrap !important;
  }
}
@media (prefers-reduced-motion: reduce){
  html body.wm-pdp-neu .wm-pdp *{
    transition: none !important;
  }
}
/* ---- TELEFON: Variante A "Kompakt-Stack" mit Kaufleiste R4 ----------------
   Nutzer 20.10.2026: "A mit R4, umsetzen" (Brief pdp-mobil; Entwuerfe und
   Messungen in shop/entwuerfe/pdp-mobil-20261020/). Bis 767 px; die
   Reihenfolge der Spalte und die Leiste gelten seit 21.10.2026 bis 991 px,
   also auch fuer das Tablet (Nutzer: Leiste "Ja, auch auf dem Tablet";
   Tablet-Raster C am Ende dieser Datei). Ab 992 px bleibt neu2-3.

   A: Bild hoechstens 300 px, ohne Daumenleiste (der Zaehler "1 / n" sagt,
   dass man wischen kann -- das Skript haengt ihn nur ab zwei Bildern an),
   die Kaufzone VOR den Siegeln, damit der Preis im ersten Bildschirm steht
   (390 x 664: Preisknopf bei y 555 statt 810).

   R4: unten fest, links das Bild, dann Titel / "Marke Ref. X", rechts ein
   Knopf mit dem Preis (mit Raten der blaue Ratenknopf "CHF 105 / Monat").
   Sie SPIEGELT den echten Knopf (produktseite-neu.js, 3.) und erscheint erst,
   wenn die Kaufzone oben hinaus ist. z-index 470: UNTER dem Menue (480) und
   der Kopfleiste (500) des Themes, ueber dem Inhalt. */
html body.wm-pdp-neu .wm-pdp-leiste{
  display: none;
}
@media (max-width: 767px){
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .custom-product-gallery{
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .custom-thumb-slider{
    display: none;
  }
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp-zaehler{
    display: block;
  }
  /* Ohne die Fassungsklasse: Es gibt genau EIN neu2-3-Raster (ab 992 px,
     test_wmch_produktseite); diese Regel steht nach der fuer 991 px und
     gewinnt bei gleicher Spezifitaet. */
  html body.wm-pdp-neu .wm-pdp .wm-pdp__oben{
    row-gap: 16px;
  }
}
/* Telefon UND Tablet (bis 991 px): die Kaufzone vor den Siegeln, und die
   Kaufleiste R4. */
@media (max-width: 991px){
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__spalte{
    display: flex;
    flex-direction: column;
  }
  /* Was andere Plugins in die Spalte haengen, bleibt hinten. */
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__spalte > *{
    order: 6;
  }
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__spalte > .wm-pdp__kopf{
    order: 1;
  }
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__spalte > .wm-pdp-chips{
    order: 2;
  }
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__spalte > .wm-pdp-kauf{
    order: 3;
    margin-top: 4px;
  }
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__spalte > .wm-pdp__siegel{
    order: 4;
    margin-top: 20px;
  }
  html body.wm-pdp-neu.wm-pdp-neu2-3 .wm-pdp .wm-pdp__spalte > .wm-pdp-text{
    order: 5;
  }
  /* Platz fuer die Leiste am Seitenende (69 px + Sicherheitsrand unten). */
  html body.wm-pdp-neu #page{
    padding-bottom: calc(69px + env(safe-area-inset-bottom));
  }
  html body.wm-pdp-neu .wm-pdp-leiste{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 470;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    color: #00274C;
    border-top: 1px solid rgba(0, 39, 76, .14);
    box-shadow: 0 -8px 20px -14px rgba(0, 39, 76, .35);
    font-family: Manrope, sans-serif;
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  html body.wm-pdp-neu .wm-pdp-leiste.ist-an{
    transform: none;
    visibility: visible;
    transition: transform .2s ease;
  }
  html body.wm-pdp-neu .wm-pdp-leiste__bild{
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: 1px solid rgba(0, 39, 76, .14);
    border-radius: 6px;
    background: #fff;
  }
  html body.wm-pdp-neu .wm-pdp-leiste__text{
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
  }
  html body.wm-pdp-neu .wm-pdp-leiste__text span{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html body.wm-pdp-neu .wm-pdp-leiste__titel{
    font-size: var(--fz-p-xs);        /* 14; bis 21.10.2026 feste 15 px */
    font-weight: 500;
    color: #00274C;
  }
  html body.wm-pdp-neu .wm-pdp-leiste__zeile2{
    font-size: var(--fz-min, .75rem); /* 12; bis 21.10.2026 feste 13 px */
    font-weight: 400;
    color: rgba(0, 39, 76, .68);
  }
  html body.wm-pdp-neu .wm-pdp-leiste__knopf{
    flex: 0 0 auto;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: #00274C;
    color: #fff;
    font: 500 16px/1 Manrope, sans-serif;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
  }
  html body.wm-pdp-neu .wm-pdp-leiste__knopf:hover{
    background: #0b3a66;
  }
  /* Mit Raten: das Blau des Ratenknopfs (heylight-karte, #3122F0). */
  html body.wm-pdp-neu .wm-pdp-leiste__knopf--rate{
    background: #3122F0;
  }
  html body.wm-pdp-neu .wm-pdp-leiste__knopf--rate:hover{
    background: #2A1DD6;
  }
  /* Navy statt Gold (26.10.2026, fokus-sichtbar): die Leiste ist weiss. */
  html body.wm-pdp-neu .wm-pdp-leiste__knopf:focus-visible{
    outline: 3px solid #00274C;
    outline-offset: 2px;
  }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce){
  html body.wm-pdp-neu .wm-pdp-leiste,
  html body.wm-pdp-neu .wm-pdp-leiste.ist-an{
    transition: none;
  }
}
/* ---- TABLET (768-991 px): Variante C "Fakten-Split" ----------------------
   Nutzer 21.10.2026: "wir brauchen auf dem Tablet die Variante C, Bild
   kleiner, ein Teil der Facts rechts davon"; Wahl: "Bild darf nur 50% der
   Breite einnehmen", Leiste auch auf dem Tablet, 1024 px hochkant bleibt
   Desktop (ab 992 px neu2-3). Entwuerfe: shop/entwuerfe/pdp-tablet-20261021/.

   Bild links in der halben Breite, rechts daneben die Kerndaten (Marke,
   Referenz, Jahrgang, Zustand, Box & Papiere, Durchmesser) -- das Skript
   (produktseite-neu.js, 4.) haengt sie als Abbild der Datenblatt-Zeilen
   zwischen Bild und Spalte; darunter die Spalte ueber die ganze Breite.
   Kein Umstellen im DOM. Ohne die Fassungsklasse am .wm-pdp__oben: es gibt
   genau EIN neu2-3-Raster (ab 992 px); diese Regel steht nach der fuer
   991 px und gewinnt bei gleicher Spezifitaet. */
html body.wm-pdp-neu .wm-pdp .wm-pdp-fakten{
  display: none;
}
@media (min-width: 768px) and (max-width: 991px){
  html body.wm-pdp-neu .wm-pdp .wm-pdp__oben{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 28px;
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp__bild{
    grid-column: 1;
    grid-row: 1;
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp-fakten{
    grid-column: 2;
    grid-row: 1;
    display: grid;
    row-gap: 14px;
    margin: 0;
    padding-top: 4px;
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp__spalte{
    grid-column: 1 / -1;
    grid-row: 2;
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp-fakten > div{
    min-width: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wm-hell);
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp-fakten dt{
    margin: 0;
    font-size: var(--fz-p-xs);
    line-height: 1.3;
    font-weight: 400;
    color: var(--wm-mute);
  }
  html body.wm-pdp-neu .wm-pdp .wm-pdp-fakten dd{
    margin: 2px 0 0;
    font-size: var(--fz-p);
    line-height: 1.35;
    font-weight: 500;
    color: var(--wm-navy);
    overflow-wrap: anywhere;
  }
  /* Die Leiste an der Kante des Inhalts (48 px bei 768-991). */
  html body.wm-pdp-neu .wm-pdp-leiste{
    padding-left: 48px;
    padding-right: 48px;
  }
}