/* Produktseite: Bausteine aus dem Seitenaufbau (Lf\ProductBlocksView). Farben wie mcss/style.css. */
.lf-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf: Sterne, Kaufzaehler, Kauf-Info-Box */
.lf-pb-top { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lf-pb-starline { margin: 0; font-size: 14px; }
.lf-pb-starline a { color: var(--lf-ink, #1d1d1f); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.lf-pb-starline a span { color: var(--lf-muted, #6e6e73); text-decoration: underline; }
.lf-pb-stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.lf-pb-counter { margin: 0; font-size: 14px; color: #3a3a3c; display: inline-flex; align-items: center; gap: 6px; }
.lf-pb-counter svg { color: #1b9e5a; }
.lf-pb-info { list-style: none; margin: 4px 0 0; padding: 12px 14px; background: var(--lf-bg-soft, #f5f5f7); border-radius: calc(12px * var(--lf-round, 1)); display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #3a3a3c; }

/* Varianten */
.lf-pb-vars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.lf-pb-var { border: 1.5px solid var(--lf-line, #e5e5ea); border-radius: calc(16px * var(--lf-round, 1) * var(--lf-round-card, 1)); padding: 18px 20px; background: #fff; }
.lf-pb-var--rec { border-color: var(--lf-blue, #0071bc); box-shadow: 0 0 0 3px rgba(0, 113, 188, .1); }
.lf-pb-var-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.lf-pb-var h3 { margin: 0; font-size: 17px; }
.lf-pb-var p { margin: 8px 0 0; font-size: 15px; color: #3a3a3c; }
.lf-pb-var-price { font-weight: 700; color: var(--lf-ink, #1d1d1f) !important; font-size: 16px !important; }
.lf-pb-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--lf-r-pill, 999px); background: var(--lf-blue-soft, #e8f1f9); color: #00609f; white-space: nowrap; }

/* Highlights */
.lf-pb-hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.lf-pb-hl-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(16px * var(--lf-round, 1)); display: block; margin-bottom: 14px; }
.lf-pb-hl-item h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.lf-pb-hl-item p { margin: 0; color: #3a3a3c; font-size: 15px; line-height: 1.5; }

/* Video */
.lf-pb-video { width: 100%; max-width: 900px; border-radius: calc(16px * var(--lf-round, 1)); display: block; background: #000; }
.lf-pb-videolink { display: inline-flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: calc(16px * var(--lf-round, 1) * var(--lf-round-card, 1)); background: var(--lf-bg-soft, #f5f5f7); color: var(--lf-ink, #1d1d1f); text-decoration: none; }
.lf-pb-videolink span { display: flex; flex-direction: column; font-weight: 600; }
.lf-pb-videolink small { font-weight: 400; color: var(--lf-muted, #6e6e73); }
.lf-pb-play { width: 44px; height: 44px; border-radius: 50%; background: var(--lf-blue, #0071bc); color: #fff; align-items: center; justify-content: center; font-size: 16px; flex-direction: row !important; }

/* Vorher - nachher */
.lf-pb-ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.lf-pb-ba-col { border-radius: calc(16px * var(--lf-round, 1) * var(--lf-round-card, 1)); padding: 20px 22px; background: #fff; }
.lf-pb-ba-after { background: #e8f6ee; }
.lf-pb-ba-col h3 { margin: 0 0 10px; font-size: 17px; }
.lf-pb-ba-col ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #3a3a3c; }

/* Oft zusammen gekauft */
.lf-pb-bundle { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.lf-pb-bundle-item { display: flex; flex-direction: column; gap: 6px; width: 150px; color: var(--lf-ink, #1d1d1f); text-decoration: none; font-size: 14px; }
.lf-pb-bundle-item img { width: 150px; height: 150px; object-fit: cover; border-radius: calc(14px * var(--lf-round, 1)); background: var(--lf-bg-soft, #f5f5f7); }
.lf-pb-bundle-item small { color: var(--lf-muted, #6e6e73); }
.lf-pb-plus { font-size: clamp(22px, 2.4vw, 28px); color: #aeaeb2; }
.lf-pb-bundle-sum { display: flex; flex-direction: column; gap: 2px; margin-left: 12px; font-size: 14px; color: #3a3a3c; }
.lf-pb-bundle-sum strong { font-size: 22px; color: var(--lf-ink, #1d1d1f); }
.lf-pb-bundle-sum small { color: var(--lf-muted, #6e6e73); }

/* Haeufige Fragen */
.lf-pb-faq { max-width: 820px; }
.lf-pb-faq details { border-bottom: 1px solid var(--lf-line, #e5e5ea); }
.lf-pb-faq summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font-weight: 600; font-size: 16px; position: relative; }
.lf-pb-faq summary::-webkit-details-marker { display: none; }
.lf-pb-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; font-weight: 400; color: var(--lf-blue, #0071bc); }
.lf-pb-faq details[open] summary::after { content: "–"; }
.lf-pb-faq p { margin: 0 0 16px; color: #3a3a3c; line-height: 1.55; }

/* Rezensionen */
.lf-pb-revs { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.lf-pb-rev-sum { flex: 0 1 240px; }
.lf-pb-rev-avg { margin: 0; font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.lf-pb-rev-n { margin: 6px 0 12px; color: var(--lf-muted, #6e6e73); font-size: 14px; }
.lf-pb-rev-dist { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.lf-pb-rev-dist div { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 8px; }
.lf-pb-bar { height: 7px; border-radius: calc(4px * var(--lf-round, 1)); background: #ececf0; overflow: hidden; }
.lf-pb-bar span { display: block; height: 100%; background: #e8a317; }
.lf-pb-rev-list { flex: 1 1 360px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.lf-pb-rev h3 { margin: 6px 0 2px; font-size: 16px; }
.lf-pb-rev p { margin: 4px 0 0; color: #3a3a3c; line-height: 1.55; }
.lf-pb-rev-meta { font-size: 13px; color: var(--lf-muted, #6e6e73) !important; }
.lf-pb-verified { color: #1b7a45; font-weight: 600; }
.lf-pb-note { margin: 24px 0 0; font-size: 13px; color: var(--lf-muted, #6e6e73); max-width: 720px; }

/* Ueber Lernfundament */
.lf-pb-brand { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.lf-pb-brand img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; }
.lf-pb-brand > div { flex: 1 1 320px; }

@media (max-width: 600px) {
	.lf-pb-bundle-item, .lf-pb-bundle-item img { width: 110px; }
	.lf-pb-bundle-item img { height: 110px; }
	.lf-pb-bundle-sum { margin-left: 0; flex-basis: 100%; }
}