/* referenz-module.css — gemeinsame Bausteine für Referenz und Nachweis: Beitragsende (Fazit als Blogtext, Ampel, Rückmeldung, Kacheln), Rückfrageformular, Preis-Hinweis, Bewertungsbühne. Version 1.1, 2026-10-10 */
/* ─── Beitragsende ─── */
.ph-fazit { display: grid; gap: 16px; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; list-style: none; counter-reset: f; }
@media (min-width: 900px) { .ph-fazit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ph-fazit li { position: relative; padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); }
.ph-fazit__nr { display: block; margin-bottom: 14px; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; color: var(--rk-gold-text); }
.ph-fazit h3 { margin: 0 0 8px; } .ph-fazit p { margin: 0; color: var(--text-secondary); }
.ph-feedback { margin: clamp(28px, 4vw, 48px) auto 0; max-width: 720px; padding: clamp(20px, 3vw, 36px); text-align: center; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-tint); }
.ph-feedback h3 { margin: 0 0 16px; }
.ph-feedback__wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ph-feedback__wahl button { min-height: 48px; padding: 0 20px; border: 1px solid var(--rk-wow-line); border-radius: 999px; background: transparent; color: var(--text-primary); font: inherit; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.ph-feedback__wahl button[aria-checked="true"] { background: var(--text-primary); color: var(--bg-primary, #111); border-color: var(--text-primary); }
.ph-feedback__wahl button:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }
.ph-feedback__form { margin-top: 20px; text-align: left; }
.ph-feedback__danke { margin: 16px 0 0; color: var(--rk-gold-text); }
.ph-weiter { display: grid; gap: 14px; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .ph-weiter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ph-weiter__karte, .ph-weiter a { display: grid; align-content: start; gap: 6px; height: 100%; margin: 0; padding: 18px 20px; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); color: inherit; text-decoration: none; }
.ph-weiter b { font-weight: inherit; font-size: var(--rk-wow-fs-card, 1.125rem); } .ph-weiter span { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); }
.ph-weiter a:hover { border-color: var(--rk-gold-text); }

/* ─── Nachweis: Rückfrageformular und Besprechen-Knöpfe ─── */
.ph-bespr { justify-self: start; align-self: start; width: auto; height: auto; margin-top: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--rk-wow-line); border-radius: 999px; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--rk-wow-fs-tag); cursor: pointer; }
.ph-bespr:hover { border-color: var(--rk-gold-text); color: var(--text-primary); } .ph-bespr:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }
.ph-bespr__an { display: none; } .ph-bespr[aria-pressed="true"] { border-color: var(--rk-gold-text); color: var(--rk-gold-text); } .ph-bespr[aria-pressed="true"] .ph-bespr__aus { display: none; } .ph-bespr[aria-pressed="true"] .ph-bespr__an { display: inline; }
.ph-anfrage__form { max-width: 820px; margin-top: clamp(20px, 3vw, 32px); }
.ph-anfrage__bezuege { margin-bottom: 16px; }
.ph-anfrage__leer { margin: 0 0 8px; color: var(--text-muted); font-size: var(--rk-wow-fs-meta); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ph-chips li { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 6px 6px 14px; border: 1px solid var(--rk-gold-text); border-radius: 999px; font-size: var(--rk-wow-fs-meta); }
.ph-chips button { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--rk-wow-tint); color: inherit; cursor: pointer; font: inherit; line-height: 1; }
.ph-kopieren { margin-top: 10px; min-height: 40px; padding: 0 16px; border: 1px solid var(--rk-wow-line); border-radius: 999px; background: transparent; color: var(--text-primary); font: inherit; cursor: pointer; }
.ph-nicht-bt + .ph-anfrage, .ph-anfrage { scroll-margin-top: 90px; }
.ph-weiter em { font-style: normal; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }

/* ─── Hinweis zur Preisaufstellung ─── */
.nw-hinweis { margin: 0 0 16px; padding: 16px 20px; border: 1px solid var(--rk-gold-text); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); color: var(--text-primary); font-size: var(--rk-wow-fs-meta); }

