/* ==========================================================================
   becomePRO – Produktbeschreibung (Einzelproduktansicht)
   Datei: bp-product.css  ·  Stand 2026-09-08 (Kundenstimme: Body/Cite als Absaetze; reservierte Theme-Praefixe siehe Markup-Vertrag)
   Die Redaktions-App liefert Produktbeschreibungen als reines HTML mit diesen
   Klassen, ohne Inline-Styles. Dieses Stylesheet gehoert ins Child-Theme
   (z. B. wp_enqueue_style('bp-product', …, [], '1.0') auf is_product()).
   Farben/Schrift kommen aus dem Theme; hier nur Layout, Abstaende, Rahmen.
   Alle Klassen tragen das Praefix bp-, Wurzel ist .bp-content.
   Markup-Vertrag: bp-product-markup.md (gleicher Ordner).
   ========================================================================== */

/* ---- Wurzel und Grundrhythmus ------------------------------------------ */
.bp-content { --bp-gap: 1.25rem; --bp-radius: 12px; --bp-border: rgba(34, 47, 62, .12); --bp-muted: #6b7280; --bp-accent: #ff981b; --bp-accent-2: #c86f00; --bp-soft: #fff7ec; line-height: 1.65; }
.bp-content > * + * { margin-top: var(--bp-gap); }
.bp-content h2 { margin-top: 2.25rem; font-size: 1.45rem; line-height: 1.25; }
.bp-content h3 { margin-top: 1.6rem; font-size: 1.15rem; line-height: 1.3; }
.bp-content h2:first-child, .bp-content h3:first-child { margin-top: 0; }
.bp-content ul, .bp-content ol { padding-left: 1.35rem; }
.bp-content li + li { margin-top: .35rem; }
.bp-content img, .bp-content video { max-width: 100%; height: auto; display: block; }
.bp-content figure { margin: 0; }
.bp-content figcaption { margin-top: .5rem; font-size: .85rem; color: var(--bp-muted); }

/* ---- Einzelbild (Fliesstext) -------------------------------------------- */
/* <figure class="bp-figure bp-figure--full" data-usage="hero"><img …><figcaption>…</figcaption></figure> */
.bp-figure { clear: both; }
.bp-figure img { width: 100%; border-radius: var(--bp-radius); object-fit: cover; }
.bp-figure--full { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.bp-figure--left, .bp-figure--right { width: min(42%, 340px); margin-top: .35rem; margin-bottom: .75rem; clear: none; }
.bp-figure--left  { float: left;  margin-right: var(--bp-gap); }
.bp-figure--right { float: right; margin-left: var(--bp-gap); }
.bp-figure--small { width: min(30%, 240px); }
/* Umfliessung nach dem Bild beenden */
.bp-content h2, .bp-content h3, .bp-columns, .bp-gallery, .bp-video, .bp-table-wrap, .bp-box, .bp-author, .bp-faq, .bp-clear { clear: both; }
@media (max-width: 640px) { .bp-figure--left, .bp-figure--right, .bp-figure--small { float: none; width: 100%; margin-left: 0; margin-right: 0; } }

/* ---- Zweispalter (max. 2 Spalten) --------------------------------------- */
/* <div class="bp-columns bp-columns--media-left"><div class="bp-col bp-col--media">…</div><div class="bp-col">…</div></div> */
.bp-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bp-gap) calc(var(--bp-gap) * 1.5); align-items: start; }
.bp-columns--media-left  { grid-template-columns: 2fr 3fr; }
.bp-columns--media-right { grid-template-columns: 3fr 2fr; }
.bp-col > * + * { margin-top: .75rem; }
.bp-col--media img, .bp-col--media video { width: 100%; border-radius: var(--bp-radius); }
.bp-col--media figure { margin: 0; }
@media (max-width: 720px) { .bp-columns, .bp-columns--media-left, .bp-columns--media-right { grid-template-columns: 1fr; } .bp-columns--media-right .bp-col--media { order: -1; } }

