/* ==========================================================================
   referenz-teilen.css — Teilen-Baustein für Referenzseiten (Arbeitsname rk-wow-teilen, Präfix rk-teilen)
   Version: 1.0 | 2026-10-18 | KAI Engineering | Quelle: Marketing/projektreferenzen/vorlagen/ (referenz_module.teilen*, referenz-teilen.js)
   Orte: .rk-teilen-halter liegt absolut unten rechts auf dem Einstiegsbild (Teilen links neben dem Herz, kein Layoutsprung),
   .rk-teilen-reihe steht über „War dieser Beitrag hilfreich?“ (Herz und Teilen ab 900 px nebeneinander, Teilen allein, wenn das Herz verborgen bleibt).
   Fenster: dialog.rk-mac.rk-teilen-fenster (Mac-Fenster der Website aus main-v2.css, showModal, mittig), Vorschaukarte, Link kopieren, Netze, QR-Code.
   Großansicht: .rk-teilen-bild („Dieses Bild teilen“), nur sichtbar, wenn das Gerät Bilder als Datei teilen kann.
   Nur Token (main-v2.css, rk-wow.css, --ph-erhaben aus referenz-module.css), keine Literalfarben, kein filter. Ziele mindestens 44 px.
   Dunkelmodus erhaben, Schalter im Fenster mit festen Dunkelwerten und Goldrand (FLOW §23), Fokus sichtbar,
   reduzierte Bewegung (prefers-reduced-motion, html.no-motion, [data-motion="reduced"]).
   ========================================================================== */
:root { --rk-teilen-h: 44px; --rk-teilen-bg: var(--rk-wow-dark-bg); --rk-teilen-ink: var(--rk-wow-dark-ink); --rk-teilen-rand: var(--rk-wow-dark-line-strong);
  --rk-teilen-gold: var(--rk-wow-dark-gold); --rk-teilen-qr-grund: var(--rk-wow-dark-ink); --rk-teilen-qr-ink: var(--rk-wow-dark-bg); }
.rk-teilen[hidden], .rk-teilen__knopf[hidden], .rk-teilen-bild[hidden], .rk-teilen-fenster [hidden] { display: none !important; }

/* ── Knopf (Kopf: rund wie das Herz; Ende: Pille mit Wort) ── */
.rk-teilen__knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  min-width: var(--rk-teilen-h); min-height: var(--rk-teilen-h); margin: 0; padding: 0; border: 1px solid var(--rk-teilen-rand); border-radius: var(--rk-wow-r-pill);
  background: var(--rk-teilen-bg); color: var(--rk-teilen-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-teilen__knopf svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rk-teilen__knopf--text { min-height: 48px; padding: 0 20px 0 16px; font-weight: 600; }
.rk-teilen__knopf:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 3px; }
@media (hover: hover) { .rk-teilen__knopf:hover { transform: scale(1.06); border-color: var(--rk-teilen-gold); } }

/* Halter auf dem Einstiegsbild: Teilen links, Herz rechts; das Herz behält seinen Knopf, nur die Lage kommt vom Halter */
.rk-teilen-halter { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; }
.rk-teilen-halter > .rk-herz--kopf { position: static; }

