/* ==========================================================================
   RLStheme — Premium PDP (Welle 3, catalog_product_view)
   Autor: THEO  ·  Design-Vorgabe: AURA-PDP-Spec  ·  Token-Basis: premium-plp.css
   EIN System: nutzt die globalen --brand/--surface/--line/--text-Vars aus
   premium-plp.css (global geladen) + additive PDP-Tokens unten.
   Scope: ausschliesslich .catalog-product-view (store3/RLStheme).
   ========================================================================== */

:root{
  /* additive PDP-Tokens (auf premium-plp.css aufsetzend) */
  --brand-subtle:#e8eef6;
  --state-ok:#1b7a43;
  --ok-tint:#eaf5ee;
  --state-warn:#b4690e;
  --price-strike:#6b7280;
  --offen:#9aa0a8;
  --pdp-stick-top:72px;
  /* Rollen-Aliasse auf die PLP-Vars (falls AURA-Namen genutzt werden) */
  --ink:var(--text-primary);
  --ink-2:var(--text-secondary);
  --ink-3:var(--text-muted);
  --surface-raised:var(--surface-card);
  --r-card:var(--radius-card);
  --r-btn:var(--radius-btn);
}

html{ scroll-padding-top:var(--pdp-stick-top); }

/* ------------------------------------------------------------------ *
 * 1) ATF-Zweispalter ohne Markup-Aenderung:
 *    .column.main als Flex-Wrap -> Galerie (1.32) + Kaufspalte (1),
 *    alles Uebrige (Details/Related) faellt in die naechste Zeile (100%).
 *
 *    NUR DESKTOP (>=768px) — Begruendung (THEO 31.07.2026):
 *    styles-m.css:16895 setzt in @media only screen and (max-width:767px)
 *      .catalog-product-view .column.main{ display:flex; flex-direction:column; }
 *    (Luma-Core, zusammen mit .product.media{order:-1} = natuerliche Stapelung
 *    Galerie -> Kaufspalte -> Content). Diese Regel steht VOR uns in der Kaskade,
 *    unser Block hat sie aber nie zurueckgesetzt: dadurch galt unterhalb 768px
 *    flex-direction:column PLUS unser flex-wrap:wrap PLUS flex-basis:100% auf
 *    jedem Kind. Bei vertikaler Hauptachse ist flex-basis die HOEHE -> jedes Kind
 *    fuellt eine ganze Spalte und wrap bricht in eine NEUE SPALTE nach rechts um.
 *    Gemessen bei 390px: 9 Spalten nebeneinander, scrollWidth 1935px.
 *    Breakpoint 768 = der echte Desktop-Umschaltpunkt dieses Themes
 *    (styles-l.css laedt mit media="screen and (min-width: 768px)",
 *     custom.css:586 @media (min-width:768px)) und schliesst nahtlos an die
 *    767px-Regel an — kein totes Band 761-767 wie bei 760.
 * ------------------------------------------------------------------ */
@media (min-width:768px){
  .catalog-product-view .column.main{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:48px;
  }
  .catalog-product-view .column.main > *{ flex-basis:100%; min-width:0; }
  .catalog-product-view .column.main > .product.media{
    flex:1.32 1 0; min-width:0; margin:0;
  }
  .catalog-product-view .column.main > .product-info-main{
    flex:1 1 0; min-width:0; margin:0;
  }
}
/* Mobile (<768px): Luma stapelt selbst (styles-m.css:16895 + order:-1).
   Hier NUR die bisher gerenderten Nebenwerte halten — kein Layout-Eingriff. */
@media (max-width:767px){
  .catalog-product-view .column.main{ gap:24px; }
  .catalog-product-view .column.main > *{ min-width:0; }
  .catalog-product-view .column.main > .product.media,
  .catalog-product-view .column.main > .product-info-main{ margin:0; }
}

/* ------------------------------------------------------------------ *
 * 2) GALERIE — Bild-Buehne wie PLP
 * ------------------------------------------------------------------ */
.catalog-product-view .product.media .fotorama__stage,
.catalog-product-view .product.media .gallery-placeholder{
  background:var(--surface-media);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
}
.catalog-product-view .product.media .fotorama__stage__frame .fotorama__img{
  object-fit:contain;
}
/* Thumb-Strip */
.catalog-product-view .product.media .fotorama__nav__frame--thumb .fotorama__thumb{
  border-radius:8px; overflow:hidden;
}
.catalog-product-view .product.media .fotorama__active .fotorama__img.fotorama__img--full,
.catalog-product-view .product.media .fotorama__nav__frame--thumb.fotorama__active .fotorama__thumb{
  outline:2px solid var(--brand); outline-offset:-2px;
}

/* ------------------------------------------------------------------ *
 * 3) KAUFSPALTE (product-info-main) — Flow als Flex-Column
 * ------------------------------------------------------------------ */
.catalog-product-view .product-info-main{
  display:flex; flex-direction:column;
  /* bewusste weisse Buy-Box-Karte (ueberschreibt geerbtes custom.css-Grau) */
  background:var(--surface-card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:28px 28px 18px;  /* KOMPAKT (Kaufspalte 2026-07-28): Bottom 28->18. Top-Wert 28 rendert
                              als 10px, weil custom.css .page-layout-1column .product-info-main
                              padding-top:10px !important (@min-width:768) kappt -> Top bewusst nicht angefasst. */
  box-shadow:var(--shadow-rest);
}
@media (max-width:760px){
  .catalog-product-view .product-info-main{ padding:16px 20px 14px; }  /* KOMPAKT: Top 20->16, Bottom 20->14 (Mobile ohne !important-Kappung) */
}
/* Kicker/Marke */
.catalog-product-view .premium-kicker{
  order:-1;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 6px;
}
.catalog-product-view .premium-kicker:empty{ display:none; }

/* H1 */
.catalog-product-view .product-info-main .page-title-wrapper .page-title,
.catalog-product-view .product-info-main .page-title{
  font-size:clamp(26px,1.2rem + 1.4vw,32px);
  font-weight:600; letter-spacing:-.02em; line-height:1.16;
  color:var(--ink); text-wrap:balance; margin:0 0 12px;
}

/* Subline (short_description) */
.catalog-product-view .premium-subline{
  font-size:18px; font-weight:400; line-height:1.45; color:var(--ink-2);
  max-width:46ch; margin:0 0 20px;
}
.catalog-product-view .premium-subline:empty{ display:none; }

/* Sterne-Slot entfaellt: kein "0 Bewertungen"-Platzhalter */
.catalog-product-view .product-info-main .product-reviews-summary.no-rating,
.catalog-product-view .product-info-main .product-reviews-summary:empty{ display:none; }

/* 5) KERN-SPEC-BLOCK — empty-safe (leer -> versteckt) */
.catalog-product-view .premium-kernspec{
  margin:0 0 24px; padding:16px;
  background:var(--surface-media); border:1px solid var(--line); border-radius:var(--r-card);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:16px;
}
.catalog-product-view .premium-kernspec:empty,
.catalog-product-view .premium-kernspec.is-empty{ display:none; }
.catalog-product-view .premium-kernspec .ks-tile{ display:flex; flex-direction:column; gap:2px; }
.catalog-product-view .premium-kernspec .ks-value{
  font-size:22px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1;
}
.catalog-product-view .premium-kernspec .ks-unit{ font-size:13px; font-weight:600; color:var(--ink-2); }
.catalog-product-view .premium-kernspec .ks-label{
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
}

/* 6) PREIS */
.catalog-product-view .product-info-main .product-info-price{
  border:0; margin:0 0 4px; padding:0;
}
.catalog-product-view .product-info-main .price-box .price{
  font-size:30px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.catalog-product-view .product-info-main .price-box .special-price .price{
  color:var(--ink);
}
.catalog-product-view .product-info-main .price-box .old-price .price{
  font-size:17px; font-weight:400; color:var(--price-strike); text-decoration:line-through;
}
.catalog-product-view .premium-saving{
  display:inline-flex; align-items:center; gap:6px; margin:8px 0 0;
  font-size:12px; font-weight:600; color:var(--state-ok);
  background:var(--ok-tint); border-radius:999px; padding:4px 10px;
}
.catalog-product-view .premium-saving:empty{ display:none; }

/* 7) MwSt/Versand */
.catalog-product-view .product-info-main .price-box + .prices-tier,
.catalog-product-view .product-info-main .product-info-price .price-including-tax + .price-excluding-tax{ font-size:13px; }
.catalog-product-view .premium-taxline,
.catalog-product-view .product-info-main .price-label,
.catalog-product-view .product-info-main .old-price .price-label{
  font-size:13px; font-weight:400; color:var(--ink-3);
}

/* 8) VERFUEGBARKEIT */
.catalog-product-view .product-info-main .stock{
  display:inline-flex; align-items:center; gap:9px; margin:16px 0 4px;
  font-size:14px; font-weight:600;
}
.catalog-product-view .product-info-main .stock.available{ color:var(--state-ok); }
.catalog-product-view .product-info-main .stock.available::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--state-ok); box-shadow:0 0 0 4px var(--ok-tint);
}
.catalog-product-view .product-info-main .stock.unavailable{ color:var(--state-warn); }
.catalog-product-view .product-info-main .stock.unavailable::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--state-warn); box-shadow:0 0 0 4px #f6ecdd;
}

/* 9) ADD-TO-CART: Menge-Stepper + Button */
.catalog-product-view .product-info-main .box-tocart{ margin:20px 0 0; }
.catalog-product-view .product-info-main .box-tocart .fieldset{
  display:flex; align-items:stretch; gap:12px; margin:0;
}
.catalog-product-view .product-info-main .box-tocart .field.qty{ margin:0; }
.catalog-product-view .product-info-main .box-tocart .field.qty .label{ display:none; }
.catalog-product-view .product-info-main .box-tocart .input-text.qty{
  width:64px; height:52px; text-align:center; font-size:16px; font-weight:600;
  border:1px solid var(--line); border-radius:var(--r-btn); color:var(--ink);
}
.catalog-product-view .product-info-main .box-tocart .actions{ flex:1 1 auto; display:flex; }
.catalog-product-view .product-info-main .action.tocart.primary,
.catalog-product-view .product-info-main .box-tocart .action.tocart{
  /* Hoehe ueber Token (--cta-h) statt hart 52px -> folgt dem AURA-Legende-Bump
     auf 54px und bleibt buendig zum Menge-Input (VEKTOR/SYNAPSE BEFUND#1, 2026-07-27) */
  flex:1 1 auto; height:var(--cta-h); min-height:var(--cta-h);
  background:var(--brand); border:0; border-radius:var(--r-btn);
  color:#fff; font-size:16px; font-weight:600; letter-spacing:.01em;
  transition:background .15s var(--ease-premium);
}
.catalog-product-view .product-info-main .action.tocart.primary:hover,
.catalog-product-view .product-info-main .box-tocart .action.tocart:hover{
  background:var(--brand-hover);
}
.catalog-product-view .product-info-main .action.tocart:focus-visible{
  outline:none; box-shadow:0 0 0 2px #fff,0 0 0 5px var(--brand);
}
/* disabled (konfigurierbares Produkt vor Optionswahl): AURA "ehrlicher Disabled-Token"
   — muted Grau statt washed-navy, damit der inaktive Zustand EHRLICH als inaktiv liest
   (nicht als gedimmter Primaer-CTA). A11y: 1.4.3 nimmt inaktive Controls aus; Grau
   signalisiert klarer "erst Pflichtoptionen waehlen". (THEO 2026-07-27) */
.catalog-product-view .product-info-main .action.tocart.primary:disabled,
.catalog-product-view .product-info-main .action.tocart[disabled]{
  background:#e5e8ec; color:#9aa2ad; opacity:1; cursor:not-allowed; box-shadow:none;
}
/* Hover darf den inaktiven Zustand nicht re-branden (schlaegt .action.tocart.primary:hover) */
.catalog-product-view .product-info-main .action.tocart.primary:disabled:hover,
.catalog-product-view .product-info-main .action.tocart[disabled]:hover{
  background:#e5e8ec; color:#9aa2ad; transform:none;
}
/* Legacy KVA-Button (falls je wieder injiziert) im Premium-Layout neutralisieren */
.catalog-product-view #kva_button{ display:none; }