/* ─── Bewertungsbühne (Blickfang) ─── */
.ph-buehne { position: relative; overflow: hidden; margin: clamp(32px, 5vw, 64px) 0; padding: clamp(28px, 5vw, 64px); border-radius: var(--rk-wow-r-card); background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--rk-gold-text) 22%, transparent), transparent 60%), var(--rk-wow-dark-bg); color: var(--rk-wow-dark-text); }
.ph-buehne__wrap { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 960px) { .ph-buehne__wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.ph-buehne__lead { max-width: 56ch; margin: 18px 0 0; font-size: var(--rk-wow-fs-lead, 1.25rem); color: color-mix(in srgb, var(--rk-wow-dark-text) 86%, transparent); }
.ph-schritte3 { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .ph-schritte3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ph-schritte3 li { display: grid; gap: 4px; align-content: start; }
.ph-schritte3 span { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--rk-gold-text); }
.ph-schritte3 b { font-weight: inherit; font-size: var(--rk-wow-fs-card, 1.125rem); } .ph-schritte3 small { color: color-mix(in srgb, var(--rk-wow-dark-text) 70%, transparent); font-size: var(--rk-wow-fs-meta); }
.ph-buehne__karte { display: grid; justify-items: center; gap: 12px; padding: clamp(24px, 3vw, 40px); text-align: center; border: 1px solid color-mix(in srgb, var(--rk-gold-text) 45%, transparent); border-radius: var(--rk-wow-r-card); background: color-mix(in srgb, var(--rk-wow-dark-bg) 60%, transparent); box-shadow: 0 0 80px color-mix(in srgb, var(--rk-gold-text) 18%, transparent); }
.ph-sterne { display: flex; gap: clamp(6px, 1.4vw, 12px); }
.ph-sterne i { display: block; width: clamp(34px, 6vw, 52px); aspect-ratio: 1; fill: var(--rk-gold-text); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rk-gold-text) 55%, transparent)); }
.ph-sterne--klein i { width: 28px; }
.ph-buehne__punkte { margin: 0; font-size: var(--rk-wow-fs-meta); color: color-mix(in srgb, var(--rk-wow-dark-text) 80%, transparent); } .ph-buehne__punkte strong { font-weight: inherit; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--rk-wow-dark-text); } .ph-buehne__punkte small { font-size: var(--rk-wow-fs-tag); }
.ph-buehne__klein { margin: 0; font-size: var(--rk-wow-fs-tag); color: color-mix(in srgb, var(--rk-wow-dark-text) 62%, transparent); }
.ph-buehne__stimmen { display: grid; gap: 16px; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .ph-buehne__stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ph-buehne__stimmen blockquote { margin: 0; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--rk-wow-dark-text) 16%, transparent); border-radius: var(--rk-wow-r-md); }
.ph-buehne__stimmen p { margin: 0 0 10px; } .ph-buehne__stimmen footer { font-size: var(--rk-wow-fs-tag); color: var(--rk-gold-text); }
/* Sterne füllen sich nacheinander, sobald die Bühne sichtbar wird */
[data-ph-buehne] .ph-sterne i { opacity: .16; transform: scale(.6); }
[data-ph-buehne].ph-an .ph-sterne i { animation: ph-stern .5s var(--rk-wow-ease, ease) forwards; animation-delay: calc(var(--i) * .16s); }
[data-ph-buehne].ph-an .ph-buehne__knopf { animation: ph-puls 2.4s ease-in-out 1.2s 2; }
@keyframes ph-stern { to { opacity: 1; transform: scale(1); } }
@keyframes ph-puls { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--rk-gold-text) 0%, transparent), 0 0 40px color-mix(in srgb, var(--rk-gold-text) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { [data-ph-buehne] .ph-sterne i { opacity: 1; transform: none; animation: none !important; } [data-ph-buehne] .ph-buehne__knopf { animation: none !important; } }
html.no-motion [data-ph-buehne] .ph-sterne i, [data-motion="reduced"] [data-ph-buehne] .ph-sterne i { opacity: 1; transform: none; animation: none !important; }
.ph-bewertung__rahmen .ph-sterne { justify-content: center; }
dialog.ph-bewertung { width: min(92vw, 520px); padding: 0; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); color: var(--text-primary); }
dialog.ph-bewertung::backdrop { background: color-mix(in srgb, var(--rk-wow-dark-bg) 72%, transparent); }
.ph-bewertung__rahmen { display: grid; gap: 14px; padding: clamp(22px, 4vw, 36px); } .ph-bewertung__rahmen h2, .ph-bewertung__rahmen p { margin: 0; }
.ph-bewertung__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-buehne .rk-wow-statement__title { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.ph-buehne .rk-wow-statement { margin: 0; }

/* ─── Erhabene Flächen: im Dunkelmodus lösen sich Karten vom Schwarz (weißlicher Rand und Schein), im Hellmodus normale Schatten ─── */
:root { --ph-erhaben: 0 1px 2px color-mix(in srgb, var(--rk-wow-dark-bg) 10%, transparent), 0 10px 28px color-mix(in srgb, var(--rk-wow-dark-bg) 12%, transparent); --ph-erhaben-stark: 0 2px 4px color-mix(in srgb, var(--rk-wow-dark-bg) 14%, transparent), 0 18px 48px color-mix(in srgb, var(--rk-wow-dark-bg) 22%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ph-erhaben: inset 0 1px 0 color-mix(in srgb, var(--rk-wow-dark-text) 9%, transparent), 0 0 0 1px color-mix(in srgb, var(--rk-wow-dark-text) 7%, transparent), 0 12px 30px color-mix(in srgb, var(--rk-wow-dark-bg) 70%, transparent), 0 0 26px color-mix(in srgb, var(--rk-wow-dark-text) 4%, transparent); --ph-erhaben-stark: inset 0 1px 0 color-mix(in srgb, var(--rk-wow-dark-text) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--rk-wow-dark-text) 14%, transparent), 0 24px 60px color-mix(in srgb, var(--rk-wow-dark-bg) 85%, transparent), 0 0 60px color-mix(in srgb, var(--rk-wow-dark-text) 9%, transparent); } }
:root[data-theme="dark"] { --ph-erhaben: inset 0 1px 0 color-mix(in srgb, var(--rk-wow-dark-text) 9%, transparent), 0 0 0 1px color-mix(in srgb, var(--rk-wow-dark-text) 7%, transparent), 0 12px 30px color-mix(in srgb, var(--rk-wow-dark-bg) 70%, transparent), 0 0 26px color-mix(in srgb, var(--rk-wow-dark-text) 4%, transparent); --ph-erhaben-stark: inset 0 1px 0 color-mix(in srgb, var(--rk-wow-dark-text) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--rk-wow-dark-text) 14%, transparent), 0 24px 60px color-mix(in srgb, var(--rk-wow-dark-bg) 85%, transparent), 0 0 60px color-mix(in srgb, var(--rk-wow-dark-text) 9%, transparent); }
.ph-buehne { box-shadow: var(--ph-erhaben-stark); background-color: color-mix(in srgb, var(--rk-wow-dark-text) 6%, var(--rk-wow-dark-bg)); }
.ph-fazit li, .ph-feedback, .ph-weiter__karte, .ph-weiter a, .ph-buehne__stimmen blockquote { box-shadow: var(--ph-erhaben); }
/* Pop-up: hebt sich deutlich vom Hintergrund ab, alles mittig */
dialog.ph-bewertung { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); color: var(--rk-wow-dark-text); border: 1px solid color-mix(in srgb, var(--rk-gold-text) 55%, transparent); box-shadow: var(--ph-erhaben-stark), 0 0 80px color-mix(in srgb, var(--rk-gold-text) 20%, transparent); text-align: center; }
dialog.ph-bewertung::backdrop { background: color-mix(in srgb, var(--rk-wow-dark-bg) 82%, transparent); backdrop-filter: blur(3px); }
.ph-bewertung__rahmen { justify-items: center; }
.ph-bewertung__knoepfe { justify-content: center; }
.ph-bewertung__rahmen p { max-width: 42ch; }
/* Tipps für hilfreiche Bewertungen */
.ph-tipps { margin: 28px 0 0; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--rk-wow-dark-text) 16%, transparent); border-radius: var(--rk-wow-r-md); }
.ph-tipps h3 { margin: 0 0 10px; font-size: var(--rk-wow-fs-card, 1.125rem); }
.ph-tipps ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ph-tipps li { font-size: var(--rk-wow-fs-meta); color: color-mix(in srgb, var(--rk-wow-dark-text) 80%, transparent); } .ph-tipps b { font-weight: inherit; color: var(--rk-wow-dark-text); }

