/* ==========================================================================
   referenz-herz.css — Gefällt-mir-Herz für Referenzseiten (Arbeitsname rk-wow-herz, Präfix rk-herz)
   Version: 1.0 | 2026-10-17 | KAI Engineering | Quelle: Marketing/projektreferenzen/vorlagen/ (referenz_module.herz, referenz-herz.js)
   Vorbild: Herz des Journals (social-feed/vorlagen/journal.css „Gefällt mir“): rotes Herz im dunklen Kreis, mit Zahl eine Pille.
   Zwei Orte: .rk-herz--kopf liegt absolut unten rechts auf dem Einstiegsbild (kein Layoutsprung, wenn es erscheint),
   .rk-herz--ende ist ein Block mit Hinweissatz und Status über „War dieser Beitrag hilfreich?“.
   Beide stehen mit `hidden` im HTML und erscheinen erst, wenn der Zählweg die Kennung kennt (referenz-herz.js).
   Nur Token (main-v2.css, rk-wow.css, --ph-erhaben aus referenz-module.css), keine Literalfarben, kein filter.
   Dunkelmodus erhaben, Fokus sichtbar, reduzierte Bewegung (prefers-reduced-motion, html.no-motion, [data-motion="reduced"]).
   ========================================================================== */
:root { --rk-herz-h: 44px; --rk-herz-bg: var(--rk-wow-dark-bg); --rk-herz-ink: var(--rk-mac-red); --rk-herz-text: var(--rk-wow-dark-text);
  --rk-herz-rand: var(--rk-wow-dark-line-strong); --rk-herz-ring: var(--rk-wow-dark-gold); }
.rk-herz[hidden] { display: none !important; }
.rk-herz__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rk-herz__knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  min-width: var(--rk-herz-h); min-height: var(--rk-herz-h); padding: 0; border: 1px solid var(--rk-herz-rand); border-radius: var(--rk-wow-r-pill, 999px);
  background: var(--rk-herz-bg); color: var(--rk-herz-ink); font: inherit; font-size: var(--rk-wow-fs-meta); line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; box-shadow: var(--rk-wow-sh-1);
  transition: transform .35s var(--rk-wow-ease), border-color .25s var(--rk-wow-ease); }
.rk-herz__knopf:has(.rk-herz__zahl:not(:empty)) { padding: 0 14px 0 12px; }
.rk-herz__knopf svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  transition: fill .25s var(--rk-wow-ease), transform .35s var(--rk-wow-ease); }
.rk-herz__knopf[aria-pressed="true"] svg { fill: currentColor; }
.rk-herz__zahl { color: var(--rk-herz-text); font-variant-numeric: tabular-nums; }
.rk-herz__zahl:empty { display: none; }
.rk-herz__knopf:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 3px; }
.rk-herz__knopf:disabled { cursor: progress; }
.rk-herz__knopf::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--rk-herz-ring); opacity: 0; pointer-events: none; }
.rk-herz__knopf.is-pop svg { animation: rk-herz-schlag .55s var(--rk-wow-ease); }
.rk-herz__knopf.is-pop::after { animation: rk-herz-ring .8s var(--rk-wow-ease); }
@keyframes rk-herz-schlag { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes rk-herz-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@media (hover: hover) { .rk-herz__knopf:not(:disabled):hover { transform: scale(1.06); border-color: var(--rk-herz-ring); } }

/* auf dem Einstiegsbild (das Bild ist der Kopf der Seite) */
.rk-herz--kopf { position: absolute; z-index: 3; right: 12px; bottom: 12px; }

/* am Beitragsende, über der Rückmeldung */
.rk-herz--ende { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 16px 18px; box-sizing: border-box;
  border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-1); }
.rk-herz__hinweis { flex: 0 1 auto; max-width: 46ch; margin: 0; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.rk-herz--ende .rk-herz__knopf { --rk-herz-h: 48px; }
.rk-herz__status { flex-basis: 100%; margin: 0; font-size: var(--rk-wow-fs-meta); color: var(--text-secondary); }
.rk-herz__status:empty { display: none; }

/* Dunkelmodus: Block und Knopf heben sich vom Schwarz ab (FLOW §10, §23) */
:root[data-theme="dark"] .rk-herz--ende { box-shadow: var(--ph-erhaben); }
:root[data-theme="dark"] .rk-herz__knopf { border-color: var(--rk-herz-ring); box-shadow: var(--ph-erhaben); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rk-herz--ende { box-shadow: var(--ph-erhaben); }
  :root:not([data-theme="light"]) .rk-herz__knopf { border-color: var(--rk-herz-ring); box-shadow: var(--ph-erhaben); }
}

/* Bewegung reduziert */
@media (prefers-reduced-motion: reduce) { .rk-herz__knopf, .rk-herz__knopf *, .rk-herz__knopf::after { animation: none !important; transition: none !important; } }
html.no-motion .rk-herz__knopf, html.no-motion .rk-herz__knopf *, html.no-motion .rk-herz__knopf::after,
[data-motion="reduced"] .rk-herz__knopf, [data-motion="reduced"] .rk-herz__knopf *, [data-motion="reduced"] .rk-herz__knopf::after { animation: none !important; transition: none !important; }

@media print { .rk-herz { display: none !important; } }