/* Reihe am Beitragsende: Herz und Teilen nebeneinander, gleiche Höhe; ist das Herz verborgen, steht Teilen allein */
.rk-teilen-reihe { display: grid; gap: 12px; margin: 0 0 18px; }
.rk-teilen-reihe > .rk-herz--ende { margin: 0; }
@media (min-width: 900px) { .rk-teilen-reihe { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.rk-teilen--ende { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0; 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-teilen__hinweis { flex: 1 1 18ch; max-width: 46ch; margin: 0; font-weight: 600; color: var(--text-primary); line-height: 1.4; }

/* ── Fenster (Mac-Fenster der Website, mittig) ── */
dialog.rk-mac.rk-teilen-fenster { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overscroll-behavior: contain;
  border-color: color-mix(in srgb, var(--rk-gold-text) 40%, transparent); }
.rk-teilen-fenster::backdrop { background: color-mix(in srgb, var(--rk-wow-dark-bg) 72%, transparent); }
html.rk-teilen-offen { overflow: hidden; }
.rk-teilen__zu svg, .rk-teilen__weg svg, .rk-teilen__kopieren svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rk-teilen__koerper { padding: 16px; }
.rk-teilen__haupt, .rk-teilen__qr { display: grid; gap: 14px; }
.rk-teilen__karte { display: grid; overflow: hidden; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); }
.rk-teilen__bild { display: block; width: 100%; aspect-ratio: 1200 / 630; background: var(--rk-wow-line); }
.rk-teilen__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rk-teilen__kartentext { display: grid; gap: 2px; margin: 0; padding: 10px 14px 12px; line-height: 1.35; }
.rk-teilen__seite { font-size: var(--rk-wow-fs-tag); color: var(--text-muted, var(--text-secondary)); }
.rk-teilen__kartentitel { font-weight: 600; color: var(--text-primary); }
.rk-teilen__titel { margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); letter-spacing: -.012em; line-height: 1.2; color: var(--text-primary); }
.rk-teilen__titel:focus { outline: none; }
.rk-teilen__umfang { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rk-teilen__legende { width: 100%; margin: 0 0 2px; padding: 0; font-size: var(--rk-wow-fs-tag); color: var(--text-secondary); }
.rk-teilen__wahl { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-card); color: var(--text-primary); font-size: var(--rk-wow-fs-meta); cursor: pointer; }
.rk-teilen__wahl input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--rk-gold-text); }
.rk-teilen__wahl span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-teilen__wahl:has(input:checked) { border-color: var(--rk-gold-text); box-shadow: inset 0 0 0 1px var(--rk-gold-text); }
.rk-teilen__wahl:has(input:focus-visible) { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }
.rk-teilen__kopieren { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; }
.rk-teilen__kopieren.is-kopiert { pointer-events: none; }
.rk-teilen__feld { display: grid; gap: 6px; }
.rk-teilen__feldtext { font-size: var(--rk-wow-fs-meta); color: var(--text-secondary); }
.rk-teilen__linkfeld { width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-sm);
  background: var(--rk-wow-card); color: var(--text-primary); font: inherit; font-size: var(--rk-wow-fs-meta); }
.rk-teilen__linkfeld:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }
.rk-teilen__wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rk-teilen__weg { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-sm); background: var(--rk-wow-card); color: var(--text-primary);
  font: inherit; font-size: var(--rk-wow-fs-meta); line-height: 1.2; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color .2s var(--rk-wow-ease), background-color .2s var(--rk-wow-ease); }
