/* myWerkzeug.de – Spenden-Baustein (PayPal-Spendenlink, ohne SDK, ohne Tracking).
   Zwei Varianten:
     .spende-fuss   kompakter Knopf „Unterstützen“ für Fußzeilen (statisches HTML, braucht kein JS)
     .spende-karte  dezente Karte „Gefällt Ihnen myWerkzeug.de?“ – füllt /assets/spende.js in <div data-spende="karte">
   Eigene Farbvariablen (--sp-*) mit hellen Standardwerten und dunklen Werten über data-theme bzw. prefers-color-scheme,
   damit der Baustein auf jeder Seite gleich aussieht, egal welche Variablennamen die Seite sonst nutzt.
   Markenfarben Navy/Blau/Volt – nie die Größenfarben der Farbkonvention. Doku: docs/projekt/spende.md */

:root{
  --sp-ink:#0a1540;--sp-mut:#4f5a7d;--sp-flaeche:#ffffff;--sp-flaeche2:#f5f7fc;--sp-linie:#dbe1ee;
  --sp-blau:#1f3fe0;--sp-herz:#1f3fe0;--sp-volt:#c4ff1a;--sp-navy:#0a1540;
  --sp-knopf:#0a1540;--sp-knopf-tx:#ffffff;--sp-knopf-hover:#1a2a6e;--sp-knopf-herz:#c4ff1a;
  --sp-schatten:0 1px 2px rgba(10,21,64,.06),0 10px 30px rgba(10,21,64,.08);
  --sp-fokus:0 0 0 2px #ffffff,0 0 0 4px #1f3fe0;
}
:root[data-theme="dark"]{
  --sp-ink:#e6eaf6;--sp-mut:#b3bcd6;--sp-flaeche:#141b31;--sp-flaeche2:#19213c;--sp-linie:#2c375a;
  --sp-blau:#a9b9ff;--sp-herz:#c4ff1a;
  --sp-knopf:#c4ff1a;--sp-knopf-tx:#0a1540;--sp-knopf-hover:#d6ff5c;--sp-knopf-herz:#0a1540;
  --sp-schatten:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.32);
  --sp-fokus:0 0 0 2px #0b1020,0 0 0 4px #8ea3ff;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sp-ink:#e6eaf6;--sp-mut:#b3bcd6;--sp-flaeche:#141b31;--sp-flaeche2:#19213c;--sp-linie:#2c375a;
  --sp-blau:#a9b9ff;--sp-herz:#c4ff1a;
  --sp-knopf:#c4ff1a;--sp-knopf-tx:#0a1540;--sp-knopf-hover:#d6ff5c;--sp-knopf-herz:#0a1540;
  --sp-schatten:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.32);
  --sp-fokus:0 0 0 2px #0b1020,0 0 0 4px #8ea3ff;
}}

/* ---------- (a) Fußzeile: „♥ Unterstützen“ + „Warum?“ ---------- */
.spende-zeile{display:inline-flex;align-items:center;gap:4px 10px;flex-wrap:wrap;vertical-align:middle}
.spende-fuss{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 12px 3px 10px;border:1px solid color-mix(in srgb,currentColor 38%,transparent);
  border-radius:999px;color:inherit;font-weight:650;font-size:inherit;line-height:1.2;text-decoration:none!important;white-space:nowrap;
  transition:background-color .18s,border-color .18s,color .18s}
