/* =======================================================
   RedeGold-Shop: Produktseite im Look der Ratgeber
   (Vorlage: templates/content-single-product.php)
   ======================================================= */

.single-product div.product.rg-produkt { overflow: visible; } /* Storefront schneidet sonst Bühne und graue Bänder ab */
.rg-produkt {
  --rg-gold: #C5A059;
  --rg-gold-text: #563B0C;
  --rg-gold-soft: rgba(197, 160, 89, 0.35);
  --rg-ink: #111;
  --rg-text: #333;
  --rg-muted: #4b5563;
  --rg-line: rgba(17, 17, 17, 0.1);
  --rg-bg-soft: #F7F7F7;
  --rg-green: #4A7C59;
  --rg-green-dark: #3B6347;
  --rg-head: 'Roboto', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  color: var(--rg-text);
}

.rg-produkt h1, .rg-produkt h2, .rg-produkt h3, .rg-p-titel {
  font-family: var(--rg-head);
  font-weight: 500;
  color: var(--rg-ink);
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-wrap: balance;
}
.rg-produkt .gold { color: var(--rg-gold); }
.rg-produkt a { color: var(--rg-gold-text); }

.rg-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-text);
  margin: 0;
}

.rg-nur-mobil { display: none; }
@media (max-width: 767px) {
  .rg-nur-mobil { display: block; }
  .rg-nur-desktop { display: none; }
}

/* --- 1. Kopf: Bild und Texte links, Kaufbereich rechts; dahinter das Produktbild
       mit weißem Schleier (wie bei Avada). Die Bühne reicht hinter die Brotkrumen hoch. --- */
.single-product .site-content { padding-top: 0; }
.rg-p-buehne {
  margin: 0 calc(50% - 50vw);
  padding: 2.5rem calc(50vw - 50%) 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.93) 60%, #fff 100%),
    var(--rg-p-bild, none) center 30% / cover no-repeat;
}
/* mit Brotkrumen davor: Bühne reicht hinter die Brotkrumen hoch (Brotkrumen sind 56 px hoch) */
/* --rg-bc-hoehe misst shop.js (Brotkrumen können umbrechen) */
.storefront-breadcrumb + .site-content .rg-p-buehne { margin-top: calc(-1 * var(--rg-bc-hoehe, 56px)); padding-top: calc(var(--rg-bc-hoehe, 56px) + 2.5rem); }
.rg-p-kopf {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 4rem;
  align-items: start;
  padding-bottom: 4rem;
}
@media (max-width: 960px) {
  .rg-p-kopf { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

/* Einstieg: Kaufbereich schiebt sich von rechts herein, Texte links steigen leicht auf */
.rg-p-kasse { animation: rg-rein-seite .9s cubic-bezier(.22, .61, .36, 1) .2s both; }
.rg-p-haupt > :not(.rg-p-bild) { animation: rg-hoch .8s cubic-bezier(.22, .61, .36, 1) .55s both; }
@keyframes rg-rein-seite { from { opacity: 0; transform: translateX(44px); } }
@keyframes rg-hoch { from { opacity: 0; transform: translateY(22px); } }

/* Produktbild: erst mit Schleier (warmer Creme-Verlauf, Filmkorn, wie auf den Ratgebern),
   dann gleitet einmal der Lichtstreifen („Wusch“) darüber und der Schleier hebt sich.
   shop.js setzt .rg-auf, sobald das Bild geladen ist. */
.rg-p-bild .woocommerce-product-gallery__image { position: relative; overflow: hidden; }
.rg-p-bild .woocommerce-product-gallery__image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(255, 250, 240, 0.55) 0%, rgba(255, 255, 255, 0.35) 55%, rgba(250, 238, 214, 0.5) 100%);
  background-size: 220px 220px, 100% 100%;
  box-shadow: inset 0 0 70px rgba(70, 50, 15, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.rg-p-bild .woocommerce-product-gallery__image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
}
.rg-p-bild img { filter: saturate(0.9) contrast(0.96) sepia(0.06); }
.rg-p-bild:not(.rg-auf) .woocommerce-product-gallery__image img { opacity: 0; }
.rg-p-bild.rg-auf .woocommerce-product-gallery__image img {
  animation: rg-bild-rein 1.1s cubic-bezier(.22, .61, .36, 1) both;
  filter: none;
  transition: filter 1.4s ease 1s;
}
.rg-p-bild.rg-auf .woocommerce-product-gallery__image::before { animation: rg-wusch 1.5s cubic-bezier(.22, .61, .36, 1) .6s both; }
.rg-p-bild.rg-auf .woocommerce-product-gallery__image::after { opacity: 0; transition: opacity 1.5s ease 1s; }
@keyframes rg-bild-rein { from { opacity: 0; transform: scale(1.04); } }
@keyframes rg-wusch { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* Bild ist ein Link zur Produktbeschreibung */
.rg-p-bild a { cursor: pointer; }
.rg-p-zur-beschreibung { margin: .9rem 0 0; text-align: right; }
.rg-p-zur-beschreibung + .rg-p-titel { margin-top: 2.1rem; }
.rg-p-zur-beschreibung a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rg-gold-text);
  text-decoration: none;
}
.rg-p-zur-beschreibung a:hover { color: var(--rg-gold); }