.rk-teilen__weg:focus-visible, .rk-teilen__zu:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }
@media (hover: hover) { .rk-teilen__weg:hover { border-color: var(--rk-gold-text); background: var(--surface-hover, var(--rk-wow-tint)); } }
.rk-teilen__klein { margin: 0; font-size: var(--rk-wow-fs-tag); color: var(--text-secondary); line-height: 1.45; }
.rk-teilen__qrfeld { display: grid; place-items: center; padding: 14px; border-radius: var(--rk-wow-r-md); background: var(--rk-teilen-qr-grund); }
.rk-teilen__qrbild { display: block; width: min(240px, 100%); height: auto; shape-rendering: crispEdges; }
.rk-teilen__qrlinie { stroke: var(--rk-teilen-qr-ink); }
.rk-teilen__qrtext { margin: 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.rk-teilen__qrknoepfe { display: grid; gap: 8px; }
.rk-teilen__qrknoepfe .rk-btn { justify-content: center; min-height: 48px; }
.rk-teilen__zurueck { justify-content: center; }
@media (min-width: 480px) { .rk-teilen__koerper { padding: 20px; } .rk-teilen__qrknoepfe { grid-template-columns: 1fr auto; } }

/* Sprungziele unter der Kopfleiste (Ab Abschnitt teilen, #frage-n) */
.ref :is(#ausgangslage, #vorgeschichte, #ablauf, #fragen, [id^="frage-"]) { scroll-margin-top: var(--rk-wow-sticky-top, 110px); }

/* ── Großansicht: „Dieses Bild teilen“ als eigene Zeile unter dem Fuß, nie über dem Bild ── */
.rk-teilen-bild { display: flex; justify-content: center; }
.rk-teilen__bildknopf { width: auto; min-height: 44px; }

/* ── Dunkelmodus: Fenster erhaben, Schalter mit festen Dunkelwerten und Goldrand (FLOW §10, §23) ── */
:root[data-theme="dark"] .rk-teilen__knopf { border-color: var(--rk-teilen-gold); box-shadow: var(--ph-erhaben); }
:root[data-theme="dark"] .rk-teilen--ende { box-shadow: var(--ph-erhaben); }
:root[data-theme="dark"] dialog.rk-mac.rk-teilen-fenster { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); border-color: 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) 18%, transparent); }
:root[data-theme="dark"] .rk-teilen-fenster::backdrop { background: color-mix(in srgb, var(--rk-wow-dark-bg) 82%, transparent); }
:root[data-theme="dark"] :is(.rk-teilen__weg, .rk-teilen__zu, .rk-teilen__wahl) { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border: 2px solid var(--rk-wow-dark-gold); }
:root[data-theme="dark"] :is(.rk-teilen__weg, .rk-teilen__zu):is(:hover, :focus-visible) { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); }
:root[data-theme="dark"] .rk-teilen__karte { background: var(--rk-wow-dark-bg); border-color: var(--rk-wow-dark-line-strong); }
:root[data-theme="dark"] .rk-teilen__linkfeld { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .rk-teilen-fenster .rk-btn--secondary { border: 2px solid var(--rk-wow-dark-gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rk-teilen__knopf { border-color: var(--rk-teilen-gold); box-shadow: var(--ph-erhaben); }
  :root:not([data-theme="light"]) .rk-teilen--ende { box-shadow: var(--ph-erhaben); }
  :root:not([data-theme="light"]) dialog.rk-mac.rk-teilen-fenster { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); border-color: 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) 18%, transparent); }
  :root:not([data-theme="light"]) .rk-teilen-fenster::backdrop { background: color-mix(in srgb, var(--rk-wow-dark-bg) 82%, transparent); }
  :root:not([data-theme="light"]) :is(.rk-teilen__weg, .rk-teilen__zu, .rk-teilen__wahl) { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border: 2px solid var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) :is(.rk-teilen__weg, .rk-teilen__zu):is(:hover, :focus-visible) { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); }
  :root:not([data-theme="light"]) .rk-teilen__karte { background: var(--rk-wow-dark-bg); border-color: var(--rk-wow-dark-line-strong); }
  :root:not([data-theme="light"]) .rk-teilen__linkfeld { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .rk-teilen-fenster .rk-btn--secondary { border: 2px solid var(--rk-wow-dark-gold); }
}

/* ── Bewegung reduziert: keine Übergänge, kein Einblenden des Fensters ── */
@media (prefers-reduced-motion: reduce) {
  .rk-teilen__knopf, .rk-teilen__weg, dialog.rk-mac.rk-teilen-fenster[open] { animation: none !important; transition: none !important; }
  .rk-teilen__knopf:hover { transform: none; }
}
html.no-motion :is(.rk-teilen__knopf, .rk-teilen__weg), html.no-motion dialog.rk-mac.rk-teilen-fenster[open],
[data-motion="reduced"] :is(.rk-teilen__knopf, .rk-teilen__weg), [data-motion="reduced"] dialog.rk-mac.rk-teilen-fenster[open] { animation: none !important; transition: none !important; }
html.no-motion .rk-teilen__knopf:hover, [data-motion="reduced"] .rk-teilen__knopf:hover { transform: none; }

@media print { .rk-teilen, .rk-teilen__knopf, .rk-teilen-halter > .rk-teilen__knopf, .rk-teilen-fenster, .rk-teilen-bild { display: none !important; } }