.spende-fuss:hover{border-color:var(--sp-herz);background:color-mix(in srgb,var(--sp-herz) 10%,transparent)}
.spende-fuss:focus-visible,.spende-mehr:focus-visible,.spende-knopf:focus-visible,.spende-zu:focus-visible,.spende-warum:focus-visible{outline:none;box-shadow:var(--sp-fokus)}
.spende-herz{width:14px;height:14px;flex:none;fill:var(--sp-herz);transform-origin:50% 60%}
.spende-fuss:hover .spende-herz,.spende-knopf:hover .spende-herz{animation:spende-schlag 1s ease-in-out 1}
.spende-warum{color:inherit;opacity:.85;font-size:.95em;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;border-radius:3px}
.spende-warum:hover{opacity:1}
.foot.spende-foot{margin-top:12px}
nav:has(> .spende-zeile),.fuss .wrap:has(.spende-zeile){align-items:center}
/* auf dunkler Fläche (z. B. Fußzeile der Startseite) leuchtet das Herz in Volt */
.spende-auf-navy{--sp-herz:#c4ff1a;--sp-fokus:0 0 0 2px #070f30,0 0 0 4px #c4ff1a}
@keyframes spende-schlag{0%,100%{transform:scale(1)}20%{transform:scale(1.22)}40%{transform:scale(.96)}60%{transform:scale(1.12)}}

/* ---------- (b) Karte ---------- */
.spende-karte{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 22px;
  margin:28px 0 8px;padding:20px 52px 20px 20px;border:1px solid var(--sp-linie);border-radius:14px;
  background:linear-gradient(115deg,var(--sp-flaeche) 55%,var(--sp-flaeche2));color:var(--sp-ink);box-shadow:var(--sp-schatten);
  font-size:15px;line-height:1.5;text-align:left;overflow:hidden}
.spende-karte::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(var(--sp-volt),#7d93ff)}
.spende-karte .spende-bild{width:64px;height:64px;flex:none}
.spende-karte .spende-bild svg{display:block;width:100%;height:100%}
.spende-karte .spende-eyebrow{margin:0 0 2px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--sp-mut)}
.spende-karte .spende-titel{margin:0;font-size:18px;font-weight:750;letter-spacing:-.01em;line-height:1.25;color:var(--sp-ink)}
.spende-karte .spende-satz{margin:4px 0 0;color:var(--sp-mut);max-width:62ch}
.spende-aktionen{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.spende-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;
  background:var(--sp-knopf);color:var(--sp-knopf-tx)!important;font-weight:700;font-size:15px;text-decoration:none!important;white-space:nowrap;
  transition:background-color .18s,transform .18s}
.spende-knopf:hover{background:var(--sp-knopf-hover)}
.spende-knopf:active{transform:translateY(1px)}
.spende-knopf .spende-herz{width:16px;height:16px;fill:var(--sp-knopf-herz)}
.spende-knopf .spende-pfeil{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.spende-mehr{align-self:center;padding:2px 4px;border-radius:4px;color:var(--sp-blau)!important;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.spende-zu{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;
  background:transparent;color:var(--sp-mut);cursor:pointer;font:inherit}
.spende-zu:hover{background:color-mix(in srgb,var(--sp-mut) 14%,transparent);color:var(--sp-ink)}
.spende-zu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* sanftes Erscheinen, sobald die Karte in Sicht kommt (nur ohne reduced motion, siehe spende.js) */
.spende-karte.spende-rein{opacity:0;transform:translateY(10px)}
.spende-karte.spende-da{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.spende-karte .spende-bild .sp-funke{transform-origin:center;transform-box:fill-box}
.spende-karte.spende-da .spende-bild .sp-funke{animation:spende-funke 2.4s ease-in-out .3s 2}
@keyframes spende-funke{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}

@media (max-width:720px){
  .spende-karte{grid-template-columns:auto minmax(0,1fr);padding:18px 46px 18px 18px}
  .spende-karte .spende-bild{width:52px;height:52px;align-self:start}
  .spende-aktionen{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px}
  .spende-knopf{flex:0 1 auto}
}
@media (max-width:480px){
  .spende-aktionen{flex-direction:column;align-items:stretch}
  .spende-knopf{flex:none}
}
@media (prefers-reduced-motion:reduce){
  .spende-fuss,.spende-knopf{transition:none}
  .spende-herz,.spende-karte .spende-bild .sp-funke{animation:none!important}
  .spende-karte.spende-rein,.spende-karte.spende-da{opacity:1;transform:none;transition:none}
}
@media print{.spende-karte,.spende-zeile,[data-spende]{display:none!important}}