@media (prefers-reduced-motion: reduce) {
  .rg-p-kasse, .rg-p-haupt > :not(.rg-p-bild), .rg-p-bild.rg-auf .woocommerce-product-gallery__image img { animation: none; }
  .rg-p-bild .woocommerce-product-gallery__image::before, .rg-p-bild .woocommerce-product-gallery__image::after { display: none; }
  .rg-p-bild:not(.rg-auf) .woocommerce-product-gallery__image img { opacity: 1; }
  .rg-p-bild img { filter: none; }
}

.rg-produkt .rg-p-titel {
  font-size: clamp(2.4rem, 1.9rem + 2.2vw, 2.9rem); /* Handy rund 39 px (vorher 32), Desktop wie bisher */
  overflow-wrap: break-word;
  hyphens: auto;
  font-weight: 400;
  margin: 1.4rem 0 0;
}
.rg-p-titel a { color: var(--rg-gold-text); font-weight: inherit; text-decoration: none; }
p.rg-p-titel { color: var(--rg-gold-text); } /* Handy-Kopie des Titels (ohne Link) in derselben Farbe wie die H1 */
.rg-p-titel a:hover { color: var(--rg-gold); }
.rg-p-titel-linie::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--rg-gold);
  margin-top: .45em;
}
/* Unterzeile („Ihre Rede schön gestaltet …“): feine Roboto wie die Versal-Überschriften, aber normal geschrieben */
.rg-p-unterzeile {
  font-family: var(--rg-head);
  font-weight: 200;
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--rg-ink);
  margin: 1rem 0 0;
  text-wrap: balance;
}
.rg-p-unterzeile.rg-nur-desktop { margin-top: 2.8rem; }
/* Handy: Titel und Unterzeile stehen über dem Bild – Luft davor, damit nichts am Bild klebt */
@media (max-width: 767px) { .rg-nur-mobil + .rg-p-bild { margin-top: 1.8rem; } }

.rg-p-bild .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.rg-p-bild img { width: 100%; height: auto; display: block; }
.rg-p-bild .flex-control-thumbs { display: flex; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.rg-p-bild .flex-control-thumbs li { width: calc((100% - 1.5rem) / 4) !important; max-width: 80px; }
.rg-p-bild .flex-control-thumbs img { width: 100%; height: auto; }
.rg-p-bild .onsale { display: none; }

.rg-p-verkauf h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  margin: 3rem 0 1rem;
}
.rg-p-verkauf { padding-right: 5%; }
.rg-p-verkauf p { margin: 0 0 1rem; line-height: 1.5; }
.rg-p-fazit {
  font-style: italic;
  color: var(--rg-muted);
}