/* ─── Fazit als Blogtext (öffentliche Referenz; Daten: projekt.json → oeffentlich.fazit, Markup: referenz_module.fazit_blog) ───
   Kopf links (ab 1000 px mitlaufend neben dem Text), Fließtext 50–75 Zeichen mit Initiale und Randlinie,
   Kernsatz zentriert zwischen zwei Goldlinien, Ampel als drei Zeilen: Farbe nie allein, immer mit Wort und Symbol. */
.ph-fazitblog { display: grid; gap: clamp(22px, 3vw, 36px); align-items: start; }
.ph-fazitblog > * { min-width: 0; }
.ph-fazitblog .rk-wow-statement { margin: 0; }
.ph-fazitblog .rk-wow-statement__title { font-size: var(--rk-wow-fs-big); line-height: 1.06; hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 1000px) {
  .ph-fazitblog { grid-template-columns: minmax(0, 1fr) minmax(0, 62ch); gap: clamp(40px, 5vw, 72px); }
  .ph-fazitblog__kopf { position: sticky; top: var(--rk-wow-sticky-top, 110px); }
}
.ph-fazitblog__text { position: relative; max-width: 66ch; padding-left: clamp(18px, 3vw, 36px); border-left: 1px solid var(--rk-wow-line); }
.ph-fazitblog__text::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: clamp(64px, 9vw, 120px); border-radius: 2px; background: linear-gradient(var(--accent), transparent); }
.ph-fazitblog__text p { margin: 0 0 1.2em; color: var(--text-secondary); font-size: var(--rk-wow-fs-body); line-height: 1.72; hyphens: auto; overflow-wrap: break-word; text-wrap: pretty; }
.ph-fazitblog__text p:last-child { margin-bottom: 0; }
.ph-fazitblog__text p:first-child { color: var(--text-primary); font-size: var(--rk-wow-fs-lead); line-height: 1.6; }
.ph-fazitblog__text p:first-child::first-letter { float: left; margin: .05em .14em 0 0; font-size: 3.3em; line-height: .78; color: var(--rk-gold-text); }