/* 10) TRUST-REIHE */
.catalog-product-view .premium-trust{
  margin:24px 0 0; padding:20px 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:14px 20px;  /* KOMPAKT Trust Zeilen-gap 16->14 (Spalten-gap 20 bleibt) */
}
.catalog-product-view .premium-trust .tr-item{ display:flex; align-items:center; gap:10px; }
.catalog-product-view .premium-trust .tr-ico{
  flex:0 0 auto; width:34px; height:34px; border-radius:9px;
  background:var(--brand-subtle); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.catalog-product-view .premium-trust .tr-ico svg{ width:18px; height:18px; }
.catalog-product-view .premium-trust .tr-txt{ font-size:13px; line-height:1.35; color:var(--ink-2); }
.catalog-product-view .premium-trust .tr-txt b{ color:var(--ink); font-weight:600; }
@media (max-width:760px){ .catalog-product-view .premium-trust{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ *
 * 4) STICKY-SPRUNGNAV
 * ------------------------------------------------------------------ */
.catalog-product-view .premium-jumpnav{
  position:sticky; top:0; z-index:40;
  background:rgba(250,250,250,.85);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 max(16px,calc((100% - 1280px)/2));
  transition:transform .25s var(--ease-premium);
}
.catalog-product-view .premium-jumpnav.is-hidden{ transform:translateY(-100%); }
.catalog-product-view .premium-jumpnav__links{ display:flex; gap:24px; overflow-x:auto; scrollbar-width:none; }
.catalog-product-view .premium-jumpnav__links::-webkit-scrollbar{ display:none; }
.catalog-product-view .premium-jumpnav__links a{
  font-size:14px; font-weight:500; color:var(--ink-2); text-decoration:none; white-space:nowrap; padding:6px 0;
  border-bottom:2px solid transparent;
}
.catalog-product-view .premium-jumpnav__links a:hover,
.catalog-product-view .premium-jumpnav__links a.is-active{ color:var(--brand); border-bottom-color:var(--brand); }
.catalog-product-view .premium-jumpnav__cta{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.catalog-product-view .premium-jumpnav__price{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.catalog-product-view .premium-jumpnav__btn{
  height:40px; display:inline-flex; align-items:center; padding:0 18px;
  background:var(--brand); color:#fff; border-radius:var(--r-btn);
  font-size:14px; font-weight:600; text-decoration:none;
}
.catalog-product-view .premium-jumpnav__btn:hover{ background:var(--brand-hover); }
@media (max-width:760px){ .catalog-product-view .premium-jumpnav{ display:none; } }

/* ------------------------------------------------------------------ *
 * DETAILS -> Collapsed-Sections (aus details.phtml)
 * ------------------------------------------------------------------ */
.catalog-product-view .premium-sections{ width:100%; }
.catalog-product-view .premium-section{
  scroll-margin-top:var(--pdp-stick-top);
  padding:48px 0; border-top:1px solid var(--line);
}
.catalog-product-view .premium-section:first-child{ border-top:0; }
.catalog-product-view .premium-section > h2{
  font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin:0 0 20px;
}
.catalog-product-view .premium-section__body{ font-size:16px; line-height:1.65; color:var(--ink); max-width:65ch; }
/* Magezon-Rich-Content (Bild-neben-Text-Banner, full_width_row, Kennzahl-Kacheln) darf die
   65ch-Lesebreite sprengen -> volle Breite. Reine Klartext-Beschreibungen behalten 65ch.
   :has() = Baseline seit 2023, faellt in Alt-Browsern sicher auf 65ch zurueck. (THEO 2026-07-26) */
.catalog-product-view .premium-section__body:has(.magezon-builder){ max-width:none; }
.catalog-product-view .premium-section__body :where(p,li){ font-size:16px; line-height:1.65; }

/* Zebra-Spec-Tabelle (additional attributes) */
.catalog-product-view .premium-section .additional-attributes,
.catalog-product-view .premium-section table.data.table.additional-attributes{
  width:100%; border-collapse:collapse; max-width:720px;
}
.catalog-product-view .premium-section .additional-attributes tr{ border:0; }
.catalog-product-view .premium-section .additional-attributes tbody tr:nth-child(odd){ background:var(--surface-media); }
.catalog-product-view .premium-section .additional-attributes th,
.catalog-product-view .premium-section .additional-attributes td{
  padding:11px 14px; border:0; font-size:14px; text-align:left; vertical-align:top;
}
.catalog-product-view .premium-section .additional-attributes th{ width:52%; color:var(--ink-2); font-weight:400; }
.catalog-product-view .premium-section .additional-attributes td{ color:var(--ink); font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.catalog-product-view .premium-section .oa-empty{ color:var(--offen); font-weight:400; }

/* Downloads-Liste (Sparsh_ProductAttachment) */
.catalog-product-view .premium-section .attachments-list,
.catalog-product-view .premium-section .product-attachments{ list-style:none; margin:0; padding:0; }
.catalog-product-view .premium-section .product-attachments a{
  display:inline-flex; align-items:center; gap:10px; padding:10px 0;
  font-size:15px; color:var(--brand); text-decoration:none;
}

/* FAQ als <details> */
.catalog-product-view .premium-faq details{
  border-bottom:1px solid var(--line); padding:14px 0;
}
.catalog-product-view .premium-faq summary{
  cursor:pointer; font-size:16px; font-weight:600; color:var(--ink); list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.catalog-product-view .premium-faq summary::-webkit-details-marker{ display:none; }
.catalog-product-view .premium-faq summary::after{ content:"+"; color:var(--ink-3); font-weight:400; font-size:20px; }
.catalog-product-view .premium-faq details[open] summary::after{ content:"\2013"; }
.catalog-product-view .premium-faq details > div{ padding:12px 0 4px; color:var(--ink-2); line-height:1.6; }

/* Related/Zubehoer (Welle 2) sitzt unter dem Content — sicherstellen */
.catalog-product-view .column.main > .block.related,
.catalog-product-view .column.main > .block.upsell{ margin-top:16px; }

/* ------------------------------------------------------------------ *
 * MOBILE Sticky-CTA-Bar
 * ------------------------------------------------------------------ */
.catalog-product-view .premium-mobilebar{ display:none; }
@media (max-width:760px){
  .catalog-product-view .premium-mobilebar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    height:64px; display:flex; align-items:center; gap:14px;
    padding:0 16px; background:#fff; border-top:1px solid var(--line);
    box-shadow:0 -2px 12px rgba(16,24,40,.06);
  }
  .catalog-product-view .premium-mobilebar__price{ font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
  .catalog-product-view .premium-mobilebar__btn{
    flex:1 1 auto; min-height:48px; display:flex; align-items:center; justify-content:center;
    background:var(--brand); color:#fff; border-radius:var(--r-btn); font-size:16px; font-weight:600; text-decoration:none;
  }
  .catalog-product-view.premium-has-mobilebar{ padding-bottom:88px; }
}

/* ------------------------------------------------------------------ *
 * prefers-reduced-motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .catalog-product-view .premium-jumpnav,
  .catalog-product-view .action.tocart{ transition:none !important; }
  .catalog-product-view .premium-jumpnav.is-hidden{ transform:none; }
}

/* ==========================================================================
   BUY-BOX REDESIGN  (THEO 2026-07-27)  —  AURA-Kaufspalte
   Scope: ausschliesslich .catalog-product-view .product-info-main (+ Kinder).
   Additiv/reversibel. Ueberschreibt fruehere Regeln nur durch Datei-Reihenfolge
   (gleiche Spezifitaet). Datei wird nur ueber catalog_product_view.xml auf der
   PDP geladen -> KEIN sitewide Effekt.
   ========================================================================== */

:root{
  --r-ctrl:10px;          /* AURA Control-Radius */
  --field-h:48px;         /* AURA Feld-Hoehe */
  --cta-h:52px;           /* AURA CTA-Hoehe */
  --error:#be1622;
  --error-tint:#fcebec;
  --line2:#ededed;        /* zarter Trenner */
}

/* --- Flow-Reihenfolge der Kaufspalte (product-info-main = flex column) ---
   Baseline 200 fuer JEDES direkte Kind: ein kuenftiges, hier nicht gelistetes
   Element (z.B. Reviews-Summary mit Rating, Gift-/Sonderblock) landet damit am
   ENDE statt per Default order:0 VOR den Titel zu springen (SYNAPSE-Haertung).
   Bekannte Elemente ziehen per hoeherer Spezifitaet ihren Platz. Luecken (10er)
   lassen Raum fuer spaetere Einschuebe. */
.catalog-product-view .product-info-main > *{ order:200; }
.catalog-product-view .product-info-main > .premium-kicker{ order:10; }
.catalog-product-view .product-info-main > .page-title-wrapper{ order:20; }
.catalog-product-view .product-info-main > .product-reviews-summary{ order:25; }
.catalog-product-view .product-info-main > .premium-sku{ order:30; }
.catalog-product-view .product-info-main > .premium-subline{ order:40; }
.catalog-product-view .product-info-main > .factrow{ order:50; }
.catalog-product-view .product-info-main > .premium-kernspec{ order:60; }
.catalog-product-view .product-info-main > .product-info-price{ order:70; }
.catalog-product-view .product-info-main > .prices-tier{ order:80; }
.catalog-product-view .product-info-main > .product.attribute.delivery_time{ order:90; }
.catalog-product-view .product-info-main > .product-add-form{ order:100; }
.catalog-product-view .product-info-main > .premium-trust{ order:110; }
.catalog-product-view .product-info-main > .product-social-links{ order:120; }

/* --- Art.-Nr: leise unter dem Titel; Kern-Sku (im stock-sku) doppelt -> weg --- */
.catalog-product-view .product-info-main .premium-sku{
  margin:2px 0 12px; font-size:13px; color:var(--ink-3);  /* KOMPAKT Art.-Nr mb 14->12 (mt 2 = bereits < AURA-Ziel, unveraendert) */
}
.catalog-product-view .product-info-main .premium-sku:empty{ display:none; }
.catalog-product-view .product-info-main .product-info-stock-sku .product.attribute.sku{ display:none; }

/* --- Fakt-Pillen (ersetzt das Riesen-"Ja") --- */
.catalog-product-view .product-info-main .factrow{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;  /* KOMPAKT Fakt-Pillen mb 20->14 (Block-1 Ausklang vor Naht A) */
}
.catalog-product-view .product-info-main .factrow:empty{ display:none; }
.catalog-product-view .product-info-main .fact{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px 7px 10px; border-radius:999px;
  background:var(--brand-subtle); color:var(--brand);
  font-size:13.5px; font-weight:600; line-height:1;
}
.catalog-product-view .product-info-main .fact .fact-ico{ flex:0 0 auto; }

/* --- Preis-Zone: Preis + MwSt + Verfuegbarkeit als Gruppe --- */
.catalog-product-view .product-info-main .product-info-price{
  display:flex; flex-direction:column;      /* neutralisiert geerbtes float + ordnet Preis/MwSt/Stock */
}
.catalog-product-view .product-info-main .product-info-price .price-details,
.catalog-product-view .product-info-main .product-info-price .price-details .tax-details{
  margin:6px 0 0; font-size:13px; color:var(--ink-3);
}
/* --- Verfuegbarkeit: geerbtes float:right + text-align:right + padding-left:10%
       (styles-m.css:9380) neutralisieren -> linke Inline-Zeile unter dem Preis --- */
.catalog-product-view .product-info-main .product-info-stock-sku{
  float:none; width:auto; display:block; margin:10px 0 0;  /* KOMPAKT Auf-Lager-Zeile mt 14->10 */
  text-align:left; padding:0;
}
.catalog-product-view .product-info-main .product-info-stock-sku .stock{ margin:0; }
/* custom.css:236/244 macht daraus einen gefuellten gruenen Pill -> zurueck auf
   ruhige AURA-Inline-Zeile (Dot + gruener Text), keine Grossschreibung */
.catalog-product-view .product-info-main .stock.available,
.catalog-product-view .product-info-main .stock.unavailable{
  background:none; padding:0; border-radius:0; text-transform:none; font-weight:700;
}
.catalog-product-view .product-info-main .stock.unavailable{ color:var(--state-warn); }

/* --- Lieferzeit: ruhige muted Zeile unter dem Lieferstatus --- */
.catalog-product-view .product-info-main .product.attribute.delivery_time{
  display:flex; align-items:baseline; gap:6px; margin:6px 0 0;
  font-size:13px; color:var(--ink-3);
}
.catalog-product-view .product-info-main .product.attribute.delivery_time .type{
  font-weight:400; color:var(--ink-3);
}
.catalog-product-view .product-info-main .product.attribute.delivery_time .type::after{ content:":"; }
.catalog-product-view .product-info-main .product.attribute.delivery_time .value{
  font-weight:600; color:var(--ink-2);
}

/* --- Staffelpreis (prices-tier) als AURA-Chip (nur bei echten Tier-Prices) --- */
.catalog-product-view .product-info-main .prices-tier{
  list-style:none; margin:11px 0 0; padding:0;  /* KOMPAKT Staffel-Chip mt 12->11 */
}
.catalog-product-view .product-info-main .prices-tier .item{
  display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px;
  padding:8px 12px; border-radius:var(--r-ctrl);
  background:var(--surface-media); font-size:13px; color:var(--ink-2);
}
.catalog-product-view .product-info-main .prices-tier .item .price{
  font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;
}
.catalog-product-view .product-info-main .prices-tier .item .benefit{ color:var(--brand); font-weight:600; }
/* geerbter Haken-::before am Tier-Item (Fremd-CSS) -> weg, Chip bleibt ruhig */
.catalog-product-view .product-info-main .prices-tier .item::before{ content:none; }

/* ====== PFLICHT-OPTIONEN ====== */
.catalog-product-view .product-info-main .product-options-wrapper{ margin:4px 0 0; }
.catalog-product-view .product-info-main .product-options-wrapper .fieldset > .field{ margin:0 0 14px; }  /* KOMPAKT Options-Feld-Abstand 16->14 */
.catalog-product-view .product-info-main .product-options-wrapper .field > .label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--ink); margin:0 0 8px;
}
/* PFLICHT-Marker (ruhiger Brand-Chip) statt blossem Sternchen */
.catalog-product-view .product-info-main .product-options-wrapper .field.required > .label::after{
  content:"Pflicht";
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-subtle);
  padding:2px 7px; border-radius:999px;
}
/* Select: 48px, 16px (kein iOS-Zoom), Custom-Chevron nur wenn <select> vorhanden */
.catalog-product-view .product-info-main .product-options-wrapper .control:has(> select){ position:relative; }
.catalog-product-view .product-info-main .product-options-wrapper .control:has(> select)::after{
  content:""; position:absolute; right:17px; top:calc(var(--field-h)/2 - 3px);
  width:9px; height:9px; transform:rotate(45deg);
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  pointer-events:none;
}
.catalog-product-view .product-info-main .product-options-wrapper select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:100%; height:var(--field-h);
  padding:0 44px 0 14px; font-size:16px; color:var(--ink);
  background:var(--surface-card); border:1.5px solid var(--line); border-radius:var(--r-ctrl);
  cursor:pointer; transition:border-color .15s var(--ease-premium), box-shadow .15s var(--ease-premium);
}
.catalog-product-view .product-info-main .product-options-wrapper select:hover{ border-color:var(--ink-3); }
/* Zwei-Farben-Fokus-Ring (Brand-Aussenring + weisser Innenspalt) */
.catalog-product-view .product-info-main .product-options-wrapper select:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px;
  box-shadow:0 0 0 5px var(--surface-card); border-color:var(--brand);
}
/* Placeholder-Zustand (erste Option value="") gedaempft */
.catalog-product-view .product-info-main .product-options-wrapper select:invalid{ color:var(--ink-3); }

/* Fehler-State: rote Fassung + sichtbare Meldung (statt totem grauem Button) */
.catalog-product-view .product-info-main .product-options-wrapper select.mage-error{
  border-color:var(--error); border-width:2px;
}
.catalog-product-view .product-info-main .product-options-wrapper div.mage-error{
  display:flex; align-items:center; gap:6px; margin:7px 0 0;
  font-size:13px; font-weight:500; color:var(--error);
}

/* Beruhigungszeile direkt unter den Pflicht-Optionen (echte Beratungsnummer) */
.catalog-product-view .product-info-main .product-options-wrapper::after{
  content:"Nicht sicher? Wir beraten Sie: 07472 3022980";
  display:block; margin:2px 0 0; font-size:13px; color:var(--ink-2);
}

/* ====== MENGE + WARENKORB + EXPRESS (PayPal/Klarna) ====== */
.catalog-product-view .product-info-main .box-tocart{ margin:20px 0 0; }
/* fieldset = Grid: [Menge][Warenkorb] Zeile 1, Express-Buttons volle Breite darunter */
.catalog-product-view .product-info-main .box-tocart .fieldset{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; margin:0;
}
.catalog-product-view .product-info-main .box-tocart .field.qty{ grid-column:1; grid-row:1; margin:0; }
.catalog-product-view .product-info-main .box-tocart .field.qty .label{ display:none; }
.catalog-product-view .product-info-main .box-tocart .input-text.qty{
  width:64px; height:var(--cta-h); text-align:center; font-size:16px; font-weight:600;
  border:1.5px solid var(--line); border-radius:var(--r-ctrl); color:var(--ink);
  -moz-appearance:textfield;
}
/* .actions aufloesen -> ihre Kinder werden Grid-Items der fieldset (CSS-only, kein Markup-Move) */
.catalog-product-view .product-info-main .box-tocart .actions{ display:contents; }
.catalog-product-view .product-info-main .box-tocart .actions > .action.tocart{
  grid-column:2; grid-row:1; width:100%;
}
/* Express-Buttons: je eigene volle Zeile, sauber gekapselt (kein Overflow mehr) */
.catalog-product-view .product-info-main #paypal-smart-button,
.catalog-product-view .product-info-main #klarna-kec-placeholder{
  grid-column:1 / -1; width:100%; max-width:100%; overflow:hidden;
  border-radius:var(--r-ctrl); margin:14px 0 0;
}
/* "oder direkt bezahlen"-Trenner ueber PayPal (Hairline INNEN -> nicht von overflow geclippt) */
.catalog-product-view .product-info-main #paypal-smart-button{
  padding-top:16px; border-top:1px solid var(--line2);
}
.catalog-product-view .product-info-main #paypal-smart-button::before{
  content:"oder direkt bezahlen"; display:block; text-align:center;
  margin:-8px 0 12px; color:var(--ink-3); font-size:12px; letter-spacing:.02em;
}

/* ====== VERGLEICH (tertiaer) ====== */
.catalog-product-view .product-info-main .product-social-links{ margin:14px 0 0; }  /* KOMPAKT Vergleichslink mt 20->14 (tertiaer, naeher an Trust) */
.catalog-product-view .product-info-main .product-social-links .action.tocompare{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--ink-3); text-decoration:none;
}
.catalog-product-view .product-info-main .product-social-links .action.tocompare:hover{
  color:var(--ink); text-decoration:underline; text-underline-offset:2px;
}
.catalog-product-view .product-info-main .product-social-links .action.towishlist{
  font-size:13px; color:var(--ink-3);
}

/* ====== MOBILE ====== */
@media (max-width:760px){
  /* Kaufzeile: Menge + Warenkorb bleiben Zeile 1, CTA fuellt; Express voll darunter */
  .catalog-product-view .product-info-main .box-tocart .fieldset{ grid-template-columns:auto 1fr; }
  .catalog-product-view .product-info-main .product-options-wrapper select{ font-size:16px; } /* iOS-Zoom-Schutz */
}

/* ==========================================================================
   AURA QUICK-WINS  (THEO 2026-07-27)  —  4 reine CSS/Template-Feinschliffe
   Scope: ausschliesslich .catalog-product-view. Additiv, reversibel, sitewide-frei
   (Datei laedt nur ueber catalog_product_view.xml auf der PDP).
   ========================================================================== */

:root{
  --pdp-measure:68ch;         /* QW1: Lesebreite der Fliesstext-Absaetze */
  --pdp-text-muted:#575756;   /* QW3: AAA-Grau (~7:1 auf Weiss) statt #6b7280/#878787 */
}

/* --- QW3: Sekundaer-Grau auf AAA-Lehne ----------------------------------
   Alle PDP-"muted"-Texte laufen ueber --ink-3 (bisher #6b7280 = 4.6:1 = knapp AA).
   EIN zentraler Repoint hebt Art.-Nr., MwSt/Versand-Zeile, Lieferzeit-Label,
   Kicker, Select-Chevron-Rand und Placeholder auf ~7:1 (AAA) — ohne Einzelregeln
   zu dublieren und ohne #878787 (aus Luma-custom.css) durchscheinen zu lassen.
   Sprungnav-Labels nutzen --ink-2 (#4b5563 ≈ 7.3:1) und sind bereits AAA. */
.catalog-product-view{ --ink-3:var(--pdp-text-muted); }

/* --- QW1: Lesebreite der Fliesstext-Absaetze (verfeinert den Breite-Fix) -
   Der Body bleibt voll breit (siehe oben: :has(.magezon-builder){max-width:none})
   -> Medien/Banner/Kennzahl-Kacheln/Bilder/Video/Produktkarten/Tabellen behalten
   VOLLE Breite. NUR die reinen Magezon-Text-Elemente (Prosa) bekommen Lesebreite,
   linksbuendig. :not(:has(table)) schuetzt Text-Elemente, die eine Tabelle
   umschliessen wuerden (die Technik-Tabelle sitzt ohnehin in einem raw_html). */
.catalog-product-view .premium-section__body .magezon-builder .mgz-element-text:not(:has(table)){
  max-width:var(--pdp-measure);
}

/* --- QW2a: nackten HTML5-Video im Beschreibungs-Content rahmen -----------
   Robust/produktunabhaengig ueber den Element-Typ (kein Magezon-Hash). */