.rg-p-vertrauen {
  font-size: 15px;
  font-weight: 600;
  color: #745f2a;
  margin: 1.5rem 0;
}

.rg-p-garantien {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  border-top: 1px solid var(--rg-line);
}
.rg-p-garantien li {
  border-bottom: 1px solid var(--rg-line);
  padding: .7rem 0 .7rem 1.6rem;
  position: relative;
  font-size: 15px;
}
.rg-p-garantien li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--rg-gold);
  font-weight: 700;
}
.rg-p-garantien a { color: var(--rg-text); text-decoration: none; }
.rg-p-garantien a:hover { color: var(--rg-gold-text); }

/* Kaufbereich: Karte wie die Autorenbox der Ratgeber, bleibt beim Scrollen stehen */
.rg-p-kasse {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--rg-line);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  position: sticky;
  top: 2rem;
}
@media (max-width: 960px) {
  .rg-p-kasse { position: static; }
}
.rg-p-kasse .rg-p-titel { margin-top: 0; font-size: clamp(2.3rem, 1.4rem + 1.5vw, 2.75rem); } /* Desktop rund 43 px (vorher 37); zu lange Wörter verkleinert shop.js */
/* einspaltig steht der Kaufbereich in voller Breite: Titel dort so groß wie links */
@media (max-width: 960px) { .rg-produkt .rg-p-kasse .rg-p-titel { font-size: clamp(2.4rem, 1.9rem + 2.2vw, 2.9rem); } }
.rg-p-kasse > p { font-size: 17px; line-height: 1.5; }

.rg-p-autor {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--rg-line);
}
.rg-p-autor > a { flex: 0 0 auto; } /* sonst schrumpft der Link um das Bild auf ein schmales Hochformat */
.rg-p-autor img { display: block; width: 96px; height: 96px; object-fit: cover; object-position: 50% 20%; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); } /* Original: 93 px */
.rg-p-autor-satz {
  font-family: var(--rg-head);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--rg-ink);
  margin: 0;
}

.rg-p-zahlwege img { max-width: 100%; height: auto; display: block; margin: 1.2rem 0; }
/* Zahlungsarten unter dem Kaufbereich (Seiten mit Autorenblock): mit Linie abgesetzt, als Vertrauenszeile */
.rg-p-kaufen + .rg-p-zahlwege { display: block; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--rg-line); }
.rg-p-kaufen + .rg-p-zahlwege img { margin: 0; }
.rg-p-zahlwege + .rg-p-rechnung { margin-top: 1.3rem; }

.rg-p-kaufen {
  border-top: 1px solid var(--rg-line);
  padding-top: 1.6rem;
}
/* Storefront gibt dem Preis-Absatz oben und unten je 1,4 em Rand (bei 2rem Schrift rund 45 px) */
.single-product div.product .rg-p-kaufen p.price { margin: 0 0 .3rem; }
.single-product div.product .rg-p-kaufen p.price:has(.redegold-anfrage-btn) { margin-bottom: 1rem; }
.rg-p-kaufen .wgm-info:last-child { margin-bottom: 0; }
.rg-p-kaufen .price {
  font-family: var(--rg-head);
  font-size: 2rem !important;
  font-weight: 400;
  color: var(--rg-ink);
  margin: 0 0 .3rem;
}
/* Betrag samt €-Zeichen in der Linkfarbe (Dunkelgold), wie der verlinkte Titel */
.rg-p-kaufen .price .amount, .rg-p-kaufen .woocommerce-variation-price .amount { color: var(--rg-gold-text); font-weight: 400; }
.rg-p-kaufen .price ins { font-weight: 400; text-decoration: none; }
.rg-p-kaufen .wgm-info,
.rg-p-kaufen .woocommerce-de_price_taxrate,
.rg-p-kaufen .wgm-tax,
.rg-p-kaufen .price + div,
.rg-p-kaufen .legacy-itemprop-offers { font-size: 13px; color: var(--rg-muted); }