.ph-kernsatz { display: grid; justify-items: center; gap: clamp(18px, 2.6vw, 30px); margin: clamp(48px, 7vw, 96px) 0; text-align: center; }
.ph-kernsatz::before, .ph-kernsatz::after { content: ""; width: min(240px, 46%); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.ph-kernsatz p { margin: 0; max-width: 30ch; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem); line-height: 1.24; letter-spacing: -.012em; color: var(--text-primary); text-wrap: balance; }
@supports (animation-timeline: view()) {
  html.rk-wow-motion .ph-kernsatz::before, html.rk-wow-motion .ph-kernsatz::after { animation: ph-linie linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
}
@keyframes ph-linie { from { transform: scaleX(.15); opacity: .2; } to { transform: scaleX(1); opacity: 1; } }

.ph-ampel__titel { margin: 0 0 14px; font-size: var(--rk-fs-eyebrow, 1rem); letter-spacing: var(--rk-ls-eyebrow, .18em); text-transform: uppercase; color: var(--rk-gold-text); }
.ph-ampel { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ph-ampel__zeile { --ph-a-fg: var(--rk-success-fg); --ph-a-bg: var(--rk-success-bg); --ph-a-brd: var(--rk-success-brd);
  display: grid; gap: 14px clamp(20px, 3vw, 40px); padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.ph-ampel__zeile[data-stufe="gelb"] { --ph-a-fg: var(--rk-warning-fg); --ph-a-bg: var(--rk-warning-bg); --ph-a-brd: var(--rk-warning-brd); }
.ph-ampel__zeile[data-stufe="rot"] { --ph-a-fg: var(--rk-danger-fg); --ph-a-bg: var(--rk-danger-bg); --ph-a-brd: var(--rk-danger-brd); }
@media (min-width: 760px) { .ph-ampel__zeile { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; } }
.ph-ampel__kopf { display: flex; align-items: center; gap: 14px; }
.ph-ampel__lampe { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ph-a-brd); background: var(--ph-a-bg); color: var(--ph-a-fg); }
.ph-ampel__lampe svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ph-ampel__wort { display: grid; gap: 2px; margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); line-height: 1.15; color: var(--text-primary); }
.ph-ampel__farbe { font-size: var(--rk-wow-fs-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--ph-a-fg); }
.ph-ampel__punkte { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ph-ampel__punkte li { position: relative; padding-left: 20px; color: var(--text-secondary); line-height: 1.55; }
.ph-ampel__punkte li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--ph-a-fg); }
/* Dunkelmodus: Lampen leuchten leicht, Goldlinien bekommen einen Schein */
:root[data-theme="dark"] .ph-ampel__lampe { box-shadow: 0 0 20px color-mix(in srgb, var(--ph-a-fg) 32%, transparent); }
:root[data-theme="dark"] .ph-kernsatz::before, :root[data-theme="dark"] .ph-kernsatz::after { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ph-ampel__lampe { box-shadow: 0 0 20px color-mix(in srgb, var(--ph-a-fg) 32%, transparent); }
  :root:not([data-theme="light"]) .ph-kernsatz::before, :root:not([data-theme="light"]) .ph-kernsatz::after { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }
}
.ph-schluss .ph-feedback { margin-top: clamp(40px, 6vw, 72px); }
@media print { .ph-fazitblog__kopf { position: static; } .ph-ampel__zeile { break-inside: avoid; box-shadow: none; } }