.catalog-product-view .premium-section__body .magezon-builder video{
  display:block; max-width:100%;
  border-radius:12px; overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,.08),0 8px 24px rgba(16,24,40,.06);
}

/* --- QW2b: grauer, zentrierter "OXXIFY.smart 50"-Orphan ueber dem Video ---
   Fauler #c1c1c1-Watermark, dupliziert den Produktnamen -> gestrichen (Urteil
   am Render: das Video ist zentriert, eine linksbuendige figcaption waere davon
   geloest). CSS-Hide = Daten bleiben unangetastet. Produkt-gescoped, weil der
   Magezon-Hash produktspezifisch ist. Sauberste Dauerloesung: Meini entfernt das
   Heading-Element im Magezon-Editor (1 Klick); die Regel wird dann harmlos leer. */
.catalog-product-view.product-oxxify-smart-50 .premium-section__body .magezon-builder .mgz-element.abtg4jk{
  display:none;
}

/* --- QW4: ruhige Erklaerzeile am deaktivierten Warenkorb-Button ----------
   Erscheint, solange der ATC-Button [disabled] ist (Pflichtoptionen offen,
   server-gerendert) und verschwindet automatisch, sobald JS ihn aktiviert
   (:has kippt bei entferntem disabled-Attribut). KEIN neues JS. Kein Rot, kein
   Warndreieck -> graues Info-Icon + --pdp-text-muted. Exakter Wortlaut
   (Mauerstaerke/Farbe) product-gescoped, damit kein falsches Label auf anderen
   Options-PDPs erscheint. */
.catalog-product-view.product-oxxify-smart-50 .product-add-form:has(.action.tocart[disabled]) .box-tocart::before{
  content:"Bitte zuerst Mauerstärke und Farbe wählen.";
  display:block; margin:0 0 12px; padding:1px 0 1px 24px;
  font-size:13px; line-height:1.45; color:var(--pdp-text-muted);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23575756' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='1.1' fill='%23575756' stroke='none'/%3E%3C/svg%3E") left 2px no-repeat;
  background-size:16px 16px;
}

/* ==========================================================================
   AURA WELLE 2  (THEO 2026-07-27)  —  Sektions-Rhythmus, Alt-Flaechen,
   ruhige Scroll-Motion + Feinschliff-Buendel. Scope: ausschliesslich
   .catalog-product-view. Additiv/reversibel, sitewide-frei (Datei laedt nur
   ueber catalog_product_view.xml auf der PDP). Kalibrierung: Ruhe/Handwerk/
   Klarheit, Kontrast Richtung AAA, kein Gadget-Drama.
   ========================================================================== */