/* Varianten-Auswahl */
.rg-p-kaufen table.variations { border: 0; margin: 1rem 0; width: 100%; }
.rg-p-kaufen table.variations th,
.rg-p-kaufen table.variations td { display: block; padding: 0; border: 0; background: none !important; text-align: left; }
.rg-p-kaufen table.variations th { font-size: 13.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-text); padding-top: .8rem; }
.single-product div.product .rg-p-kaufen table.variations select { width: 100%; max-width: none; box-sizing: border-box; margin: .4rem 0 0; }
.rg-p-kaufen .reset_variations { font-size: 13px; }

.rg-p-kaufen form.cart { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; margin: 1rem 0 0; }
.rg-p-kaufen form.variations_form { display: block; }
.rg-p-kaufen .woocommerce-variation-add-to-cart { display: flex; gap: .8rem; margin-top: 1rem; }
/* Storefronts Clearfix (::before/::after) wären sonst unsichtbare Flex-Elemente mit Lücke an beiden Rändern */
.single-product div.product .rg-p-kaufen form.cart::before, .single-product div.product .rg-p-kaufen form.cart::after,
.single-product div.product .rg-p-kaufen .woocommerce-variation-add-to-cart::before,
.single-product div.product .rg-p-kaufen .woocommerce-variation-add-to-cart::after { display: none; }
.single-product div.product .rg-p-kaufen form.cart .quantity { margin: 0; float: none; }
.rg-p-kaufen .quantity .qty { width: 4em; height: 100%; text-align: center; padding-left: .3em; padding-right: .3em; }
.rg-p-kaufen .single_add_to_cart_button { min-width: 0; line-height: 1.25; padding-left: 1rem !important; padding-right: 1rem !important; } /* darf umbrechen, damit er in schmalen Kaufbereichen bündig bleibt */

.rg-p-kaufen .single_add_to_cart_button,
.rg-p-kaufen .redegold-anfrage-btn {
  background: var(--rg-green) !important;
  color: #fff !important;
  border: 0;
  font-weight: 700;
  font-size: 17px;
  padding: 1rem 2rem;
  text-decoration: none;
  transition: background-color .2s;
}
.rg-p-kaufen .single_add_to_cart_button { flex: 1; }
.rg-p-kaufen .redegold-anfrage-btn { display: block; box-sizing: border-box; width: 100%; text-align: center; line-height: 1.35; font-family: 'Inter', system-ui, sans-serif; }
.rg-p-kaufen .redegold-anfrage-btn + br,
.rg-p-kaufen .redegold-anfrage-btn + br + br { display: none; }
.rg-p-kaufen .single_add_to_cart_button:hover,
.rg-p-kaufen .redegold-anfrage-btn:hover { background: var(--rg-green-dark) !important; }

.rg-p-rechnung { margin-top: .7rem; font-size: 14px; color: var(--rg-muted); }
.rg-p-rechnung summary { cursor: pointer; color: var(--rg-gold-text); font-weight: 600; }
.rg-p-rechnung img { max-width: 100%; height: auto; margin: .6rem 0; }