/* ---- Galerie: Raster oder Slider ---------------------------------------- */
/* <div class="bp-gallery bp-gallery--grid" data-cols="3"><figure class="bp-gallery__item"><img …><figcaption>…</figcaption></figure>…</div> */
.bp-gallery { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.bp-gallery[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.bp-gallery[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.bp-gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bp-radius); }
.bp-gallery__item figcaption { font-size: .8rem; }
@media (max-width: 720px) { .bp-gallery, .bp-gallery[data-cols="3"], .bp-gallery[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } }
/* Slider: reines CSS (Scroll-Snap), kein JavaScript noetig; Pfeile/Punkte optional per Theme-Script */
.bp-gallery--slider { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; gap: .75rem; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.bp-gallery--slider .bp-gallery__item { flex: 0 0 min(78%, 520px); scroll-snap-align: start; }
.bp-gallery--slider .bp-gallery__item img { aspect-ratio: 16 / 10; }
.bp-gallery--slider::-webkit-scrollbar { height: 6px; }
.bp-gallery--slider::-webkit-scrollbar-thumb { background: var(--bp-border); border-radius: 3px; }

/* ---- Video (eigene Datei oder Einbettung) ------------------------------- */
/* <figure class="bp-video" data-usage="vsl"><div class="bp-video__frame"><video controls preload="metadata" poster="…"><source src="…" type="video/mp4"></video></div><figcaption>…</figcaption></figure>
   Einbettung: <div class="bp-video__frame"><iframe …></iframe></div> */
.bp-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--bp-radius); background: #111; }
.bp-video__frame video, .bp-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bp-video--compact { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---- Kundenstimme ------------------------------------------------------- */
/* <blockquote class="bp-testimonial"><img class="bp-testimonial__img" …><div class="bp-testimonial__body"><p>…</p></div><p class="bp-testimonial__cite"><cite>Name, Rolle</cite></p></blockquote> */
.bp-testimonial { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--bp-border); border-left: 4px solid var(--bp-accent); border-radius: var(--bp-radius); background: var(--bp-soft); font-style: normal; }
.bp-testimonial__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; grid-row: span 2; }
.bp-testimonial__body { grid-column: 2; }
.bp-testimonial__cite { grid-column: 2; }
.bp-testimonial p { margin: 0; }
.bp-testimonial__body > p + p { margin-top: .5rem; }
.bp-testimonial__cite { margin-top: .35rem; }
.bp-testimonial cite { display: block; font-size: .85rem; font-style: normal; color: var(--bp-muted); }
.bp-testimonial:not(:has(.bp-testimonial__img)) { grid-template-columns: 1fr; }