:root{
  --pdp-section:clamp(48px,6vw,72px);   /* QW5: EIN Sektions-Rhythmus */
  --pdp-surface-alt:#F5F6F8;            /* QW5: warme, bewusste Bandflaeche
     (praktisch identisch zum Theme-Token --surface-media #f4f6f8, 1 Tick heller
      -> bleibt im EINEN System; Primaertext --ink #101828 ~15:1 = AAA,
      Sekundaertext --ink-2 #4b5563 ~6.9:1 = starkes AA auf dem Band). */
}

/* --- QW5a: EIN Rhythmus je PDP-Sektion (ersetzt das feste 48px 0) ---------- */
.catalog-product-view .premium-section{ padding-block:var(--pdp-section); }

/* --- QW5b: alternierende, ruhige Flaechen-Baender ---------------------------
   Vollbreite-Band INNERHALB der Content-Spalte (kein negativer Rand -> KEIN
   horizontaler Overflow), Text bleibt links buendig zur restlichen Seite.
   Das Band traegt die Trennung -> Doppel-Hairline auf/nach dem Band raus.
   nth-of-type zaehlt nur die real gerenderten <section>-Kinder (leere Sektionen
   werden serverseitig in details.phtml uebersprungen). */
.catalog-product-view .premium-section:nth-of-type(even){
  background:var(--pdp-surface-alt);
  border-top-color:transparent;
}
.catalog-product-view .premium-section:nth-of-type(even) + .premium-section{
  border-top-color:transparent;
}

/* --- QW5c: Scroll-Rise — NUR wo scroll-driven timelines unterstuetzt werden
   (@supports) UND Motion erlaubt ist. Sonst statischer Endzustand (voll
   sichtbar, kein Layout-Shift). Nur transform/opacity = GPU-guenstig, kein CLS.
   EINE ruhige Enthuellung, kein Disco. --- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .catalog-product-view .premium-section{
      animation:pdp-rise .5s cubic-bezier(.16,1,.3,1) both;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
  }
}
@keyframes pdp-rise{ from{ opacity:0; transform:translateY(12px); } }

/* --- Feinschliff: Metric-Tiles (Kaufspalten-Shell .premium-kernspec) --------
   Von grauer Kasten-Box -> ruhige Karte mit Hairline-Trennern zwischen Tiles.
   Spec-Viz-Regel (AURA): die grosse Kennzahl Sans + PROPORTIONAL (kein
   tabular-nums), tabular-nums nur in kleinen Wertespalten. Diese Shell ist bei
   den aktuellen Produktdaten leer (is-empty -> unsichtbar) und damit
   zukunftssicher; die auf der eco SICHTBAREN Kennzahlen sind Magezon-Content
   (oxx-stats, eigener inline-<style>, eigenes Token-System) = Meinis Datenseite,
   NICHT hier gestylt (Struktur-Grenze gemeldet).
   NACHTRAG 31.07.2026: die Groessen dieses Contents werden inzwischen doch
   hier korrigiert - siehe WELLE D am Dateiende. Er rendert am 10px-Root zu
   klein. Gestaltet wird er weiterhin nicht, nur lesbar gemacht. */
.catalog-product-view .premium-kernspec{
  background:var(--surface-card);
  gap:0;
}
.catalog-product-view .premium-kernspec .ks-tile{
  padding:2px 18px; border-left:1px solid var(--line);
}
.catalog-product-view .premium-kernspec .ks-tile:first-child{ border-left:0; padding-left:0; }
.catalog-product-view .premium-kernspec .ks-value{
  font-variant-numeric:proportional-nums;   /* AURA Spec-Viz: proportional, NICHT tabular */
}

/* --- Feinschliff: Spec-Tabelle (native technik = additional-attributes) -----
   Verifiziert EINSPALTIG Merkmal|Wert (th.col.label scope=row + td.col.data),
   NICHT das mehrspaltige Vergleichs-Layout. Zebra bleibt (oben gesetzt).
   Mobile -> Karten-Fallback, damit die Tabelle auf dem Handy nicht bricht.
   (Die mehrspaltige oxx-td-wide-Tabelle sitzt im Magezon-Beschreibungs-Content
    = Meinis Datenseite. Ihr LAYOUT bleibt unangetastet; nur die
    Schriftgroesse wird in WELLE D am Dateiende angehoben - sie rendert am
    10px-Root 10px.) */
.catalog-product-view .premium-section .additional-attributes caption.table-caption{
  text-align:left; font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); padding:0 0 10px;
}
@media (max-width:600px){
  .catalog-product-view .premium-section .additional-attributes,
  .catalog-product-view .premium-section .additional-attributes tbody,
  .catalog-product-view .premium-section .additional-attributes tr{ display:block; width:100%; }
  .catalog-product-view .premium-section .additional-attributes tr{
    border:1px solid var(--line); border-radius:10px;
    margin:0 0 10px; padding:12px 14px; background:var(--surface-card);
  }
  /* Zebra auf Karten aus -> jede Karte gleich ruhig */
  .catalog-product-view .premium-section .additional-attributes tbody tr:nth-child(odd){ background:var(--surface-card); }
  .catalog-product-view .premium-section .additional-attributes th,
  .catalog-product-view .premium-section .additional-attributes td{
    display:block; width:auto; text-align:left; padding:0;
  }
  .catalog-product-view .premium-section .additional-attributes th{
    font-size:12px; font-weight:600; color:var(--ink-3); text-transform:none;
  }
  .catalog-product-view .premium-section .additional-attributes td{
    margin-top:3px; font-size:15px; font-weight:600; color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
}

/* --- Feinschliff: Rating-Slot (reservierter, ruhiger Bewertungs-Platz) ------
   Wuerdevoller EMPTY-STATE unter dem Titel (leere Umriss-Sterne in --line +
   "Noch keine Bewertungen"). Echte Sterne = Daten (Trusted-Shops/Reviews),
   hier NICHT erfunden. Element kommt aus premium-subhead.phtml. Order 25 =
   direkt unter dem Titel (vor Art.-Nr/Subline). */
.catalog-product-view .product-info-main > .premium-rating-slot{ order:25; }
/* BEFUND#1-Guard (VEKTOR/SYNAPSE 2026-07-27): Empty-State NUR solange KEINE echte
   Bewertung existiert. Sobald Magento eine bewertete .product-reviews-summary
   (ohne .no-rating) rendert, verschwindet der Platzhalter automatisch -> kein
   Doppel-Widerspruch/UWG. :has() = Baseline, degradiert sicher (Platzhalter bleibt). */
.catalog-product-view .product-info-main:has(.product-reviews-summary:not(.no-rating)) .premium-rating-slot{ display:none; }
.catalog-product-view .premium-rating-slot{
  display:flex; align-items:center; gap:9px; margin:0 0 13px;  /* KOMPAKT Rating-Slot mb 14->13 */
}
.catalog-product-view .premium-rating-slot .prs-stars{
  display:inline-flex; gap:2px; color:var(--line); line-height:0;
}
.catalog-product-view .premium-rating-slot .prs-stars svg{ display:block; }
.catalog-product-view .premium-rating-slot .prs-text{ font-size:13px; color:var(--ink-3); }

/* --- Mobile-Haertung: Produktkarten-Karussells in ihrer Box halten ----------
   mgz-container (Magezon single_product) + native .block.related/.upsell
   duerfen auf Mobile per overflow-x scrollen, statt mit Restbreite die
   Kaufspalte zu ziehen (Vorbefund THEO). NUR Mobile-gescoped -> Desktop-Voll-
   breite unberuehrt. */
@media (max-width:760px){
  .catalog-product-view .mgz-container,
  .catalog-product-view .block.related,
  .catalog-product-view .block.upsell{
    max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .catalog-product-view .block.related .products-grid,
  .catalog-product-view .block.related .product-items,
  .catalog-product-view .block.upsell .products-grid,
  .catalog-product-view .block.upsell .product-items{ max-width:100%; }
}

/* Megamenue-z-index-Fix: konsolidiert in web/css/premium-global.css (THEO 2026-07-27).
   Frueher hier .catalog-product-view .navigation{ z-index:90 } — jetzt EINE globale Regel
   .navigation{ z-index:90 } @min-width:768px, sitewide (default_head_blocks.xml). */

/* ==========================================================================
   AURA LEGENDE  (THEO 2026-07-27)  —  Kaufspalten-Nachschaerfung "Legendenstatus"
   REINE Optik/Typografie/Hierarchie. Inhalt + Reihenfolge/Slots 1:1 unveraendert
   (nur Restyle; KEIN Markup-/Order-Eingriff, CSS-ONLY -> keine phtml-Aenderung).
   Scope: ausschliesslich .catalog-product-view .product-info-main (+ Kinder) /
   .premium-trust. Additiv/reversibel; ueberschreibt fruehere Buy-Box-Regeln nur
   durch Datei-Reihenfolge (gleiche 0,3,0/0,4,0-Spezifitaet, KEIN !important).
   Design-Vorgabe: AURA-Delta scratchpad/kaufspalte-legende.html (Meini-Freigabe
   "sieht viel besser aus, umsetzen"). Token-Basis: premium-plp.css (EIN System).
   Kalibrierung: 3 Kontraststufen, Preis als Anker, 5 Bloecke mit feinen Naehten.
   ========================================================================== */

:root{
  --seam:#E6E9EE;                /* AURA Haarlinien-Naht (nur 5 Blockgrenzen) */
  --seam-gap:14px;               /* KOMPAKT: 22->14 => Naht-Luft je Blockgrenze 44->28px (mt14+pt14).
                                    Betrifft Naht A(Ident|Preis)/B(Preis|Konfig)/C(Konfig|Kauf). Naht D
                                    (Kauf|Trust) laeuft NICHT ueber diese Var (premium-trust mt24/pt20)
                                    -> bleibt bewusst, weil PayPal/Express-Zone direkt darueber rendert. */
  --green-ink:#1E7A4D;           /* AURA Auf-Lager-Pille: Text  (AA 4.78:1 auf Tint) */
  --green-pill:#E7F4EC;          /* AURA Auf-Lager-Pille: Flaeche */
  --navy-ink:#173C77;            /* AURA Staffel-Chip: Akzent (brand-ink, AAA 9.8:1) */
  --navy-chip:#F1F5FB;           /* AURA Staffel-Chip: Flaeche */
  --navy-chip-border:#DCE6F3;    /* AURA Staffel-Chip: Rand */
  --req-ink:#6B7480;             /* AURA PFLICHT-Mikro-Label (AA 4.73:1, ruhig/tertiaer) */
  /* AURA Feld-/CTA-Feinwerte (48->50 / 52->54): matcht Mockup-Controls exakt */
  --field-h:50px;
  --cta-h:54px;
}

/* ---------- TYPE-SCALE (jede Rolle exakt nach AURA) ---------- */

/* Titel = Identitaets-Anker: kleiner + straffer als bisher (32->27, -.021em) */
.catalog-product-view .product-info-main .page-title-wrapper .page-title,
.catalog-product-view .product-info-main .page-title{
  font-size:clamp(24px,1.28rem + 0.7vw,27px);
  letter-spacing:-.021em;            /* line-height 1.16 / weight 600 unveraendert */
}

/* PREIS = Hero-Anker: groesser (30->33) + PROPORTIONAL (NIE tabular auf der Held-Zahl) */
.catalog-product-view .product-info-main .price-box .price{
  font-size:clamp(28px,1.5rem + 0.9vw,33px);
  line-height:1; letter-spacing:-.012em;
  font-variant-numeric:proportional-nums;   /* AURA Hero-Zahl-Regel (schlaegt tabular oben) */
}

/* Meta-Rollen auf AURA-Groesse 12.5px (Farbe bleibt --ink-3 = #575756 AAA 7.2:1,
   dunkler/kontraststaerker als AURAs #4F5964 7.1:1 -> KEIN AAA-Regress, EIN System) */
.catalog-product-view .product-info-main .premium-sku,
.catalog-product-view .product-info-main .premium-rating-slot .prs-text,
.catalog-product-view .product-info-main .product-info-price .price-details,
.catalog-product-view .product-info-main .product-info-price .price-details .tax-details,
.catalog-product-view .product-info-main .product.attribute.delivery_time{
  font-size:12.5px;
}

/* Feld-Label: 14px/600 (bereits gesetzt) + AURA-Laufweite */
.catalog-product-view .product-info-main .product-options-wrapper .field > .label{
  letter-spacing:-.004em;
}

/* CTA-Label: 16 -> 15.5px + AURA-Laufweite (Fokus-Ring bleibt, s. u.) */
.catalog-product-view .product-info-main .action.tocart.primary,
.catalog-product-view .product-info-main .box-tocart .action.tocart{
  font-size:15.5px; letter-spacing:.004em;
}

/* ---------- BLOCK 3 · AUF-LAGER = gruen-getoente Pille ---------- */
/* schlaegt die fruehere "ruhige Inline-Zeile" (buy-box) UND den Welle3-Dot-mit-Ring */
.catalog-product-view .product-info-main .stock.available{
  display:inline-flex; align-items:center; gap:7px;
  height:27px; padding:0 12px 0 10px; border-radius:999px;
  background:var(--green-pill); color:var(--green-ink);
  font-size:12.5px; font-weight:600; text-transform:none;
}
.catalog-product-view .product-info-main .stock.available > span{ line-height:1; }
.catalog-product-view .product-info-main .stock.available::before{
  content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:var(--green-ink); box-shadow:none;   /* Ring aus Welle3 zuruecknehmen */
}

/* ---------- BLOCK 2 · STAFFEL = navy-getoenter Chip + Tag-Icon ---------- */
/* schlaegt den grauen buy-box-Chip; ::before content"" schlaegt fruehere content:none */
.catalog-product-view .product-info-main .prices-tier .item{
  align-items:center; gap:7px;
  padding:9px 13px; border-radius:var(--r-ctrl);
  background:var(--navy-chip); border:1px solid var(--navy-chip-border);
  font-size:13px; color:var(--ink-2);
}
.catalog-product-view .product-info-main .prices-tier .item::before{
  content:""; flex:0 0 auto; width:15px; height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173C77' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 13.3l-7.2 7.2a2 2 0 0 1-2.8 0l-6-6a2 2 0 0 1 0-2.8L11.7 4.5H20a.5.5 0 0 1 .5.5v8.3z'/%3E%3Ccircle cx='16.2' cy='8.2' r='1.3' fill='%23173C77' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.catalog-product-view .product-info-main .prices-tier .item .price{
  color:var(--navy-ink); font-weight:700; font-variant-numeric:tabular-nums;
}
.catalog-product-view .product-info-main .prices-tier .item .benefit,
.catalog-product-view .product-info-main .prices-tier .item .benefit .percent{
  color:var(--navy-ink); font-weight:700;
}

/* ---------- BLOCK 3 · PFLICHT = ruhiges graues Mikro-Label (keine blaue Pille) --- */
.catalog-product-view .product-info-main .product-options-wrapper .field.required > .label::after{
  content:"Pflicht"; margin-left:2px;
  font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--req-ink);
  background:none; padding:0; border-radius:0;    /* Brand-Pille zuruecknehmen */
}

/* ---------- BLOCK 5 · TRUST = einheitliche Line-Icons statt hellblauer Kaesten --- */
.catalog-product-view .premium-trust .tr-item{ align-items:flex-start; gap:11px; }
.catalog-product-view .premium-trust .tr-ico{
  width:20px; height:20px; margin-top:1px;
  background:none; border-radius:0; color:var(--brand);
}
.catalog-product-view .premium-trust .tr-ico svg{ width:20px; height:20px; }
.catalog-product-view .premium-trust .tr-txt{
  font-size:12.5px; line-height:1.35; color:var(--ink-3);
}
.catalog-product-view .premium-trust .tr-txt b{
  display:block; color:var(--ink-2); font-weight:600; font-size:12.5px; margin-bottom:1px;
}

/* ---------- VERGLEICH = de-emphasiert (12.5/500, KEIN Uppercase-Sperrsatz) ------ */
.catalog-product-view .product-info-main .product-social-links .action.tocompare{
  font-size:12.5px; font-weight:500; text-transform:none;
}

/* ---------- FOKUS-RING an der Menge (WCAG 2.4.11 / 2.4.7) ---------------------- */
/* Selects + CTA haben bereits sichtbare Ringe; die Menge-Eingabe schliesst die Luecke */
.catalog-product-view .product-info-main .input-text.qty:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-color:var(--brand);
}

/* ---------- 5-BLOCK-NAEHTE: feine Haarlinien NUR an den 5 Blockgrenzen ---------- */
/* Naht Identitaet | Preis  (Beginn Block 2 = Preis-Zone inkl. Auf-Lager) */
.catalog-product-view .product-info-main > .product-info-price{
  margin-top:var(--seam-gap); padding-top:var(--seam-gap);
  border-top:1px solid var(--seam);
}
/* Naht Preis | Konfiguration  (Beginn Block 3 = Add-to-Cart-Form) */
.catalog-product-view .product-info-main > .product-add-form{
  margin-top:var(--seam-gap); padding-top:var(--seam-gap);
  border-top:1px solid var(--seam);
}
/* Naht Konfiguration | Kauf  (Beginn Block 4 = box-tocart) — NUR wenn Pflichtoptionen
   existieren (Simple-Produkte bekommen sonst eine Doppelnaht direkt hintereinander) */
.catalog-product-view .product-info-main .product-add-form:has(.product-options-wrapper) .box-tocart{
  margin-top:var(--seam-gap); padding-top:var(--seam-gap);
  border-top:1px solid var(--seam);
}
/* Naht Kauf | Trust  (Beginn Block 5): vorhandene Trust-Border auf Naht-Farbe angleichen */
.catalog-product-view .premium-trust{ border-top-color:var(--seam); }

/* ---------- MOBILE-Angleich der Naht-Luft (etwas kompakter) -------------------- */
@media (max-width:760px){
  .catalog-product-view .product-info-main{ --seam-gap:12px; }  /* KOMPAKT Mobile: 18->12 => Naht-Luft 36->24px */
}
/* ==== Ende AURA LEGENDE ==== */

/* ==========================================================================
   WELLE A  (THEO 2026-07-28)  —  Detail-Sektionen: Native Spec-Block +
   Downloads ins PDP-Design-System. Scope: ausschliesslich .catalog-product-view.
   Additiv/reversibel, sitewide-frei (Datei laedt nur ueber catalog_product_view.xml
   auf der PDP). KEIN !important, gleiche Spezifitaet -> Datei-Reihenfolge gewinnt.
   Design-Vorgabe: AURA-PDP-Audit (native "Weitere Informationen" + "Unterlagen").
   Token-Basis: premium-plp.css (EIN System, --brand=#194383).
   ========================================================================== */

/* --- P1/P8: Sektions-Ueberschrift ins PDP-Typo-System (#194383-Akzentbalken) ---
   Trifft NUR die direkten Sektions-Labels (details.phtml: "Weitere Informationen",
   "Unterlagen") ueber den Kind-Kombinator ">". Magezon-eigene h2 (tiefer in
   .premium-section__body .magezon-builder) mit eigenem oxx-Akzent bleiben unberuehrt.
   AAA: --brand #194383 auf Weiss ~10.7:1 (Balken dekorativ); Text bleibt --ink. */
.catalog-product-view .premium-section > h2{
  position:relative; padding-top:15px;
}
.catalog-product-view .premium-section > h2::before{
  content:""; position:absolute; top:0; left:0;
  width:34px; height:3px; border-radius:2px;
  background:var(--brand);
}

/* --- P1: Native "Weitere Informationen"-Block entschlacken --------------------
   Die Sektion mit der additional-attributes-Tabelle traegt nur ergaenzende
   Daten (Lieferzeit/Bauart; "Empfohlen" ist server-seitig per Code raus). Als
   volles Grau-Band (nth-of-type even) mit 72px-Rhythmus liest sie als leerer
   grauer Kasten -> Band zuruecknehmen + kompakter Innenabstand = tote Bodenflaeche
   weg. Die kuratierte Technik-Tabelle steht im Magezon-Content (keine Doppelung).
   :has() = Baseline; faellt in Alt-Browsern sicher auf das Grau-Band zurueck. */
.catalog-product-view .premium-section:has(.additional-attributes){
  background:transparent;              /* Grau-Band (even) zuruecknehmen */
  border-top-color:var(--line);        /* Haarlinie zurueck (Band trug sie sonst) */
  padding-block:clamp(28px,3.4vw,40px);/* kompakter als der 72px-Rhythmus */
}
/* Folgesektion (Unterlagen): Haarlinie zurueck, da die vorige Sektion nun kein
   even-Band mehr ist (sonst bliebe ihr Top-Rand transparent). */
.catalog-product-view .premium-section:has(.additional-attributes) + .premium-section{
  border-top-color:var(--line);
}
/* Native Spec-Tabelle etwas schmaler binden -> Merkmal|Wert fluchten enger,
   keine ueberweite Wertespalte (rechtsbuendig/tabular sind oben bereits gesetzt). */
.catalog-product-view .premium-section .additional-attributes,
.catalog-product-view .premium-section table.data.table.additional-attributes{
  max-width:560px;
}

/* --- P3: Downloads/"Unterlagen" als Karten mit Dateityp-Icon ------------------
   Ersetzt die nackten Bullet-Links (attachmenttab.phtml-Override liefert das
   .rls-downloads-Markup). Karten-Raster, Lucide-Icon in Marken-Tint, Titel +
   Endung-Meta, Hover/Fokus wie das restliche PDP-System. */
.catalog-product-view .premium-section .rls-downloads{
  list-style:none; margin:0; padding:0; max-width:760px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px;
}
.catalog-product-view .premium-section .rls-downloads .rls-dl{ margin:0; }
.catalog-product-view .rls-dl__link{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface-card); text-decoration:none; color:var(--ink);
  transition:border-color .15s var(--ease-premium),
             box-shadow .15s var(--ease-premium),
             transform .15s var(--ease-premium);
}
.catalog-product-view .rls-dl__link:hover{
  border-color:var(--brand); box-shadow:var(--shadow-rest); transform:translateY(-1px);
}
.catalog-product-view .rls-dl__link:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-color:var(--brand);
}
.catalog-product-view .rls-dl__ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px;
  background:var(--brand-subtle); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.catalog-product-view .rls-dl__body{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.catalog-product-view .rls-dl__title{
  font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3;
  word-break:break-word;
}
.catalog-product-view .rls-dl__meta{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.catalog-product-view .rls-dl__action{ flex:0 0 auto; color:var(--ink-3); display:flex; }
.catalog-product-view .rls-dl__link:hover .rls-dl__action{ color:var(--brand); }
@media (prefers-reduced-motion:reduce){
  .catalog-product-view .rls-dl__link{ transition:none; }
  .catalog-product-view .rls-dl__link:hover{ transform:none; }
}
/* ==== Ende WELLE A ==== */

/* ================================================================== *
 * 12) BUY-META — "Datenblatt & Unterlagen"-Sprunglink + Truck-Icon fuer
 *     die (bereits vorhandene) Lieferzeit an der Kaufspalte.
 *     (THEO 2026-07-28)
 *
 *     BEFUND: Die Lieferzeit rendert die Kaufspalte bereits nativ ueber
 *     .product.attribute.delivery_time (order:90, Z.393). Daher wird sie hier
 *     NICHT dupliziert — sie bekommt nur ein ruhiges Truck-Line-Icon (Task-
 *     Vision "Lieferzeit mit Icon"). Der Docs-Sprunglink (premium.buymeta)
 *     wird per order:92 direkt DARUNTER und ueber dem Add-to-Cart platziert,
 *     sodass Lieferzeit + Unterlagen als Icon-Paar an der Kaufspalte stehen.
 *     EINE Akzentfarbe: --brand (#194383). Scope streng auf .product-info-main.
 * ================================================================== */

/* Doku-Kachel (WELLE B) sitzt UNTER der Trust-Reihe (order 110), vor social-links (120).
   Frueher order:92 (Mini-Link zwischen Lieferzeit und Cart) -> jetzt 115. */
.catalog-product-view .product-info-main > .premium-buymeta{ order:115; }

/* Truck-Line-Icon an der nativen Lieferzeit-Zeile (kein Duplikat, mask -> --brand) */
.catalog-product-view .product-info-main .product.attribute.delivery_time{ align-items:center; }
.catalog-product-view .product-info-main .product.attribute.delivery_time::before{
  content:""; flex:0 0 auto; width:15px; height:15px; display:inline-block;
  background-color:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%203h13v11H1z'/%3E%3Cpath%20d='M14%207h4l3%203v4h-7z'/%3E%3Ccircle%20cx='5.5'%20cy='18'%20r='1.9'/%3E%3Ccircle%20cx='17.5'%20cy='18'%20r='1.9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%203h13v11H1z'/%3E%3Cpath%20d='M14%207h4l3%203v4h-7z'/%3E%3Ccircle%20cx='5.5'%20cy='18'%20r='1.9'/%3E%3Ccircle%20cx='17.5'%20cy='18'%20r='1.9'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Docs-Link-Zeile (dezent, EIN Akzent, tastatur-fokussierbar) */
.catalog-product-view .product-info-main .premium-buymeta{ margin:8px 0 2px; }
.catalog-product-view .product-info-main .premium-buymeta__row{
  display:flex; align-items:center; gap:9px; font-size:14px; line-height:1.35;
}
.catalog-product-view .product-info-main .premium-buymeta__ico{
  flex:0 0 auto; color:var(--brand); display:inline-flex;
}
.catalog-product-view .product-info-main .premium-buymeta__ico svg{ display:block; }
.catalog-product-view .product-info-main a.pbm-docs{
  color:var(--brand); font-weight:600; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .15s ease;
}
.catalog-product-view .product-info-main a.pbm-docs:hover{ border-bottom-color:var(--brand); }
.catalog-product-view .product-info-main a.pbm-docs:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:2px;
}
/* ==== Ende BUY-META ==== */

/* ==========================================================================
   WELLE B  (THEO 2026-07-29)  —  "Dokumente & weitere Informationen" 10/10:
   (1) Buy-Box-Doku-KACHEL (ersetzt den Mini-Link) · (2) Doku-Center mit
   Format+ECHTER Groesse + Trust-Zeile · (3) Technische-Daten-Shell
   (Kennzahl-Kacheln + gruppierte Zebra-Tabelle). Design: AURA-10/10-Mockup.
   Scope: ausschliesslich .catalog-product-view. Additiv, EIN Akzent (--brand),
   kein !important, gleiche Spezifitaet -> Datei-Reihenfolge gewinnt. empty-safe.
   ========================================================================== */

/* --- (1) BUY-BOX DOKU-KACHEL --------------------------------------------- */
.catalog-product-view .product-info-main .premium-buymeta{ margin:16px 0 4px; }
.catalog-product-view .pbm-cue{
  display:flex; align-items:center; gap:16px; width:100%;
  padding:14px 16px; min-height:48px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface-card); color:var(--ink); text-decoration:none;
  transition:border-color .15s var(--ease-premium),
             box-shadow .15s var(--ease-premium),
             transform .15s var(--ease-premium);
}
.catalog-product-view .pbm-cue:hover{
  border-color:var(--brand); box-shadow:var(--shadow-rest); transform:translateY(-1px);
}
.catalog-product-view .pbm-cue:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-color:var(--brand);
}
.catalog-product-view .pbm-cue__ic{
  flex:0 0 auto; width:44px; height:44px; border-radius:11px;
  background:var(--brand-subtle); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.catalog-product-view .pbm-cue__ic svg{ display:block; }
.catalog-product-view .pbm-cue__txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.catalog-product-view .pbm-cue__t1{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; }
.catalog-product-view .pbm-cue__t2{
  font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.catalog-product-view .pbm-cue__right{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.catalog-product-view .pbm-cue__count{
  font-size:12.5px; font-weight:700; color:var(--brand);
  background:var(--brand-subtle); border:1px solid var(--brand-line,#c9d6ea);
  border-radius:999px; padding:3px 10px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.catalog-product-view .pbm-cue__chev{ color:var(--ink-3); flex:0 0 auto; }
.catalog-product-view .pbm-cue:hover .pbm-cue__chev{ color:var(--brand); }
@media (max-width:760px){
  .catalog-product-view .pbm-cue__t2{ display:none; } /* mobil: Namens-Teaser weg, Kachel kompakt */
}
@media (prefers-reduced-motion:reduce){
  .catalog-product-view .pbm-cue{ transition:none; }
  .catalog-product-view .pbm-cue:hover{ transform:none; }
}

/* --- (2) DOKU-CENTER: Dateityp-Badge + Format/Groesse + Trust-Zeile -------- */
.catalog-product-view .rls-doku{ max-width:760px; }
.catalog-product-view .rls-dl__meta{ font-variant-numeric:tabular-nums; }
/* Format-Badge (gefaltete Ecke; dezente funktionale Typ-Tints, kein CTA) */
.catalog-product-view .rls-dl__type{
  flex:0 0 auto; position:relative;
  width:38px; height:46px; border-radius:6px;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px;
  font-size:9.5px; font-weight:800; letter-spacing:.03em;
  background:var(--surface-media); color:var(--ink-2);
}
.catalog-product-view .rls-dl__type::before{
  content:""; position:absolute; top:0; right:0;
  border-width:0 10px 10px 0; border-style:solid;
  border-color:var(--surface-card) var(--surface-card) transparent transparent;
}
.catalog-product-view .rls-dl__type[data-ext="pdf"]{ background:#f7e9ea; color:#a23b40; }
.catalog-product-view .rls-dl__type[data-ext="jpg"],
.catalog-product-view .rls-dl__type[data-ext="jpeg"],
.catalog-product-view .rls-dl__type[data-ext="png"],
.catalog-product-view .rls-dl__type[data-ext="webp"],
.catalog-product-view .rls-dl__type[data-ext="gif"]{ background:#e9f2ec; color:#2c6f47; }
.catalog-product-view .rls-dl__type[data-ext="dwg"],
.catalog-product-view .rls-dl__type[data-ext="dxf"],
.catalog-product-view .rls-dl__type[data-ext="step"],
.catalog-product-view .rls-dl__type[data-ext="stp"]{ background:var(--brand-subtle); color:var(--brand); }
/* Trust-Zeile unter den Karten */
.catalog-product-view .rls-dl-trust{
  display:flex; align-items:center; gap:10px; max-width:760px;
  margin:16px 0 0; padding:13px 16px;
  border:1px solid var(--brand-line,#c9d6ea); background:var(--brand-subtle);
  border-radius:var(--r-card); font-size:13px; color:var(--ink-2);
}
.catalog-product-view .rls-dl-trust__ic{ flex:0 0 auto; color:var(--brand); display:flex; }

/* --- (3) TECHNISCHE-DATEN-SHELL: Kennzahl-Kacheln + gruppierte Zebra ------- */
.catalog-product-view .rls-specmetrics{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px; max-width:720px; margin:0 0 26px;
}
.catalog-product-view .rls-sm{
  background:var(--surface-media); border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px 18px 16px; display:flex; flex-direction:column; gap:8px;
}
.catalog-product-view .rls-sm__val{
  font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.catalog-product-view .rls-sm__lab{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
/* Gruppierte Zebra-Tabelle. max-width erbt die Welle-A-Bindung (560px, Z.982) —
   bewusst nicht ueberschrieben (Spezifitaet + reicht fuer die Spec-Breite). */
.catalog-product-view .premium-section table.rls-spec{ border-collapse:collapse; }
/* Legacy-Zebra auf tr-Ebene (.additional-attributes tr:nth-child(odd), Z.298)
   neutralisieren: sonst faerbt sie ZUSAETZLICH zu unserer PHP-getriebenen .is-alt-
   Zebra (Zelle ueber Zeile) UND zaehlt Gruppen-Header mit -> Alternation bricht.
   NUR Desktop (>=601px): auf Mobile (<=600px) regiert der Karten-Fallback (Z.716-737),
   der genau dieselbe tr-Zebra bereits auf --surface-card setzt; den duerfen wir NICHT
   auf transparent ueberschreiben. Gleiche Spezifitaet, spaeter im File -> gewinnt. */
@media (min-width:601px){
  .catalog-product-view .premium-section .rls-spec tbody tr:nth-child(odd){ background:transparent; }
}
.catalog-product-view .rls-spec .rls-spec__grp-th{
  text-align:left; padding:18px 12px 7px 0; border:0; background:transparent;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.catalog-product-view .rls-spec .rls-spec__grp:first-child .rls-spec__grp-th{ padding-top:2px; }
.catalog-product-view .rls-spec .rls-spec__row > th,
.catalog-product-view .rls-spec .rls-spec__row > td{
  padding:11px 12px; border-bottom:1px solid var(--line);
}
.catalog-product-view .rls-spec .rls-spec__row > th.col.label{
  font-weight:400; color:var(--ink-2); text-align:left;
}
.catalog-product-view .rls-spec .rls-spec__row > td.col.data{
  text-align:right; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
}
.catalog-product-view .rls-spec .rls-spec__row.is-alt > th,
.catalog-product-view .rls-spec .rls-spec__row.is-alt > td{ background:var(--surface-media); }
.catalog-product-view .rls-spec .rls-v-norm{ color:var(--brand); }
@media (max-width:760px){
  .catalog-product-view .rls-specmetrics{ grid-template-columns:1fr 1fr; }
}
/* Mobile (<=600px): der Karten-Fallback (Z.716-737) macht aus jeder Zeile eine
   weisse Karte. Damit unsere gruppierte Zebra dort nicht bricht:
   - Gruppen-Header nicht als Karte, sondern als Label ueber den folgenden Karten;
   - Alt-Zellen-Tint zuruecknehmen -> alle Karten bleiben einheitlich ruhig. */
@media (max-width:600px){
  .catalog-product-view .premium-section .rls-spec tbody tr.rls-spec__grp{
    border:0; background:transparent; margin:8px 0 2px; padding:0;
  }
  .catalog-product-view .rls-spec .rls-spec__grp-th{ padding:2px 0 0; }
  .catalog-product-view .premium-section .rls-spec .rls-spec__row.is-alt > th,
  .catalog-product-view .premium-section .rls-spec .rls-spec__row.is-alt > td{ background:transparent; }
}
/* ==== Ende WELLE B ==== */

/* ==========================================================================
   WELLE C  (THEO 2026-07-31)  —  SCHLANKE KAUFSPALTE

   DESIGN-VORLAGE: AURA-Delta A, gezeigt im Mockup scratchpad/echtdaten-{smart50,
   eco50}.html. Meini hat das BILD dieses Mockups freigegeben (31.07.2026).
   WICHTIG UND EHRLICH (VEKTOR-Befund #2): jenes Mockup traegt EIGENES Markup
   (.buy/.price-row/.doku/.badge-sell) und laedt diese Datei NICHT. Die Freigabe
   galt also der OPTIK, nicht diesem Stylesheet. Die Masse hier sind am Mockup
   GEMESSEN (CDP-Probe: Cluster 22/22/22, Titel->Meta 8, Meta->Rating 11,
   Rating->Pillen 13, Preis->MwSt 7, Trust-Naht 18, Doku-Naht 16/16, Badge 14/14)
   — die Umsetzung am echten Magento-DOM ist erst durch die Screenshots nach dem
   dev3-Deploy belegt, nicht durch diesen Kommentar.

   LEITGEDANKE: Es wird NICHTS weggeworfen. Jedes Element der Kaufspalte bleibt
   erhalten - es wird nur GEBUENDELT (5 Cluster), GEFALTET (Staffel in die
   Preiszeile, Lieferzeit in die Lager-Zeile) und in der Lautstaerke sortiert
   (Vergleich vom Block zum Fluester-Link). Ergebnis: dieselbe Information auf
   deutlich weniger Hoehe, mit einem klaren Rhythmus statt einer Liste.

   MECHANIK (2 Bausteine, der Rest ist Feinschliff):
     (a) .product-info-main wird von `column` auf `row wrap` gestellt. Damit
         koennen ZWEI Elemente eine Zeile teilen (Art.-Nr | Vergleichen und
         Preis | Staffel und Auf-Lager | Lieferzeit), waehrend alles Uebrige
         per flex-basis:100% weiter volle Zeilen belegt. align-items:baseline
         setzt die Schriftlinien der Paare exakt aufeinander.
     (b) .product-info-price bekommt `display:contents`. Seine drei Kinder
         (Preis, MwSt-Zeile, Lager-Zeile) werden dadurch selbst Flex-Kinder von
         .product-info-main und lassen sich einzeln einsortieren - dadurch kann
         die Staffel (ein SIBLING des Preis-Wrappers) ueberhaupt erst neben den
         Preis rutschen. Kein Markup-Move, kein JS.
         DEGRADATION: Ohne display:contents-Support bleibt der Wrapper ein
         Block -> die Spalte sieht aus wie vorher. Kein Bruch, nur kein Fold.

   Scope: ausschliesslich .catalog-product-view .product-info-main (+ Kinder)
   sowie .product.media fuer das Galerie-Badge. Additiv, kein !important,
   gleiche Spezifitaet -> Datei-Reihenfolge gewinnt. Reversibel (Backups).
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * C0) Flow: Zeilen-Umbruch statt starrer Spalte
 * ------------------------------------------------------------------ */
.catalog-product-view .product-info-main{
  display:flex; flex-flow:row wrap;
  align-items:baseline;        /* Paare sitzen auf EINER Schriftlinie */
  align-content:flex-start;    /* keine gestreckten Zeilen */
}
/* Baseline: JEDES direkte Kind belegt eine volle Zeile und landet am Ende,
   falls es hier nicht namentlich einsortiert ist (SYNAPSE-Haertung gegen
   kuenftige Fremd-Bloecke, die sonst mit order:0 vor den Titel springen). */
.catalog-product-view .product-info-main > *{
  order:200; flex:0 0 100%; max-width:100%; min-width:0;
}
/* Die per display:contents hochgezogenen Preis-Kinder bekommen eine eigene
   Baseline im Preis-Cluster (79) - ein unbekanntes viertes Kind des Preis-
   Wrappers landet damit im Preisblock statt bei order:0 ganz oben. */
.catalog-product-view .product-info-main .product-info-price > *{
  order:79; flex:0 0 100%; max-width:100%; min-width:0;
}
.catalog-product-view .product-info-main > .product-info-price{ display:contents; }

/* ------------------------------------------------------------------ *
 * C1) Reihenfolge der 5 Cluster
 *     A Identitaet - B Preis/Verfuegbarkeit - C Konfiguration -
 *     D Handlung - E Vertrauen
 * ------------------------------------------------------------------ */
.catalog-product-view .product-info-main > .premium-kicker{ order:10; }
.catalog-product-view .product-info-main > .page-title-wrapper{ order:20; }
.catalog-product-view .product-info-main > .premium-sku{ order:30; }
.catalog-product-view .product-info-main > .product-social-links{ order:31; }
.catalog-product-view .product-info-main > .premium-rating-slot{ order:35; }
.catalog-product-view .product-info-main > .product-reviews-summary{ order:35; }
.catalog-product-view .product-info-main > .premium-subline{ order:40; }
.catalog-product-view .product-info-main > .factrow{ order:50; }
.catalog-product-view .product-info-main > .premium-kernspec{ order:60; }
.catalog-product-view .product-info-main .price-box{ order:70; }
.catalog-product-view .product-info-main > .prices-tier{ order:72; }
.catalog-product-view .product-info-main .price-details{ order:74; }
.catalog-product-view .product-info-main .product-info-stock-sku{ order:76; }
.catalog-product-view .product-info-main > .product.attribute.delivery_time{ order:78; }
.catalog-product-view .product-info-main > .product-add-form{ order:100; }
.catalog-product-view .product-info-main > .premium-trust{ order:110; }
.catalog-product-view .product-info-main > .premium-buymeta{ order:115; }

/* ------------------------------------------------------------------ *
 * C2) CLUSTER A - Identitaet
 *     Titel - Meta-Zeile (Art.-Nr | Vergleichen) - Rating - Fakt-Pillen
 * ------------------------------------------------------------------ */
.catalog-product-view .product-info-main > .premium-kicker{ margin:0 0 6px; }

/* Meta-Zeile: Art.-Nr links, Vergleichen rechts (margin-left:auto = space-between) */
/* 8px = am FROZEN Mockup gemessen (CDP-Probe echtdaten-smart50.html:
   Titel-Unterkante -> Meta-Oberkante = 8px). Nicht geschaetzt. */
.catalog-product-view .product-info-main .premium-sku{
  flex:0 1 auto; margin:8px 0 0; font-size:12.5px; color:var(--ink-3);
}
.catalog-product-view .product-info-main > .product-social-links{
  flex:0 0 auto; margin:8px 0 0 auto;   /* auto links = an den rechten Rand */
}
.catalog-product-view .product-info-main .product-social-links .product-addto-links{ margin:0; }
/* Vergleich = subordinater Text-Link (Ink/Grau), Hover erst Brand. Funktion unberuehrt. */
.catalog-product-view .product-info-main .product-social-links .action.tocompare{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:12.5px; font-weight:500; color:var(--ink-3); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.catalog-product-view .product-info-main .product-social-links .action.tocompare:hover{
  color:var(--brand); border-bottom-color:var(--brand); text-decoration:none;
}
.catalog-product-view .product-info-main .product-social-links .action.tocompare:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:2px;
}
.catalog-product-view .product-info-main .action.tocompare .tocompare-ico{ flex:0 0 auto; }
/* DOPPEL-ICON ZURUECKNEHMEN (am echten Screenshot gefunden, 31.07.2026):
   styles-m.css:9519 haengt via `.product-social-links .action.tocompare:before`
   ein luma-icons-Glyph '\e61e' vor den Link. Zusammen mit dem eigenen SVG aus
   compare.phtml standen dort ZWEI Vergleichs-Icons nebeneinander. Das eigene
   SVG bleibt (es passt zur Icon-Sprache der Kaufspalte), das geerbte Glyph
   geht weg. Spezifitaet 0,4,0 schlaegt die 0,3,0 des Bestands — kein !important. */
.catalog-product-view .product-info-main .product-social-links .action.tocompare::before{
  content:none;
}

/* Rating: zwei gedaempfte Umriss-Sterne statt leerer 5er-Reihe (kein Mangel-Look) */
.catalog-product-view .premium-rating-slot{ margin:11px 0 0; }
.catalog-product-view .premium-rating-slot .prs-stars{ color:#c3c8d0; }
.catalog-product-view .premium-rating-slot .prs-text{ font-size:12.5px; color:var(--ink-3); }

.catalog-product-view .product-info-main .factrow{ margin:13px 0 0; }

/* ------------------------------------------------------------------ *
 * C3) CLUSTER B - Preis & Verfuegbarkeit
 *     Preis + Staffel INLINE - MwSt/Versand als EINE Zeile -
 *     Auf Lager + Lieferzeit in EINER Zeile
 * ------------------------------------------------------------------ */
/* Naht Identitaet|Preis entfaellt - der Cluster-Abstand traegt die Trennung */
.catalog-product-view .product-info-main > .product-info-price{
  margin-top:0; padding-top:0; border-top:0;
}
.catalog-product-view .product-info-main .price-box{
  flex:0 0 auto; margin:22px 0 0;
}
/* Staffel: aus dem Kasten in die Preiszeile gefaltet. Werte kommen unveraendert
   aus dem Tier-Price-Block (tier_prices.phtml, Zone item_view) - nichts gerechnet. */
.catalog-product-view .product-info-main > .prices-tier{
  flex:0 1 auto; list-style:none; margin:22px 0 0 10px; padding:0;
}
.catalog-product-view .product-info-main .prices-tier .item{
  display:inline; padding:0; border:0; border-radius:0; background:none;
  font-size:13px; color:var(--ink-3); line-height:1.3;
}
.catalog-product-view .product-info-main .prices-tier .item::before{ content:none; }
.catalog-product-view .product-info-main .prices-tier .item .price{
  color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;
}
.catalog-product-view .product-info-main .prices-tier .item .benefit,
.catalog-product-view .product-info-main .prices-tier .item .benefit .percent{
  color:var(--ink-3); font-weight:600;
}

/* MwSt + Versand = eine kleine Zeile.
   SPEZIFITAET (VEKTOR-Befund #4): der Bestand adressiert dieses Element als
   `.product-info-main .product-info-price .price-details` (0,4,0) in Z.422-425
   und Z.829-833. Eine Regel mit `.product-info-main .price-details` (0,3,0)
   verliert dagegen — margin:7px waere still wirkungslos geblieben (der alte
   6px-Wert haette gewonnen, unbemerkt weil font-size/color zufaellig gleich
   sind). Darum hier auf 0,4,0 gehoben. */
.catalog-product-view .product-info-main .product-info-price .price-details{
  flex:0 0 100%; margin:7px 0 0; font-size:12.5px; color:var(--ink-3);
}

/* Verfuegbarkeit + Lieferzeit MERGEN: gruener Punkt + "Auf Lager"  -  Truck + Lieferzeit.
   Farbe UND Wort tragen die Aussage (A11y: nie Farbe allein). */
.catalog-product-view .product-info-main .product-info-stock-sku{
  flex:0 0 auto; align-self:center;
  display:flex; align-items:center; float:none; width:auto;
  margin:10px 0 0; padding:0; text-align:left;   /* 10px = am Mockup gemessen */
}
.catalog-product-view .product-info-main > .product.attribute.delivery_time{
  flex:0 0 auto; align-self:center;
  display:flex; align-items:center; gap:7px;
  margin:10px 0 0; font-size:12.5px; color:var(--ink-3);
}
/* Der native Art.-Nr-Zwilling steckt IM stock-sku-Wrapper und wird bereits in
   Z.403 ausgeblendet. Hier bewusst NOCH EINMAL (SYNAPSE-Hinweis "versteckte
   Kopplung"): die gefaltete Zeile soll nicht davon abhaengen, dass eine 1100
   Zeilen entfernte Regel bestehen bleibt. Faellt Z.403, stuende sonst die
   Art.-Nr. mitten in "Auf Lager · Lieferzeit". */
.catalog-product-view .product-info-main .product-info-stock-sku .product.attribute.sku{ display:none; }
/* Trennpunkt zwischen beiden - nur wenn die Lieferzeit wirklich rendert.
   Farbe: --ink-3 statt #c3c8d0 (VEKTOR-Befund #7 — der Punkt ist echter
   Text-Content, 1,68:1 waere zu schwach; die Sterne daneben duerfen blass
   bleiben, die sind aria-hidden und rein dekorativ). */
.catalog-product-view .product-info-main:has(> .product.attribute.delivery_time) .product-info-stock-sku::after{
  content:"\00b7"; margin:0 11px; color:var(--ink-3); line-height:1;
}
/* "Lieferzeit: 2-3 Tage" -> "Lieferzeit 2-3 Tage" (Doppelpunkt raus, ruhiger) */
.catalog-product-view .product-info-main .product.attribute.delivery_time .type::after{ content:none; }
.catalog-product-view .product-info-main .product.attribute.delivery_time .type{
  font-weight:400; color:var(--ink-3);
}
.catalog-product-view .product-info-main .product.attribute.delivery_time .value{
  font-weight:400; color:var(--ink-3);
}

/* ------------------------------------------------------------------ *
 * C4) CLUSTER C+D - Konfiguration & Handlung
 * ------------------------------------------------------------------ */
/* Nahtlinien vor Konfiguration und vor dem Kauf entfallen (Mockup zeigt nur
   EINE Linie vor Vertrauen und EINE vor der Doku-Zeile). */
.catalog-product-view .product-info-main > .product-add-form{
  margin-top:22px; padding-top:0; border-top:0;
}
.catalog-product-view .product-info-main .product-add-form:has(.product-options-wrapper) .box-tocart{
  margin-top:22px; padding-top:0; border-top:0;
}
.catalog-product-view .product-info-main .product-options-wrapper{ margin:0; }
/* Beratungszeile wandert ans ENDE der Handlung (unter CTA/PayPal) -> hier weg */
.catalog-product-view .product-info-main .product-options-wrapper::after{ content:none; }

/* PayPal-Zone: Hoehe NUR reservieren, wenn wirklich ein Button drin ist.
   Server-gerendert sind beide Container leer (verifiziert FPM-Render 2026-07-31:
   #paypal-smart-button = <div ...></div>) und wuerden sonst einen Trenner samt
   Label ueber einer leeren Flaeche zeigen. :not(:has(*)) trifft auch bei reinem
   Whitespace (anders als :empty) und kippt automatisch, sobald das PayPal-/
   Klarna-JS seine Kinder einhaengt. */
/* Trenner-Label schlank: zentrierter Text mit feinen Linien links/rechts
   (als Hintergrund-Verlauf gezeichnet -> kein Zusatz-Markup, kein Clipping). */
.catalog-product-view .product-info-main #paypal-smart-button{
  padding-top:0; border-top:0; margin:16px 0 0;
}
.catalog-product-view .product-info-main #paypal-smart-button::before{
  content:"oder direkt bezahlen";
  display:block; margin:0 0 12px; text-align:center;
  font-size:12px; line-height:1; letter-spacing:.02em; color:var(--ink-3);
  background:
    linear-gradient(var(--line2),var(--line2)) left center/calc(50% - 68px) 1px no-repeat,
    linear-gradient(var(--line2),var(--line2)) right center/calc(50% - 68px) 1px no-repeat;
}
/* REIHENFOLGE BEACHTEN (VEKTOR-Delta-Befund): dieser Guard MUSS hinter der
   unbedingten #paypal-smart-button-Regel stehen. `:has(*)` erbt die Spezifitaet
   seines Arguments `*` = 0, der Guard ist also spezifitaetsGLEICH mit der Regel
   darueber — stuende er davor, gewaenne dort `margin:16px 0 0` und der leere
   Container behielte seine 16px Luecke. Jetzt gewinnt der Guard per Position. */
.catalog-product-view .product-info-main #paypal-smart-button:not(:has(*)),
.catalog-product-view .product-info-main #klarna-kec-placeholder:not(:has(*)){
  /* BEWUSST KEIN display:none (VEKTOR-Befund #3): das PayPal-SDK rendert seinen
     Button in einen iFrame und VERMISST dafuer den Container. In einem
     display:none-Container ist die Breite 0 -> bekanntes PayPal-Fehlbild. Hier
     geht es um eine KAUF-Funktion, da wird nicht optimiert, sondern abgesichert.
     height:0 + overflow:hidden nimmt die Luecke optisch genauso weg, laesst den
     Container aber MESSBAR (volle Breite aus Z.542 bleibt unangetastet).
     Der Guard kippt automatisch, sobald das SDK ein Kind einhaengt — dann greift
     keine dieser Deklarationen mehr und der Button hat wieder volle Hoehe.
     Nebeneffekt-frei fuer Klarna: dessen Inline-style traegt display/visibility/
     height/width mit !important, aber KEIN margin und kein overflow — wir
     kaempfen also gar nicht erst gegen !important an. */
  height:0; overflow:hidden; margin:0; padding-top:0; border-top:0;
}
/* Beratungszeile: EINE Zeile am Ende der Handlung (Telefon-Icon + echte Nummer) */
.catalog-product-view .product-info-main .box-tocart::after{
  content:"Nicht sicher, welche Variante? Wir beraten Sie: 07472 3022980";
  display:block; margin:14px 0 0; padding:1px 0 1px 25px; min-height:17px;
  font-size:13px; line-height:1.4; color:var(--ink-2);
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='17'%20height='17'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23194383'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3%2019.5%2019.5%200%200%201-6-6%2019.8%2019.8%200%200%201-3-8.6A2%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.3%201.8.6%202.7a2%202%200%200%201-.5%202.1L8%209.6a16%2016%200%200%200%206%206l1.1-1.1a2%202%200%200%201%202.1-.5c.9.3%201.8.5%202.7.6a2%202%200%200%201%201.7%202z'/%3E%3C/svg%3E") left 1px no-repeat;
  background-size:17px 17px;
}

/* ------------------------------------------------------------------ *
 * C5) CLUSTER E - Vertrauen (2x2, kompakter) + Doku-Fluesterzeile
 * ------------------------------------------------------------------ */
.catalog-product-view .product-info-main > .premium-trust{
  margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--seam);
  gap:12px 18px;
}
.catalog-product-view .premium-trust .tr-item{ align-items:center; gap:9px; }
.catalog-product-view .premium-trust .tr-ico{ width:18px; height:18px; margin-top:0; }
.catalog-product-view .premium-trust .tr-ico svg{ width:18px; height:18px; }
.catalog-product-view .premium-trust .tr-txt{ font-size:12px; line-height:1.35; color:var(--ink-3); }
.catalog-product-view .premium-trust .tr-txt b{
  display:inline; color:var(--ink-2); font-weight:600; font-size:12px; margin:0;
}

/* Doku-FLUESTERZEILE (ersetzt die Welle-B-Kachel .pbm-cue):
   festes Label + echter Zaehler + Chevron, Ink statt Link-Blau. Empty-safe im
   Template (0 Dokumente -> gar kein Markup, also auch keine tote Haarlinie). */
.catalog-product-view .product-info-main > .premium-buymeta{
  margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--seam);
}
.catalog-product-view .pbm-line{
  display:flex; align-items:center; gap:11px; width:100%;
  color:var(--ink-2); text-decoration:none;
  transition:color .15s var(--ease-premium);
}
.catalog-product-view .pbm-line__ic{
  flex:0 0 auto; width:34px; height:34px; border-radius:9px;
  background:var(--surface-media); color:var(--ink-3);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s var(--ease-premium), color .15s var(--ease-premium);
}
.catalog-product-view .pbm-line__ic svg{ display:block; }
.catalog-product-view .pbm-line__t{ font-size:14px; font-weight:600; color:var(--ink); }
.catalog-product-view .pbm-line__n{
  flex:0 0 auto; font-size:12px; font-weight:600; color:var(--ink-3);
  background:var(--surface-media); border:1px solid var(--line);
  border-radius:999px; padding:2px 9px; line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.catalog-product-view .pbm-line__chev{ margin-left:auto; flex:0 0 auto; color:var(--ink-3); }
.catalog-product-view .pbm-line:hover{ color:var(--brand); }
.catalog-product-view .pbm-line:hover .pbm-line__t,
.catalog-product-view .pbm-line:hover .pbm-line__chev{ color:var(--brand); }
.catalog-product-view .pbm-line:hover .pbm-line__ic{ background:var(--brand-subtle); color:var(--brand); }
.catalog-product-view .pbm-line:focus-visible{
  outline:3px solid var(--brand); outline-offset:3px; border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  .catalog-product-view .pbm-line,
  .catalog-product-view .pbm-line__ic{ transition:none; }
}

/* ------------------------------------------------------------------ *
 * C6) GALERIE-BADGE (Verkaufsmarker oben links auf dem Hauptbild)
 *     Optik 1:1 wie die PLP-Pille (premium-plp.css Paragraph 4b) -> EIN System.
 *     Markup kommt empty-safe aus premium-badge.phtml; ohne gepflegten
 *     Verkaufsmarker existiert das Element gar nicht.
 * ------------------------------------------------------------------ */
.catalog-product-view .product.media{ position:relative; }
/* KEINE Skip-Link-Sonderregel hier — bewusst, und das ist die interessantere
   Erkenntnis: der Verdacht "Badge verdeckt den fokussierten Galerie-Skip-Link"
   (WCAG 2.4.11) wurde geprueft und WIDERLEGT. styles-m.css:14812 gibt
   `.action.skip:focus` bereits `position:absolute; z-index:15`; weder
   `.action-skip-wrapper` noch `.product.media` oeffnen einen Stacking-Kontext
   -> 15 schlaegt die 3 des Badges ohnehin. Eine "Absicherung" mit z-index:4 haette
   den Bestandswert GESENKT und Lumas absolute Positionierung ueberschrieben —
   also genau das Gegenteil bewirkt. Merksatz: eine Absicherung darf einen
   geerbten z-index nur anheben, nie senken. */
.catalog-product-view .product.media .rls-pdp-badge{
  position:absolute; top:14px; left:14px; z-index:3;
  display:inline-block; max-width:calc(100% - 28px);
  padding:5px 11px; border-radius:999px;
  background:var(--brand); color:#ffffff; border:1px solid var(--brand);
  font-size:12px; line-height:1.15; font-weight:600; letter-spacing:.005em;
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 3px rgba(16,32,64,.12);
  pointer-events:none;                 /* klaut der Galerie keinen Klick */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ------------------------------------------------------------------ *
 * C7) MOBILE - gleiche Cluster, etwas dichter
 * ------------------------------------------------------------------ */
@media (max-width:760px){
  .catalog-product-view .product-info-main .price-box,
  .catalog-product-view .product-info-main > .prices-tier,
  .catalog-product-view .product-info-main > .product-add-form,
  .catalog-product-view .product-info-main .product-add-form:has(.product-options-wrapper) .box-tocart,
  .catalog-product-view .product-info-main > .premium-trust{
    margin-top:18px;
  }
  .catalog-product-view .product-info-main > .prices-tier{ margin-left:9px; }
  .catalog-product-view .product-info-main > .premium-trust{ padding-top:16px; }
  /* Trust bleibt 2-spaltig (kompakter Kasten statt vier langer Zeilen) */
  .catalog-product-view .premium-trust{ grid-template-columns:1fr 1fr; gap:11px 14px; }
  .catalog-product-view .premium-trust .tr-txt,
  .catalog-product-view .premium-trust .tr-txt b{ font-size:11.5px; }
  .catalog-product-view .product.media .rls-pdp-badge{ top:10px; left:10px; }
  .catalog-product-view .product-info-main .box-tocart::after{ font-size:12.5px; }
}
/* Sehr schmal: Staffel darf unter den Preis fallen (statt zu quetschen) */
@media (max-width:400px){
  .catalog-product-view .product-info-main > .prices-tier{ flex-basis:100%; margin:6px 0 0; }
}
/* ==== Ende WELLE C ==== */

/* ==========================================================================
 * WELLE D - LESBARKEITS-UNTERGRENZE IM MAGEZON-PRODUKTCONTENT (THEO, 31.07.2026)
 * --------------------------------------------------------------------------
 * BEFUND (echter Chrome/CDP auf dev3, gemessen - nicht geraten):
 *   `html{font-size:10px}` (62,5%-Konvention) kommt aus dem ELTERN-Theme und
 *   gilt auf dev3 UND Live. Der Magezon-Produkttext ist aber gegen einen
 *   16px-Root geschrieben -> jeder rem-Wert rendert bei 0,625x:
 *   `.8125rem` soll 13px sein und rendert 8,125px; `1rem` rendert 10px.
 *   Gemessene Extreme vorher: .oxx-kicker 7,8px | .oxx-stat-src 8,125px |
 *   .oxx-table th/td 10px | summary 10,625px.
 *
 * REICHWEITE (belegt, VEKTOR-Stichprobe 5 PDPs + 4 Kategorieseiten):
 *   Das `.oxx`-Content-System liegt heute NUR auf oxxify-eco-50 (Pilot des
 *   neuen Premium-Contents). Welle D wirkt also aktuell auf genau dieser Seite
 *   und ist der Vorbau fuer den Rollout dieses Content-Musters.
 *
 * WAS HIER BEWUSST NICHT STEHT (und warum das die interessantere Haelfte ist):
 *   Geplant war zusaetzlich eine Regel gegen harte `style="font-size:10px"` im
 *   Builder-Content. SYNAPSE hat den Gesamtkatalog gezaehlt: 398 Magezon-
 *   Beschreibungen, 5074 style-Attribute, davon 0 mit 7-11px. Die kleinen
 *   Werte stecken alle in `<style>`-Bloecken - und dorthin kommt ein
 *   Attribut-Selektor prinzipiell nie. Die Regel waere tot gewesen; sie ist
 *   deshalb gestrichen statt "vorsorglich" stehengeblieben.
 *   Der Trust-Streifen ("3% SKONTO", "Top BERATUNG: 07472/3022980"), der im DOM
 *   wie Produktinhalt aussieht, ist in Wahrheit `cms_block "cro_header"` und
 *   wird ueber Zentralweb/m2theme/Magento_Theme/layout/default.xml in
 *   `header.container` gerendert - seitenweit, auf JEDER Seite. Ihn von einer
 *   PDP-Datei aus anzuheben haette denselben Streifen in zwei Groessen erzeugt,
 *   sichtbar springend beim Navigieren. Seine 10px sind ebenfalls zu klein,
 *   aber das ist eine seitenweite Entscheidung (premium-global.css) und gehoert
 *   Meini vorgelegt, nicht als Nebenwirkung eines PDP-Patches.
 *
 * WARUM HIER UND NICHT AM CONTENT:
 *   Ein Theme-Fix wirkt auf jedes Produkt, das dieses Content-Muster nutzt;
 *   Content-Nacharbeit waere Produkt fuer Produkt von Hand. Der Root-Wert
 *   bleibt UNANGETASTET (waere eine globale Regression ueber das ganze Theme).
 *
 * WARUM PX UND NICHT REM:
 *   `rem` bezieht sich immer auf die Wurzel - eine font-size am Magezon-
 *   Container repariert rem-Werte NICHT. px ist hier der robuste Weg.
 *
 * WARUM NICHT DER ELEGANTE WEG (`--fs-body` / `.oxx{font-size}` anheben):
 *   GEPRUEFT UND VERWORFEN - `.oxx-narrow{max-width:70ch}` haengt an der
 *   geerbten Basisschrift. Ein Anheben von 10,625px auf 16px haette die
 *   Textspalte still um ~50% verbreitert (ch = Breite der "0" in der EIGENEN
 *   Schriftgroesse). VEKTOR hat gegengemessen: mit diesem Patch bleibt
 *   `.oxx-narrow` auf allen 7 Breakpoints exakt gleich breit.
 *   Merksatz: eine Schriftgroesse anzuheben aendert lautlos jede ch-/em-Laenge,
 *   die daran haengt.
 *
 * MASSSTAB: Zielwert = der vom Autor GEMEINTE Wert (sein rem-Wert x 16),
 *   gedeckelt durch die kleinste Ueberschrift des Blocks (`.oxx h2` = 15,78px
 *   bei 360px Viewport). Deshalb steht `summary` auf 15px und NICHT auf 16px:
 *   sonst waere der Aufklapper auf schmalen Geraeten groesser als die
 *   Ueberschrift darueber. Es wird nur angehoben, die Reihenfolge bleibt.
 *
 * BEWUSST NICHT ANGEFASST (gehoert AURA, nicht diesem Patch):
 *   Die Rollen OBERHALB des Fliesstextes (`--fs-h2`, `--fs-display`,
 *   `--fs-lead`) kleben ebenfalls am 0,625x-Root - `.oxx h2` rendert 18,5px
 *   statt der gemeinten 29,6px. Das mitzuziehen ist eine Design-Entscheidung
 *   und laeuft in dieselbe ch-Falle (`.oxx-hero .oxx-display{max-width:22ch}`).
 *   Nebenbefund: `.oxx-display` ist ein <h2>, also schlaegt `.oxx h2` (0,1,1)
 *   die Klasse (0,1,0) - die Display-Stufe des Autors kommt nie an.
 *
 * EMPTY-SAFE: jede Regel haengt an `.oxx` / `.oxx-*` INNERHALB
 *   `.catalog-product-view .premium-section__body` (= der Beschreibungs-
 *   Container aus details.phtml:69). Produkte ohne dieses Content-Muster
 *   veraendern sich um kein Pixel; Header, Footer, Kategorie, Warenkorb und
 *   Checkout bleiben unberuehrt - dort greift keiner dieser Selektoren.
 *   Kein `!important` noetig: die Spezifitaet reicht ueberall aus.
 *
 * Korrigiert bewusst die frueher hier notierte Grenze "oxx-Content =
 * Datenseite, nicht hier gestylt" (Kommentare weiter oben in dieser Datei) -
 * Meini-Entscheid 31.07.2026: was theme-seitig heilbar ist, wird theme-seitig
 * geheilt.
 * ========================================================================== */

/* --- D1) Token-Korrektur im .oxx-System -----------------------------------
   Der Content bringt sein eigenes Token-Set mit (`.oxx{--fs-*}`). Diese zwei
   Variablen zu korrigieren ist praeziser als Klassen zu ueberschreiben - und
   erreicht als EINZIGER Weg auch den Absatz mit
   `style="font-size:var(--fs-small)"`: ein style-Attribut schlaegt jeden
   Selektor, aber die Variable darin wird trotzdem aus der Kaskade aufgeloest.
   (VEKTOR gegengemessen: dieser Absatz geht 8,5px -> 13px.)
   --fs-body bleibt bewusst unberuehrt (siehe ch-Falle oben).
   Spezifitaet (0,3,0) > Autor (0,1,0) -> kein !important noetig. */
.catalog-product-view .premium-section__body .oxx{
  --fs-kicker:12.5px;   /* war .78rem = 7,8px | Autor-Absicht .78rem@16 = 12,48px */
  --fs-small:13px;      /* war .85rem = 8,5px | Autor-Absicht .85rem@16 = 13,6px  */
}

/* --- D2) Rollen, die der Autor hart in rem notiert hat --------------------
   Je Rolle EIN px-Wert; die Abstufung des Originals bleibt erhalten:
   Stat-Zahl 22,5 > Label 15 > Quelle 13   (vorher 22,5 > 10,6 > 8,1). */
.catalog-product-view .premium-section__body .oxx-stat-src{
  font-size:13px;       /* war .8125rem = 8,125px | Autor-Absicht exakt 13px */
}
.catalog-product-view .premium-section__body .oxx-stat-label{
  font-size:15px;       /* war 1.0625rem = 10,625px | Absicht 17px, aber .oxx-stat-num
                           bleibt 22,5px -> 15px haelt die Stufe zur Zahl sichtbar */
}
.catalog-product-view .premium-section__body .oxx-wrg2-cap{
  font-size:14px;       /* war .9rem = 9px | Autor-Absicht 14,4px. Das <strong>
                           in der Bildunterschrift erbt mit. */
}
/* Tabellenzellen ab Tablet: 15px = eine Stufe unter dem 16px-Fliesstext
   (Tabellenkonvention) und deutlich ueber der Lesbarkeitsgrenze.
   `:is(th,td)` ergibt (0,3,1) und schlaegt `.oxx-table th, .oxx-table td` (0,1,1). */
.catalog-product-view .premium-section__body .oxx-table :is(th,td){
  font-size:15px;       /* war 1rem = 10px */
}
/* ...aber der leise Kopf der Tabelle bleibt bewusst kleiner als die Zellen -
   das ist die Gestaltung des Autors (Versalien + letter-spacing). Ohne diese
   Zeile wuerde die Regel darueber (0,3,1) den thead auf 15px mitziehen;
   (0,3,2) haelt ihn unten. */
.catalog-product-view .premium-section__body .oxx-table thead th{
  font-size:13px;       /* = --fs-small, war 8,5px */
}
/* Einheit hinter der grossen Kennzahl ("%", "dB(A)"). Ehrlich: im heutigen
   Wertebereich liefert max() immer die 12px, weil .5em der 22,5px-Zahl nur
   11,25px ergibt. max() bleibt als Boden stehen, falls die Zahl je groesser
   gesetzt wird - dann waechst die Einheit wieder im Verhaeltnis des Autors mit. */
.catalog-product-view .premium-section__body .oxx-stat-num small{
  font-size:max(12px, .5em);   /* war .5em = 11,25px */
}
/* Aufklapp-Fragen (FAQ): erben die Basisschrift des Blocks. Direkt auf
   summary gesetzt statt ueber die Basis - summary haengt an keiner ch-Breite.
   15px statt 16px, damit die Frage auch bei 360px unter der Ueberschrift
   (dort 15,78px) bleibt. */
.catalog-product-view .premium-section__body .oxx summary{
  font-size:15px;       /* war geerbt 10,625px */
}

/* --- D2-MOBIL) Die Tabelle ist der Sonderfall ----------------------------
   VEKTOR hat gemessen, was hier leicht zu uebersehen ist: eine Zellgroesse ist
   keine reine Typo-Aenderung, sie ist eine BREITEN-Aenderung. Mit 15px waechst
   die 4-spaltige Datenblatt-Tabelle von 292px auf 401px; bei 390px und 414px
   Viewport entstuende dadurch ein seitliches Wischen, das es vorher NICHT gab
   (die SEITE selbst scrollt in keiner Variante - der Ueberlauf bleibt im
   Wrapper mit overflow-x:auto gefangen; document.scrollWidth auf allen 7
   Breakpoints unveraendert).
   Gemessene Varianten (Tabellenbreite / Wrapper):
                             360px        390px        414px
     15px                    -            401/292 UE   -
     12px + padding 8/4      304/262 UE   304/292 UE   316/316 ok
     12px + padding 8/2      288/262 UE   292/292 ok   316/316 ok  <== gewaehlt
     11px + padding 8/4      282/262 UE   292/292 ok   316/316 ok
   Gewaehlt ist 12px + engeres Padding und NICHT die 11px-Variante: beide
   loesen 390px und 414px vollstaendig, aber 12px haelt die Lesbarkeitsgrenze
   ein, um die es in diesem Patch ueberhaupt geht. Bei 360px bleibt ein
   Ueberlauf - der bestand dort aber schon VOR diesem Patch (292/262), und mit
   288px ist die Tabelle jetzt schmaler als im Ausgangszustand.
   8,5px auf Mobile zurueckzugeben waere die Krankheit gewesen, die dieser
   Patch behandelt. Der saubere Endzustand ist ein Karten-Fallback wie bei
   `.additional-attributes` weiter oben - das ist eine Layout-Entscheidung
   fuer AURA und bewusst NICHT Teil dieses Patches.
   600px statt 599px, weil die Datei bereits das Paar 600/601 fuehrt (kein
   sechster Breakpoint, kein toter Punkt bei exakt 600px). */
@media (max-width:600px){
  .catalog-product-view .premium-section__body .oxx-table :is(th,td){
    font-size:12px; padding:8px 2px;
  }
  .catalog-product-view .premium-section__body .oxx-table thead th{
    font-size:12px;
  }
}

/* ==== Ende WELLE D ==== */

/* ------------------------------------------------------------------ *
 * C8) GALERIE-TUEREN unter der Galerie (AURA-Spec „pdp-galeriekacheln",
 *     Meini-Freigabe am Bild 31.07.2026)
 *     (C8, nicht C7: diese Datei fuehrt weiter oben bereits ein
 *      „C7) MOBILE" — zwei Abschnitte gleicher Nummer waeren beim
 *      naechsten Patch eine Falle.)
 *
 *     Markup: premium-mediadoors.phtml, gerendert als letztes Kind von
 *     `product.info.media` (= innerhalb `.product.media`, direkt nach den
 *     Fotorama-Thumbnails). Bis zu zwei gestapelte Tueren:
 *       #downloads  (Unterlagen, mit echter Zaehler-Pille)
 *       #technik    (Technische Daten, ohne Zaehler, ab 4 Spec-Zeilen)
 *
 *     GESTAPELT (column), nicht nebeneinander: die Galeriespalte ist
 *     gemessen 634 px breit; zwei Tueren nebeneinander lassen je ~191 px
 *     Textbreite, der Untertitel braucht ~230 px -> Umbruch. Und mit nur
 *     EINER Tuer saehe eine halbe Reihe kaputt aus.
 *
 *     BREAKPOINT-UMSCHALTUNG — ein Markup, zwei Ansichten:
 *       < 768 px : Tueren aus, Fluesterzeile in der Kaufspalte bleibt.
 *                  (Mobil folgt unter der Galerie sofort der Titel — dort ist
 *                   keine tote Flaeche; Tueren wuerden Preis und Warenkorb-
 *                   Knopf rund 170 px nach unten schieben.)
 *       >= 768 px: Tueren an, Fluesterzeile aus.
 *                  -> genau EIN sichtbarer Doku-Einstieg je Ansicht.
 *     768 px ist der Breakpoint, den dieses Theme ohnehin fuehrt
 *     (styles-l.css media="screen and (min-width: 768px)", custom.css:586)
 *     und an dem auch der ATF-Zweispalter oben in dieser Datei umschaltet.
 *
 *     🔴 DIE AUSBLENDUNG IST BEDINGT, NICHT UNBEDINGT (VEKTOR-Blocker,
 *     31.07.2026). CSS und Template sind ZWEI Deploy-Artefakte. Eine
 *     unbedingte Regel `@media(min-width:768px){ .premium-buymeta{display:none} }`
 *     nimmt den Doku-Einstieg weg, sobald die CSS draussen ist — die
 *     ersetzende Tuer erscheint aber nur BEDINGT (Template deployed,
 *     Layout-Cache frisch, `attachment.tab` vorhanden, >=1 Anhang). Im
 *     Zwischenzustand haette die Kaufspalte auf Desktop GAR KEINEN
 *     Doku-Einstieg — ein stiller Verlust, der nicht auffaellt, weil nichts
 *     kaputt aussieht; es fehlt nur etwas. Am echten Render in vier
 *     Szenarien gemessen.
 *     Darum `:has()`: die Fluesterzeile geht genau dann, wenn die Tuer
 *     wirklich im DOM steht. Merksatz: Wird A durch B ersetzt, darf das
 *     Ausblenden von A nie unbedingt sein.
 *     Spezifitaet (0,7,0) gegen die Basisregel (0,3,0) -> gewinnt ohne
 *     `!important`. NICHT (0,8,0): `:has()` traegt nach CSS Selectors L4
 *     §17 KEINE eigene Klassen-Zaehlung, sondern nur die Spezifitaet seines
 *     Arguments (hier `.rls-door` + `[href=…]` = 2). Gezaehlt wird:
 *     .catalog-product-view + .column + .main + (Argument 2) +
 *     .product-info-main + .premium-buymeta = 7.
 *     Belegt tragfaehig: im gesamten Theme gibt es keine einzige
 *     `display`-Deklaration auf `.premium-buymeta` und kein `!important`
 *     (alle sieben Fundstellen geprueft, spaeteste Z.1534 mit (0,3,0)
 *     setzt nur margin/padding/border-top).
 *     `:has()` ist in dieser Datei laengst Baseline
 *     (Z.309, 505, 774, 951, 1441, 1493); `.product.media` und
 *     `.product-info-main` sind belegte Geschwister unter `.column.main`
 *     (am echten Render mit DOMXPath nachgemessen, nicht angenommen).
 *     Nebeneffekt, ausdruecklich gewollt: die Ein-Einstieg-Garantie wird
 *     damit automatisch statt nur verabredet.
 *
 *     DEGRADATION (Hausregel dieser Datei, vgl. Z.308/773/993): In einer
 *     Engine ohne `:has()` wird der ganze Selektor ungueltig -> die
 *     Fluesterzeile bleibt sichtbar, obwohl die Tuer da ist. Ergebnis:
 *     ZWEI Einstiege statt einem. Das ist die sichere Fehlrichtung
 *     (doppelt statt null) und darum bewusst so gebaut.
 *
 *     Hover und Fokus sind ABSICHTLICH byte-gleich zu `.rls-dl__link`
 *     (den Doku-Karten unter #downloads): dieselbe Geste, dieselbe Antwort —
 *     eine Signatur-Interaktion im ganzen PDP, keine zweite erfunden.
 *     Keine neuen Tokens; --brand ist bereits #194383.
 * ------------------------------------------------------------------ */
.catalog-product-view .rls-mediadoors{ display:none; }

@media (min-width:768px){
  .catalog-product-view .rls-mediadoors{
    display:flex; flex-direction:column; gap:12px; margin-top:24px;
  }
  /* Fluesterzeile NUR ausblenden, wenn die ersetzende Tuer wirklich da ist. */
  .catalog-product-view .column.main:has(.rls-door[href="#downloads"]) .product-info-main > .premium-buymeta{
    display:none;
  }
}

.catalog-product-view .rls-door{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface-card); text-decoration:none; color:var(--ink);
  transition:border-color .15s var(--ease-premium),
             box-shadow .15s var(--ease-premium),
             transform .15s var(--ease-premium);
}
.catalog-product-view .rls-door:hover{
  border-color:var(--brand); box-shadow:var(--shadow-rest); transform:translateY(-1px);
}
.catalog-product-view .rls-door:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-color:var(--brand);
}
.catalog-product-view .rls-door__ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px;
  background:var(--brand-subtle); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.catalog-product-view .rls-door__ico svg{ display:block; }
.catalog-product-view .rls-door__body{
  display:flex; flex-direction:column; min-width:0; flex:1 1 auto;
}
.catalog-product-view .rls-door__hd{
  display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap;
}
.catalog-product-view .rls-door__t{
  font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3;
}
.catalog-product-view .rls-door__n{
  flex:0 0 auto; font-size:12px; font-weight:600; color:var(--ink-3);
  background:var(--surface-media); border:1px solid var(--line);
  border-radius:999px; padding:2px 9px; line-height:1.4;
  font-variant-numeric:tabular-nums;
  transition:background-color .15s var(--ease-premium),
             border-color .15s var(--ease-premium),
             color .15s var(--ease-premium);
}
.catalog-product-view .rls-door__sub{
  font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.35;
}
.catalog-product-view .rls-door__chev{
  margin-left:auto; flex:0 0 auto; color:var(--ink-3);
}
.catalog-product-view .rls-door:hover .rls-door__chev{ color:var(--brand); }
.catalog-product-view .rls-door:hover .rls-door__n{
  background:var(--brand-subtle); border-color:var(--brand-subtle); color:var(--brand);
}
@media (prefers-reduced-motion:reduce){
  .catalog-product-view .rls-door,
  .catalog-product-view .rls-door__n{ transition:none; }
  .catalog-product-view .rls-door:hover{ transform:none; }
}
/* ==== Ende C8 (Galerie-Tueren) ==== */

/* ==================================================================
   C9) HARMONIE-PASS KOPFZONE  —  AURA-Spec 31.07.2026, Bau THEO 01.08.2026
   Rein optische Angleichung von Galeriespalte und Kaufspalte.
   Keine neuen Elemente. Keine Inhalte entfernt. Kein Markup-Eingriff.

   WAS SICH AN FOTORAMAS EIGENEN MASSEN AENDERT (VEKTOR-Befund #2, gemessen —
   eine fruehere Fassung dieses Kommentars behauptete faelschlich, die
   Inline-Breite bleibe unangetastet):
   - Inline-BREITE der Buehne: H1 nimmt dem Placeholder seinen 1px-Rahmen,
     dadurch weitet sich der Container um 2px und Fotorama misst bei der
     naechsten Vermessung `inlineW = 634px` statt 632px.
   - Weil `box-sizing:border-box` den Rahmen einrechnet, Fotorama die
     Frame-Breite aber aus der CONTAINER-Breite ableitet, wird das Foto
     rechts um ~1px beschnitten (gemessen 1,08px @1440 / 1,00px @390;
     Grundlinie -0,02px). Das Foto ist `object-fit:contain`-letterboxed,
     der Verlust liegt an der Kante. BEWUSST AKZEPTIERT: die Alternative
     (inset-Ring) ist am Render verworfen, weil das Foto ihn verdeckt.
   - Inline-HOEHE der Thumb-Leiste: bleibt 94px. Eine fruehere Fassung
     dieses Kommentars nahm an, sie folge der Kachelhoehe und falle mit H3
     auf 90 — GEMESSEN nach dem Deploy: sie bleibt 94px bei 90px-Kacheln,
     die 4px Leerraum liegen unter der Kachel. Genau deshalb steht in H4
     margin-top:18px und nicht 22px.

   Nur vorhandene Tokens. KEIN !important — die Spezifitaet reicht;
   die geschlagene Fundstelle steht bei jeder Regel.
   Spezifitaets-Angaben unten sind nachgerechnet (VEKTOR-Befund #5):
   `.product.media` sind ZWEI Klassen, der Basis-Scope ist also 0,3,0 und
   die typische Regel damit 0,4,0 — nicht 0,3,0.
   ================================================================== */

/* --- H1 -----------------------------------------------------------
   EIN Rahmen statt zwei. Heute traegt eine Regel Rahmen+Radius+Ton
   auf .gallery-placeholder UND .fotorama__stage — die ineinander
   liegen (premium-pdp.css §2, Z.76-82). Ergebnis: zwei Hairlines,
   zwei 16px-Radien, und weil die Buehne breiter ist als ihr Clip-
   Elternteil, faellt ihre rechte Hairline weg.
   GEMESSEN dev3 1440: placeholder r=743,8 / stage r=744,8 -> die
   Buehne ragt 1px hinaus und wird vom overflow:hidden des Eltern-
   teils beschnitten. Ursache: die Buehne ist content-box, Fotoramas
   Inline-Breite (632px) zaehlt den Rahmen also NICHT mit.
   Der Rahmen gehoert der Buehne — als echter border, nicht als
   inset-Schatten: die Kinder werden auf die INNENkante geclippt und
   koennen ihn nie ueberdecken (inset-Ring waere vom absolut
   positionierten Foto verdeckt worden — am Render belegt und
   verworfen).
   Nebeneffekt: der getoente Boden unter den Thumbnails verschwindet.
   Schlaegt: premium-pdp.css §2 Z.76-82 (gleiche Spezifitaet 0,4,0, spaeter
   in derselben Datei -> gewinnt ueber die Reihenfolge).
------------------------------------------------------------------- */
.catalog-product-view .product.media .gallery-placeholder{
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
}
.catalog-product-view .product.media .fotorama__stage{
  box-sizing:border-box;          /* Fotoramas Inline-Breite schliesst den Rahmen jetzt EIN
                                     -> die Buehne ist nie breiter als ihr Clip-Elternteil,
                                        die rechte Hairline faellt nicht mehr weg. */
  background:var(--surface-media);
  border:1px solid var(--line);   /* echter Rahmen: Kinder werden auf die Innenkante
                                     geclippt und koennen ihn nie ueberdecken. */
  border-radius:var(--r-card);
  overflow:hidden;
}
/* H1-Nachtrag THEO (Auftrags-Pruefpunkt „Ladebild"): `.gallery-placeholder__image`
   ist das server-gerenderte Bild VOR der Fotorama-Init (LCP-Kandidat). Es hat
   selbst `border-radius:0` — GEMESSEN mit blockiertem Fotorama-JS: 632x632,
   radius 0px — und war bisher nur durch `overflow:hidden` + `border-radius:16px`
   des Placeholders rund. Da H1 beides vom Placeholder nimmt, wuerde das Ladebild
   als harte Kante aufblitzen und beim Init auf rund springen. Eine Deklaration,
   rein additiv, keine Groessenaenderung (bewusst KEIN border — der wuerde die
   Box auf 634 aufblasen und beim Fotorama-Wechsel 2px Layoutversatz erzeugen).
   Spezifitaet 0,4,0; einzige border-radius-Deklaration auf diesem Element.
   Reine Paint-Eigenschaft -> kein CLS (VEKTOR bestaetigt).
   Gerendert wird das Element NICHT von Magento_Catalog, sondern von
   `Sparsh_ProductLabel::product/view/gallery.phtml` Z.54 (eingehaengt via
   Sparsh/ProductLabel/.../catalog_product_view.xml:7) — SYNAPSE-Befund.
   Haette Sparsh die Klasse umbenannt, waere die Regel lautlos tot. */
.catalog-product-view .product.media .gallery-placeholder__image{
  border-radius:var(--r-card);
}

/* --- H2 -----------------------------------------------------------
   Ruhe im Bild. mage/gallery/gallery.css:1029-1033 legt auf JEDES
   Produktfoto zwei 80px breite, volle Hoehe hohe Schleier
   rgba(255,255,255,.3) (die Pfeil-Klickflaechen). Sie bleichen
   sichtbar zwei senkrechte Streifen ins Foto. Die Flaeche bleibt
   klickbar und tastaturbedienbar — sie ist nur im Ruhezustand
   unsichtbar.
   Schlaegt: gallery.css:1029 (0,1,0) und :hover/:active 1034/1038
   (je 0,2,0) mit 0,4,0.
------------------------------------------------------------------- */
.catalog-product-view .product.media .fotorama__arr{
  background-color:transparent;
}
/* Der Schleier wird zum Bedienelement: dieselbe 80px-Box, nur rund und
   begrenzt. Keine Groessenaenderung, damit der Sprite-Versatz stimmt.
   EHRLICH ZUM KONTRAST (VEKTOR-Befund #3 — eine fruehere Fassung behauptete
   hier "garantiert Kontrast auf JEDEM Bildgrund", das ist unbelegt und
   falsch): das Chevron im Sprite ist TEILTRANSPARENT (~rgb(35) bei Alpha
   0,52), es wandert also mit dem Untergrund. Gemessen auf der Scheibe:
   weiss 3,32:1 · Foto 3,21:1 · schwarz 2,94:1 (unter 3:1). Auf weissen
   Freistellern hat die Scheibe selbst 1,00:1 zu ihrem Grund, ist dort also
   unsichtbar — der Traeger-Zweck greift dann nicht.
   TROTZDEM DRIN: gegenueber dem Ist-Zustand (2,57:1) ist es auf JEDEM Grund
   besser. Die verbleibende Luecke (dunkle Fotos, weisse Freisteller) ist ein
   eigener A11y-Vorgang, kein Harmonie-Thema. */
.catalog-product-view .product.media .fotorama__arr .fotorama__arr__arr{
  border-radius:50%;
  background-color:rgba(255,255,255,.82);
  box-shadow:0 1px 3px rgba(16,24,40,.12);
  transition:background-color .15s var(--ease-premium);
}
/* 🔴 NIE `transform` auf .fotorama__arr__arr setzen — dort steckt Fotoramas
   eigene Zentrier-Transform (gemessen: matrix(1,0,0,1,-40,-40) aus
   gallery.css:552 translate3d(-50%,-50%,0)). Am echten Render belegt: ein
   zusaetzliches translateX/scale ueberschreibt sie, die Scheibe springt um
   +40px und ragt 25px ueber die Buehnenkante, wo overflow:hidden sie
   anschneidet (gemessen 1440: Scheibe rechts 768,8 / Buehne rechts 743,8;
   390: 400/375).
   Der Abstand zur Bildkante gehoert deshalb an die ELTERN-Box.
   Schlaegt: gallery.css:563/569 (.fotorama__arr--prev{left:0}) mit 0,4,0.
   Scheibe = 0,5,0, Hover/Focus = 0,6,0. */
.catalog-product-view .product.media .fotorama__arr--prev{ left:12px; }
.catalog-product-view .product.media .fotorama__arr--next{ right:12px; }
.catalog-product-view .product.media .fotorama__arr:hover .fotorama__arr__arr,
.catalog-product-view .product.media .fotorama__arr:focus-visible .fotorama__arr__arr{
  background-color:#fff;
}
@media (prefers-reduced-motion:reduce){
  .catalog-product-view .product.media .fotorama__arr .fotorama__arr__arr{ transition:none; }
}

/* --- H3 -----------------------------------------------------------
   Ein Ring, eine Farbe. css/media.css setzt auf den aktiven Thumbnail
   `border:2px solid #006bb4` — ein Luma-Blau, das in keinem Token
   vorkommt und dem --brand-Navy des Warenkorb-Knopfs widerspricht.
   Der 2px-Rahmen macht die aktive Kachel ausserdem 4px breiter und
   2px hoeher als die uebrigen (GEMESSEN dev3 1440: aktiv 94x94,
   inaktiv 90x90) — daraus misst Fotorama seine Nav-Inline-Hoehe 94px,
   obwohl die Kacheln 90px sind.
   Ergebnis hier: alle Kacheln exakt gleich gross, gleiche Grundlinie,
   EIN Markenring, der dem 8px-Radius der Kachel folgt.

   🔴 WARUM NICHT `box-shadow:inset` AUF `.fotorama__thumb` (verworfen,
   AURA-Entscheid 01.08.2026 nach Render-Beleg): `.fotorama__thumb` ist
   position:relative 90x90 und enthaelt genau ein Kind — ein
   `<img class="fotorama__img">` mit position:absolute, 90x90,
   object-fit:fill, das die Kachel zu 100% abdeckt. Ein inset-Schatten
   des Elternteils wird VOR positionierten Nachkommen gemalt, das Foto
   liegt also darueber: der Ring waere komplett unsichtbar (am echten
   dev3-Render und im 3x-Zoom belegt — es gab dann GAR KEINE
   Aktiv-Markierung mehr). Das ist dieselbe Falle wie bei der Buehne in
   H1, nur eine Ebene tiefer.
   Der Ring gehoert deshalb auf eine eigene Ebene UEBER dem Foto:
   ein ::after auf dem RAHMEN. Fotoramas Fokus-Ring sitzt auf
   `.fotorama__thumb:after` (gallery.css:189-211, z-index 1000) — ein
   anderes Element, keine Kollision, Tastatur-Fokus bleibt unangetastet.

   Bewusst OHNE transition: die Galerie-Auswahl muss sofort sitzen.
   Schlaegt: media.css (0,3,0) mit 0,4,0 (Geometrie) bzw. 0,6,0 (Thumb) und
   0,5,1 (das ::after). Der Aktiv-Border in
   media.css traegt KEIN !important (nur `padding` dort hat eines,
   am File geprueft) -> Spezifitaet reicht, kein !important noetig.
------------------------------------------------------------------- */
/* 1) Geometrie: alle Kacheln exakt 90x90, media.css-Border neutralisiert.
      position:relative ist Versicherung fuer den Bezugsrahmen des ::after
      (gallery.css:366 setzt es bereits — hier explizit, falls das faellt). */
.catalog-product-view .product.media .fotorama__nav__frame--thumb{
  position:relative;
  border-width:0;
}
/* 2) Der alte, unsichtbare Ring kommt ersatzlos raus
      (premium-pdp.css §2 Z.91-93 setzte hier outline:2px solid var(--brand)
      mit outline-offset:-2px — vom selben Foto verdeckt). */
.catalog-product-view .product.media .fotorama__nav__frame--thumb.fotorama__active .fotorama__thumb{
  outline:0;
  box-shadow:none;
}
/* 3) Der Ring als eigene Ebene UEBER dem Foto. Kein `border` auf dem
      Pseudo-Element (waere box-sizing-abhaengig), sondern zwei inset-Schatten:
      0-2px Marke, 2-3px weisser Trenn-Hairline.
      Der Hairline ist kein Schmuck, und zwar UEBER DEN GANZEN FOTOTONRAUM
      belegt (nicht an einer Stichprobe):
        - Navy #194383 traegt 3:1 gegen jedes Foto HELLER als ~#8f8f8f (143)
        - weisser Hairline traegt 3:1 gegen jedes Foto DUNKLER als ~#959595 (149)
      Die beiden Baender UEBERLAPPEN (143-149) -> es gibt keinen Fototon, bei
      dem beide unter 3:1 fallen. Der Ring ist damit WCAG-1.4.11-fest, egal
      welches Produktfoto kommt. Auf hellen Freistellern ist der Hairline
      unsichtbar (1,00:1) — dort traegt Navy mit 9,67:1.
      Solid #fff statt rgba(255,255,255,.92): ueber dem gemessenen realen
      Kachelton #8c8c8c komponiert .92 zu effektiv #F6F6F6 = 3,11:1 —
      bestuende knapp, aber ohne Reserve fuer ein helleres Foto. */
.catalog-product-view .product.media .fotorama__nav__frame--thumb.fotorama__active::after{
  content:'';
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  border-radius:8px;
  box-shadow:inset 0 0 0 2px var(--brand), inset 0 0 0 3px #fff;
  pointer-events:none;
}
/* 4) 🔴 PFLICHT-ZUSATZ zu (3) — VEKTOR-Befund #1, pixel-belegt.
   gallery.css:438-440 hebt bei :focus das KIND `.fotorama__thumb` auf
   `z-index:2`. Damit malt das Foto in Stapelstufe 9, waehrend der Ring aus (3)
   mit `z-index:auto` in Stufe 8 bleibt -> der Aktiv-Ring wird bei
   TASTATUR-FOKUS uebermalt und verschwindet.
   Das waere eine echte Regression: heute bleibt die Aktiv-Markierung bei Fokus
   sichtbar, weil media.css' Rahmen AUSSERHALB der Thumb-Box sitzt.
   Pixelbeweis (CDP scale 4, linke Kachelkante, 1440): mit Fokus ohne diese
   Regel x2 = 134,134,134 (= Foto) statt 25,67,131 (= Ring); mit dieser Regel
   x2 = 25,67,131 und x0/x1 = 11,87,145 / 8,92,148 (Fokus-Glanz darueber) —
   beide Indikatoren koexistieren, der Fokus liegt oben.
   Der Fokus-Ring selbst (`.fotorama__thumb:after`, z-index 1000, gallery.css:189)
   steigt dadurch in den umgebenden Stapelkontext und bleibt vorn.
   Spezifitaet 0,6,0 schlaegt gallery.css 0,3,0. */
.catalog-product-view .product.media .fotorama__nav__frame:focus .fotorama__thumb{
  z-index:auto;
}

/* --- H3b ----------------------------------------------------------
   Dasselbe auf Mobil: mage/gallery/gallery.css:400 faerbt den aktiven
   Galerie-Punkt mit #FF5501 (Luma-Orange) — die zweite Fremdfarbe der
   Kopfzone (gemessen 390: rgb(255,85,1)). ACHTUNG (VEKTOR-Befund #3):
   `--ink-3` ist im C9-Scope NICHT #6b7280 — premium-pdp.css:613 setzt
   `.catalog-product-view{--ink-3:var(--pdp-text-muted)}`, gemessen #575756
   (7,23:1 gegen Weiss statt 4,83:1). Der inaktive Punkt wird dadurch
   kontrastreicher, nicht schwaecher. Nur Farbe, keine Groesse
   (Ziel-/Groessenfrage gehoert in einen eigenen A11y-Durchgang, nicht
   in den Harmonie-Pass).
   Schlaegt: gallery.css:400 (0,2,0) und :422 (0,1,0) mit 0,6,0 / 0,5,0.
------------------------------------------------------------------- */
.catalog-product-view .product.media .fotorama__nav--dots .fotorama__dot{
  border-color:var(--ink-3);
}
.catalog-product-view .product.media .fotorama__nav--dots .fotorama__active .fotorama__dot{
  background-color:var(--brand);
  border-color:var(--brand);
}

/* --- H4 -----------------------------------------------------------
   EIN vertikaler Takt. GEMESSEN dev3 1440/1024/768 war: Buehne->Thumbs
   20px (css/media.css .fotorama__nav-wrap--horizontal{margin-top:20px}),
   Thumbs->Tuer 25px (C8 margin-top:24px + 1px Rahmen der Huelle).
   Die Kaufspalte arbeitet zwischen ihren Clustern mit 22px
   (Warenkorb-Block -> Trust-Reihe). Also: 22px zwischen den drei
   Raengen der Galeriespalte — dasselbe Mass, das die Kaufspalte
   daneben benutzt. 12px innerhalb der Tuer-Gruppe bleibt
   (Innenabstand einer Gruppe, kein Rang-Abstand).
   Schlaegt: media.css (0,2,0) mit 0,4,0; C8 Z.1866 (gleich 0,2,0,
   spaeter in derselben Datei).
------------------------------------------------------------------- */
@media (min-width:768px){
  .catalog-product-view .product.media .fotorama__nav-wrap--horizontal{
    margin-top:22px;
  }
  /* 18px, NICHT 22 — am Ist-Wert entschieden, nicht an der Erwartung.
     GEMESSEN nach dem Deploy (1440/1024/768, alle drei identisch):
     Fotorama behaelt seine Nav-Inline-Hoehe 94px, obwohl die Kacheln durch
     H3 nur noch 90px hoch sind. Die 4px Leerraum liegen vollstaendig UNTER
     der Kachel (oben 0,0px / unten 4,0px gemessen). Mit margin-top:22 waere
     der OPTISCHE Abstand Kachel->Tuer also 26px gewesen, waehrend
     Buehne->Kachel 22px misst — der Takt haette genau dort gebrochen, wo er
     sitzen soll. 18 + 4 = 22 optisch. */
  /* 🔴 BEZUGSGROESSE, nicht vergessen (SYNAPSE 01.08.2026):
     18 = 22 - 4. Gilt NUR, solange Fotorama die Nav-Inline-Hoehe bei 94px
     haelt, waehrend die Kachel 90px misst. Diese 18 koppelt eine CSS-
     Konstante an einen zur LAUFZEIT von JS gesetzten Wert. Aendert sich die
     Nav-Hoehe je — andere Thumb-Maasse in `etc/view.xml`, andere Bildanzahl,
     Fotorama-Update — stimmt der Abstand nicht mehr, und es faellt niemandem
     auf, weil die 18 einmal richtig aussah. `Impruf/rlstheme` hat KEIN
     eigenes `etc/view.xml`; die Bildmaasse kommen aus dem Parent
     `Zentralweb/m2theme`. Wer dort die Thumb-Groesse aendert, muss hier
     nachmessen: gewuenscht ist OPTISCH 22px von der Kachelunterkante. */
  .catalog-product-view .rls-mediadoors{
    margin-top:18px;
  }
}

/* --- H5 -----------------------------------------------------------
   EINE linke Kante — als ABSICHERUNG, nicht als Heilmittel.
    EHRLICH (VEKTOR-Befund #6): der 1px-Versatz zwischen Buehne/Leiste
   (l=111) und Tuer (l=110) kam NICHT von `margin:auto` — das loest real
   auf 0,016px auf — sondern vom 1px-Rahmen der Galerie-Huelle, den H1
   ohnehin entfernt. Diese Regel behebt also nichts, was H1 nicht schon
   behebt; sie haelt die Leiste nur fest an der linken Kante, falls die
   Huelle je wieder eine Breite bekommt. Bewusst behalten, weil billig
   und weil sie eine kuenftige Regression abfaengt.
   Schlaegt: gallery.css:91-94 (0,1,0) mit 0,4,0.

   🔴 ACHTUNG FUER DIE NAECHSTE RUNDE (SYNAPSE-Auflage E, 01.08.2026):
   `.fotorama__nav--thumbs` und `.fotorama__nav--dots` sind BEM-Modifier
   DESSELBEN Elements `.fotorama__nav`. Diese Regel greift mobil also
   ebenfalls — am Container der Galerie-PUNKTE. Sie bleibt dort nur
   deshalb folgenlos, weil die Punkte gar nicht ueber `margin:auto`
   mittig sitzen, sondern ueber `text-align:center`
   (gallery.css:376-378, am File verifiziert). Wer diese Zeile spaeter
   auf `margin:0` verallgemeinert ODER das `text-align` anfasst, kippt
   die mobilen Punkte nach links. Gegengeprueft: 390px, Punkte mittig. */
.catalog-product-view .product.media .fotorama__nav{
  margin-left:0;
  margin-right:auto;
}
/* ==== Ende C9 (Harmonie-Pass Kopfzone) ==== */