/* --- 2. Bewertungs-Kästen (Produktseite und Startseite) --- */
.rg-wertungen {
  background: var(--rg-bg-soft, #F7F7F7);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 4rem calc(50vw - 50%) 4.5rem;
  text-align: center;
}
.rg-wertungen > .rg-label { margin-bottom: 2rem; }
.rg-wertungen-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 767px) { .rg-wertungen-raster { grid-template-columns: 1fr; } }
.rg-wertung {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-top: 3px solid var(--rg-gold, #C5A059);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  padding: 2.2rem 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.rg-wertung:hover { transform: translateY(-4px); box-shadow: 0 28px 50px rgba(0, 0, 0, 0.09); }
.rg-wertung-logo { height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; }
.rg-wertung-logo img { max-height: 64px; max-width: 180px; width: auto; height: auto; object-fit: contain; }
.rg-wertung-sterne { color: var(--rg-gold, #C5A059); font-size: 1.3rem; letter-spacing: .18em; margin: 0 0 .4rem; }
.rg-wertung-zahl { margin: 0; font-family: var(--rg-head); color: var(--rg-ink, #111); }
.rg-wertung-zahl strong { font-size: 3rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.rg-wertung-zahl span { font-size: 1rem; color: var(--rg-muted, #4b5563); margin-left: .25em; }
.rg-wertung-urteil { font-size: 14px; color: var(--rg-muted, #4b5563); margin: .5rem 0 1.6rem; }
.rg-wertung-links { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin: auto 0 0; }
.rg-wertung-knopf {
  display: inline-block;
  background: var(--rg-green, #4A7C59);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  padding: .8rem 1.6rem;
  text-decoration: none !important;
  transition: background-color .2s;
}
.rg-wertung-knopf:hover { background: var(--rg-green-dark, #3B6347); }
.rg-wertung-geben { font-size: 14px; color: var(--rg-gold-text, #563B0C) !important; text-decoration: none; }
.rg-wertung-geben:hover { text-decoration: underline; }

/* --- 3. Beschreibung und 5. Schlussblock: weiße Karte in breitem Rahmen aus dem Produktbild mit Schleier --- */
.rg-p-rahmen {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(2.5rem, 6vw, 5.5rem) calc(50vw - 50%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.88) 100%),
    var(--rg-p-bild, none) center / cover no-repeat;
}
@media (min-width: 1025px) and (hover: hover) {
  .rg-p-rahmen { background-attachment: scroll, fixed; }
}
.rg-p-karte {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  padding: clamp(1.8rem, 4.5vw, 4rem) clamp(1.3rem, 5vw, 4.5rem);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.09);
  font-size: 19.8px; /* +10 % auf Franks Wunsch (vorher 18) */
  line-height: 1.5;
}
.rg-augenbraue {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rg-gold);
  margin: 0 0 .7rem;
}
.rg-augenbraue + *, .rg-augenbraue + * + * { margin-top: 0 !important; }
[id="produktbeschreibung"] { scroll-margin-top: 90px; } /* ohne JavaScript; mit JavaScript rechnet shop.js den Abstand */

/* Satzspiegel der Beschreibung: Abstände in em der Grundschrift (18 px). Überschriften
   stehen näher am folgenden als am vorigen Text; ein Absatz mit Doppelpunkt hält sich an seine Liste. */
.rg-p-beschreibung > *, .rg-p-beschreibung .wp-block-group__inner-container > * { margin-top: 0; }
.rg-p-beschreibung p { margin: 0 0 1.15em; }
.rg-p-beschreibung h2 {
  font-family: var(--rg-head);
  font-weight: 200;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: calc(clamp(1.6rem, 3vw, 2.2rem) * 1.15);
  line-height: 1.2;
  margin: 3.4em 0 1.3em;
}
.rg-p-beschreibung .rg-augenbraue + h2 { margin-bottom: 1.5em; }
.rg-p-beschreibung h2 .gold, .rg-p-beschreibung h2 strong { font-weight: 300; }
.rg-p-beschreibung h3 { font-size: 1.3rem; line-height: 1.3; margin: 2.6em 0 .65em; }
.rg-p-beschreibung h2 + h3, .rg-p-beschreibung h2 + .rg-nur-mobil + h3,
.rg-p-beschreibung hr + h3, .rg-p-beschreibung .wp-block-separator + h3 { margin-top: 0; }
.rg-p-beschreibung ul, .rg-p-beschreibung ol { margin: 0 0 1.6em; }
.rg-p-beschreibung p:has(+ ul), .rg-p-beschreibung p:has(+ ol) { margin-bottom: .7em; }
.rg-p-beschreibung .wp-block-separator { margin: 2.6em 0; }
.rg-p-beschreibung .rg-kasten { margin: 2em 0 2.2em; }
.rg-p-beschreibung .rg-kasten + h3 { margin-top: 2.8em; }

/* Zitat: Roboto Light mit goldener Linie, Übersetzung klein darunter; danach deutlich Luft */
.rg-p-beschreibung blockquote {
  margin: 2em 0 3em;
  padding: .3em 0 .3em 1.5em;
  border-left: 3px solid var(--rg-gold);
  font-family: var(--rg-head);
  font-weight: 300;
  font-style: normal;
  font-size: 1.55em;
  line-height: 1.35;
  color: var(--rg-ink);
}
.rg-p-beschreibung blockquote p { margin: 0; }
.rg-p-beschreibung blockquote p:first-child { font-style: italic; }
.rg-p-beschreibung blockquote p + p, .rg-p-beschreibung blockquote cite {
  margin-top: .7em;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .55em;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .02em;
  color: var(--rg-muted);
}

/* Rahmen-Bilder (mehrere Bilder in einem Listenpunkt): produktseite.js baut daraus Karten nebeneinander */
.rg-bildkarten { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .9rem 0 .4rem; }
.rg-bildkarte {
  flex: 1 1 200px;
  max-width: 260px;
  margin: 0;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.06);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.07);
  padding: 1rem 1rem .9rem;
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
}
.rg-bildkarte img { display: block; margin: 0 auto .7rem; max-width: 100%; height: auto; }
.rg-bildkarte em { display: block; color: var(--rg-muted); font-size: 13.5px; margin-top: .2em; }
.rg-p-beschreibung img,
.rg-p-beschreibung iframe,
.rg-p-beschreibung video,
.rg-p-beschreibung table { max-width: 100%; height: auto; }
.rg-p-beschreibung { overflow-wrap: break-word; }
.rg-p-beschreibung::after { content: ''; display: table; clear: both; }

/* Bausteine aus den Produktbeschreibungen (WordPress-Blöcke mit eigener Klasse) */
.rg-kasten {
  background: #F6FBF7; /* Hauch Grün (vorher Elfenbein #FFFFF7) */
  border: 1px solid var(--rg-line);
  border-left: 3px solid #889A58; /* Goldgrün: Mitte zwischen Gold #C5A059 und Knopf-Grün #4A7C59 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 1.4rem 1.8rem;
  margin: 1.8rem 0;
  color: #222;
}
.rg-kasten p:last-child { margin-bottom: 0; }
.rg-haken { list-style: none; margin: 1rem 0; padding: 0; }
.rg-haken li { position: relative; padding: .5rem 0 .5rem 1.8rem; }
.rg-haken li::before { content: '✓'; position: absolute; left: 0; color: var(--rg-gold); font-weight: 700; }
.rg-haken li.rg-hinweis::before { content: '!'; }
.rg-haken li.rg-hinweis { color: var(--rg-muted); line-height: 1.5; }
/* Bestellblock am Schluss der Beschreibung (produktseite.php, rgshop_bestell_kasten) */
.rg-p-beschreibung .rg-bestellen { border-left-width: 3px; padding: 1.8rem 2rem 2rem; background: #F6FBF7; } /* Hauch Grün (Ton des Knopfs), so zart wie das Elfenbein der übrigen Kästen */
/* Überschrift-Stil nur für Kästen, die mit „Bestellen Sie jetzt …“ beginnen (kurze Zeile); lange Sätze bleiben Fließtext */
.rg-bestellen-kopf p:first-child { font-family: var(--rg-head); font-size: 1.3em; line-height: 1.35; color: var(--rg-ink); margin-bottom: .8em; }
.rg-p-beschreibung .rg-bestellen ul { margin: 0 0 1.4em !important; }
.rg-bestellen .rg-bestellen-zeile { margin: 0; }
.rg-bestellen-knopf {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: var(--rg-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 17px;
  padding: .95rem 1.9rem;
  text-decoration: none !important;
  transition: background-color .2s;
}
.rg-bestellen-knopf:hover { background: var(--rg-green-dark); }
.rg-bestellen-knopf span { font-size: 1.1em; line-height: 1; }
/* Extras nach dem Bestellblock: Pluszeichen statt Haken */
.rg-plus { list-style: none; margin: 0; padding: 0; }
.rg-plus li { position: relative; padding: .45rem 0 .45rem 1.9rem; }
.rg-plus li::before {
  content: '+';
  position: absolute;
  left: .1rem;
  top: .2rem;
  font-family: var(--rg-head);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--rg-gold);
}
.rg-schritte { margin: 1rem 0; padding-left: 1.4rem; }
.rg-schritte li { padding: .4rem 0 .4rem .4rem; }
.rg-schritte li::marker { color: var(--rg-gold); font-weight: 700; }
.rg-p-beschreibung .wp-block-columns { gap: 2rem; }
.rg-p-beschreibung .wp-block-buttons { margin: 1.4rem 0; }
.rg-p-beschreibung .wp-block-button__link { background: var(--rg-green); color: #fff; font-weight: 700; padding: .9rem 1.8rem; border-radius: 0; text-decoration: none; }
.rg-portrait { float: right; width: 25%; max-width: 200px; margin: 0 0 1rem 4%; }
.rg-portrait img { width: 100%; height: auto; display: block; }
@media (max-width: 600px) { .rg-portrait { width: 35%; } }
@media (max-width: 400px) {
  .rg-p-kaufen .single_add_to_cart_button { white-space: normal; min-width: 0; }
}

/* --- 4. Kundenstimmen: drei auf einmal, laufen von selbst weiter, Punkte zeigen die Seiten --- */
.rg-stimmen {
  background: var(--rg-bg-soft, #F7F7F7);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 4.5rem calc(50vw - 50%) 4rem;
}
.rg-stimmen-kopf { text-align: center; margin-bottom: 2.6rem; }
.rg-stimmen-kopf .rg-label { margin-bottom: .6rem; }
.rg-stimmen-kopf h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0; }
.rg-stimmen-fenster { overflow: hidden; margin: -10px -1.4rem 0; padding: 10px 1.4rem 44px; }
.rg-stimme[hidden] { display: none; }
.rg-stimmen-liste {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.rg-stimme {
  flex: 0 0 calc((100% - 3rem) / 3);
  margin: 0 1.5rem 0 0;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-top: 3px solid var(--rg-gold, #C5A059);
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.07);
  padding: 2rem 1.9rem 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.rg-stimme::before {
  content: '\201C';
  position: absolute;
  top: .6rem;
  right: 1.4rem;
  font-family: var(--rg-head);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--rg-gold, #C5A059);
  opacity: .25;
}
/* feste Reihe (weniger als 9 Stimmen): drei nebeneinander, kleiner untereinander */
.rg-stimmen-fest .rg-stimmen-liste { flex-wrap: wrap; gap: 1.5rem; transform: none; }
.rg-stimmen-fest .rg-stimme { margin: 0; }
@media (max-width: 960px) { .rg-stimmen-fest .rg-stimme { flex-basis: 100%; } }
@media (max-width: 960px) { .rg-stimme { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 600px) { .rg-stimme { flex-basis: 100%; } }
.rg-stimme-sterne { color: var(--rg-gold, #C5A059); letter-spacing: .15em; font-size: 1rem; margin: 0 0 1rem; }
.rg-stimme-text {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-size: 17.6px;
  line-height: 1.5;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rg-stimme.offen .rg-stimme-text { display: block; -webkit-line-clamp: unset; }
.rg-stimme-text p { margin: 0 0 .6em; }
.rg-stimme-mehr {
  align-self: flex-start;
  background: none !important;
  border: 0;
  padding: .3rem 0 0;
  color: var(--rg-gold-text, #563B0C) !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.rg-stimme-autor {
  display: flex;
  gap: .9rem;
  align-items: center;
  margin: auto 0 0;
  padding-top: 1.4rem;
}
.rg-stimme-autor img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.rg-stimme-autor span { display: flex; flex-direction: column; line-height: 1.35; }
.rg-stimme-autor strong { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rg-ink, #111); }
.rg-stimme-autor a { font-size: 13px; color: var(--rg-gold-text, #563B0C); text-decoration: none; }

.rg-stimmen-steuerung { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .6rem; }
.rg-stimmen-punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; max-width: 60%; }
.rg-stimmen-punkt {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1.5px solid var(--rg-gold, #C5A059) !important;
  background: transparent !important;
  border-radius: 50% !important;
  cursor: pointer;
  transition: background-color .3s, transform .3s;
}
.rg-stimmen-punkt[aria-selected="true"] { background: var(--rg-gold, #C5A059) !important; transform: scale(1.15); }
.rg-stimmen-pfeil, .rg-stimmen-pause {
  width: 40px;
  height: 40px;
  padding: 0;
  background: #fff !important;
  border: 1px solid var(--rg-gold-soft, rgba(197, 160, 89, .35)) !important;
  color: var(--rg-text, #333) !important;
  font-size: 20px;
  line-height: 1;
  border-radius: 50% !important;
  cursor: pointer;
}
.rg-stimmen-pause { font-size: 11px; letter-spacing: -1px; }
.rg-stimmen-pause[aria-pressed="true"] { color: var(--rg-gold-text, #563B0C) !important; }
.rg-stimmen-pfeil:hover, .rg-stimmen-pause:hover { border-color: var(--rg-gold, #C5A059) !important; }

/* --- 5. Schlussblock (Karte im Rahmen, siehe Abschnitt 3) --- */
.rg-p-schluss h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 1.4rem; }
.rg-p-kasten {
  background: #F6FBF7;
  border: 1px solid var(--rg-line);
  border-left: 3px solid #889A58; /* Goldgrün */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 1.4rem 1.8rem;
  margin: 1.8rem 0;
  color: #222;
}
.rg-p-kasten p:last-child { margin-bottom: 0; }
#preisanzeige-und-bestellung { scroll-margin-top: 90px; }

/* --- Handy: mehr Breite für Text, kompakte Bewertungs-Kästen --- */
@media (max-width: 600px) {
  /* Bildrahmen nur als schmaler Saum, Karte mit knapperem Innenabstand: Textspalte rund 40 statt 30 Zeichen */
  .rg-p-rahmen { padding: 1.6rem 10px; } /* der Rahmen reicht über die volle Fensterbreite: 10 px Saum genügen */
  .rg-p-karte { padding: 1.8rem 1.15rem 2rem; font-size: 18.7px; }
  .rg-wertungen { padding-top: 2.6rem; padding-bottom: 3rem; }
  .rg-wertungen-raster { gap: 1rem; }
  /* Kasten als Zeile: Logo links, Wertung rechts, Links darunter nebeneinander */
  .rg-wertung {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-areas: "logo zahl" "logo urteil" "links links";
    column-gap: 1rem;
    align-items: center;
    text-align: left;
    padding: 1.2rem 1.2rem 1.1rem;
  }
  .rg-wertung-logo { grid-area: logo; height: 56px; margin: 0; }
  .rg-wertung-logo img { max-height: 56px; max-width: 96px; }
  .rg-wertung-sterne { display: none; }
  .rg-wertung-zahl { grid-area: zahl; }
  .rg-wertung-zahl strong { font-size: 2.2rem; }
  .rg-wertung-urteil { grid-area: urteil; margin: .1rem 0 0; font-size: 13px; }
  .rg-wertung-links { grid-area: links; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 1rem; }
  .rg-wertung-knopf { padding: .6rem 1rem; font-size: 14px; white-space: nowrap; }
  .rg-wertung-geben { font-size: 13px; text-align: right; }
}