/* ---- Infobox / Hinweis -------------------------------------------------- */
/* <div class="bp-box bp-box--note"><p class="bp-box__title">…</p><p>…</p></div>   Varianten: --note, --tip, --warn */
.bp-box { padding: 1rem 1.25rem; border: 1px solid var(--bp-border); border-radius: var(--bp-radius); background: #fafafa; }
.bp-box__title { margin: 0 0 .35rem; font-weight: 600; }
.bp-box--tip  { background: var(--bp-soft); border-color: rgba(255, 152, 27, .45); }
.bp-box--warn { background: #fff4f2; border-color: rgba(177, 39, 4, .35); }

/* ---- Tabelle ------------------------------------------------------------ */
/* <div class="bp-table-wrap"><table class="bp-table"><thead>…</thead><tbody>…</tbody></table></div> */
.bp-table-wrap { overflow-x: auto; }
.bp-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.bp-table th, .bp-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--bp-border); text-align: left; vertical-align: top; }
.bp-table thead th { background: #f6f6f6; font-weight: 600; }
.bp-table tbody tr:nth-child(even) td { background: #fbfbfb; }

/* ---- Autorenbox --------------------------------------------------------- */
/* <div class="bp-author"><img class="bp-author__img" …><div class="bp-author__body"><p class="bp-author__name">…</p><p>…</p><a class="bp-author__link" href="…">Alle Kurse von …</a></div></div> */
.bp-author { display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; align-items: start; padding: 1.25rem; border: 1px solid var(--bp-border); border-radius: var(--bp-radius); }
.bp-author__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.bp-author__name { margin: 0 0 .25rem; font-weight: 600; font-size: 1.05rem; }
.bp-author__body p { margin: 0; }
.bp-author__body p + p { margin-top: .5rem; }
.bp-author__more { margin-top: .6rem; }
.bp-author__link { display: inline-block; font-weight: 600; color: var(--bp-accent-2); text-decoration: none; }
.bp-author__link:hover { text-decoration: underline; }
@media (max-width: 480px) { .bp-author { grid-template-columns: 1fr; } .bp-author__img { width: 72px; height: 72px; } }

/* ---- FAQ ---------------------------------------------------------------- */
/* FAQ seit 2026-09-08: <h2>Häufige Fragen zu …</h2><div class="bp-faq"><div class="bp-faq__item"><h3>Frage</h3><div class="bp-faq__answer"><p>…</p></div></div>…</div>
   (Fragen als H3 fuer Gliederung und SEO; die aeltere <details>/<summary>-Form bleibt fuer bestehende Texte gueltig) */
.bp-faq__item > h3 { margin: 0; padding: .85rem 0 .35rem; font-size: 1.05rem; font-weight: 600; line-height: 1.35; clear: none; }
.bp-faq__item { border-bottom: 1px solid var(--bp-border); }
.bp-faq__item summary { padding: .85rem 0; font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.bp-faq__item summary::-webkit-details-marker { display: none; }
.bp-faq__item summary::after { content: "+"; position: absolute; right: .25rem; top: .7rem; font-size: 1.25rem; line-height: 1; color: var(--bp-accent-2); }
.bp-faq__item[open] summary::after { content: "–"; }
.bp-faq__answer { padding: 0 0 1rem; }
.bp-faq__answer p { margin: 0; }
.bp-faq__answer p + p { margin-top: .5rem; }

/* ---- Trenner, Hinweise -------------------------------------------------- */
.bp-content hr { border: 0; border-top: 1px solid var(--bp-border); margin: 2rem 0; }
.bp-note { font-size: .85rem; color: var(--bp-muted); }

/* Kundenstimme ohne Bild (2026-09-09): becomepro-makeover.css setzt fuer .bp-testimonial das Raster 64px 1fr und stellt bei fehlendem
   Bild die Absaetze per :not(:has(.bp-testimonial__img)) p { grid-column:1 } in die 64-px-Bildspalte → ein Wort je Zeile.
   Gleiche Spezifitaet wie das Theme, damit das Raster ohne Bild einspaltig wird. Die App setzt zusaetzlich inline style="grid-template-columns:1fr". */
#section-description .bp-content .bp-testimonial:not(:has(.bp-testimonial__img)) { grid-template-columns: 1fr; }
#section-description .bp-content .bp-testimonial:not(:has(.bp-testimonial__img)) > p,
#section-description .bp-content .bp-testimonial:not(:has(.bp-testimonial__img)) .bp-testimonial__body,
#section-description .bp-content .bp-testimonial:not(:has(.bp-testimonial__img)) .bp-testimonial__cite { grid-column: 1; }

/* ---- Hörprobe / Audio (2026-09-09) ---------------------------------------- */
/* <figure class="bp-audio" data-usage="audio"><audio controls preload="none" src="…"></audio><figcaption>…</figcaption></figure>
   Einbettung: <figure class="bp-audio"><div class="bp-audio__frame"><iframe src="…"></iframe></div></figure> */
.bp-audio { margin: 1.5rem 0; padding: .9rem 1rem; border: 1px solid var(--bp-border); border-radius: var(--bp-radius); background: var(--bp-paper, #fff); }
.bp-audio audio { display: block; width: 100%; }
.bp-audio__frame iframe { display: block; width: 100%; height: 166px; border: 0; }
.bp-audio figcaption { margin-top: .5rem; font-size: .85rem; color: var(--bp-muted); }