/* ═══════════════════════════════════════════════════════════════════════
   Spendenaktion (Andreas 10.10.2026)
   Grundordnung aus design.css: Abstände 4er-Raster, Radien 6/10/14/20,
   Pille nur für Knöpfe. Projekte stehen direkt vor dem Hintergrund (keine
   Karte in Karte), nur das Spendenformular ist eine Fläche.
   ═══════════════════════════════════════════════════════════════════════ */

.spa-wurzel{--spa-gold:#e8c552;--spa-gruen:#5fbf8a;}
.spa-kopf{max-width:780px;margin:0 0 var(--at-ab-3xl,48px);}
.spa-kopf .s-sub{max-width:68ch;}
.spa-h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--t-hi);margin:0 0 var(--at-ab-s,8px);}
.spa-unter{color:var(--t-lo);font-size:15px;line-height:1.6;margin:0 0 var(--at-ab-xl,24px);max-width:62ch;}
.spa-leer{color:var(--t-mid);font-size:15px;line-height:1.6;padding:var(--at-ab-l,16px) 0;border-top:1px solid var(--border);}

/* Gesamtstand */
.spa-stand{display:flex;flex-wrap:wrap;gap:var(--at-ab-xl,24px) var(--at-ab-3xl,48px);margin:var(--at-ab-xl,24px) 0 0;padding:var(--at-ab-l,16px) 0 0;border-top:1px solid var(--border);}
.spa-stand div{display:flex;flex-direction:column-reverse;gap:2px;}
.spa-stand dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo);}
.spa-stand dd{margin:0;font-size:clamp(24px,3vw,34px);font-weight:700;color:var(--t-hi);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}

/* Meldungen */
.spa-meldung{margin:0 0 var(--at-ab-2xl,32px);padding:var(--at-ab-l,16px) var(--at-ab-xl,24px);border-radius:var(--at-radius-m,14px);border:1px solid rgba(130,140,185,.32);background:rgba(20,23,38,.6);color:var(--t-mid);font-size:15px;line-height:1.6;}
.spa-meldung p{margin:0;}
.spa-meldung--danke{border-color:rgba(95,191,138,.5);background:linear-gradient(180deg,rgba(80,160,110,.16),rgba(80,160,110,.06));}
.spa-meldung-titel{font-size:18px;font-weight:700;color:var(--t-hi);margin:0 0 4px !important;}

/* Raster: Projekte links, Formular rechts (ab Tablet quer) */
.spa-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--at-ab-3xl,48px);align-items:start;margin:0 0 var(--at-ab-4xl,64px);}
@media (min-width:1024px){
  .spa-raster{grid-template-columns:minmax(0,1fr) 400px;gap:var(--at-ab-4xl,64px);}
  .spa-formular-spalte{position:sticky;top:calc(var(--nav-h,72px) + var(--subnav-h,0px) + 24px);}
}

/* Projekt: Bild links, Inhalt rechts; auf dem Telefon untereinander */
.spa-projekt{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--at-ab-l,16px);padding:var(--at-ab-xl,24px) 0;border-top:1px solid var(--border);scroll-margin-top:calc(var(--nav-h,72px) + 24px);}
.spa-projekt:last-child{border-bottom:1px solid var(--border);}
@media (min-width:640px){
  .spa-projekt:has(.spa-projekt-bild){grid-template-columns:180px minmax(0,1fr);gap:var(--at-ab-xl,24px);}
}
.spa-projekt-bild{border-radius:var(--at-radius-m,14px);overflow:hidden;aspect-ratio:4/3;background:rgba(255,255,255,.04);}
.spa-projekt-bild img{display:block;width:100%;height:100%;object-fit:cover;}
.spa-projekt-inhalt{min-width:0;}
.spa-projekt.ist-gewaehlt .spa-projekt-titel{color:#fff;}
.spa-projekt.ist-gewaehlt{box-shadow:inset 3px 0 0 var(--at-acc-1,#6b93d6);padding-left:var(--at-ab-l,16px);transition:padding var(--at-dur,.22s) var(--at-ease,ease);}

.spa-wahl{display:flex;align-items:flex-start;gap:var(--at-ab-m,12px);cursor:pointer;margin:0 0 var(--at-ab-s,8px);}
.spa-wahl input[type=checkbox]{margin-top:5px !important;width:20px !important;height:20px !important;min-width:20px !important;max-width:20px !important;min-height:20px !important;}
.spa-projekt-titel{font-size:clamp(18px,2vw,21px);font-weight:700;line-height:1.3;color:var(--t-hi);}
.spa-projekt-kurz{margin:0 0 var(--at-ab-s,8px) 32px;color:var(--t-mid);font-size:15px;line-height:1.6;max-width:64ch;}
.spa-projekt-mehr{margin:0 0 var(--at-ab-m,12px) 32px;}
.spa-projekt-mehr>summary{cursor:pointer;color:var(--acc,#8eb8f0);font-size:14px;font-weight:600;min-height:32px;display:inline-flex;align-items:center;}
.spa-projekt-text{color:var(--t-mid);font-size:15px;line-height:1.7;max-width:66ch;}
.spa-projekt-text p{margin:.5em 0;}

/* Fortschrittsbalken (Radius 6 -- kein Knopf) */
.spa-balken{position:relative;height:10px;border-radius:var(--at-radius-xs,6px);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 2px rgba(0,0,0,.35);overflow:hidden;margin:var(--at-ab-m,12px) 0 var(--at-ab-s,8px);}
.spa-balken>span{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--at-verlauf-akzent,linear-gradient(180deg,#6b93d6,#46689f));box-shadow:0 0 12px rgba(107,147,214,.45);transition:width .8s cubic-bezier(.22,.61,.36,1);}
.spa-zahlen{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 var(--at-ab-m,12px);font-size:14px;color:var(--t-lo);font-variant-numeric:tabular-nums;}
.spa-zahlen strong{font-size:17px;color:var(--t-hi);}
.spa-proz{color:var(--acc,#8eb8f0);font-weight:700;}
.spa-anzahl{margin-left:auto;}

/* Spenderliste */
.spa-spender-liste{list-style:none;margin:0;padding:0;}
.spa-spender-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--at-ab-m,12px);align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(130,140,185,.14);font-size:14px;}
.spa-spender-liste li:last-child{border-bottom:0;}
.spa-spender-rest{border-top:1px solid rgba(130,140,185,.14);}
.spa-spender-name{color:var(--t-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spa-spender-datum{color:var(--t-lo);font-size:13px;font-variant-numeric:tabular-nums;}
.spa-spender-betrag{color:var(--spa-gold);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;}
.spa-spender-anteil{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t-lo);margin-right:6px;}
.spa-spender-leer{margin:0;color:var(--t-lo);font-size:14px;font-style:italic;}
.spa-erweitern{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:4px 0 0;padding:0 4px;border:0;background:none;color:var(--acc,#8eb8f0);font:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:var(--at-radius-xs,6px);}
.spa-erweitern svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--at-dur,.22s) var(--at-ease,ease);}
.spa-erweitern[aria-expanded="true"] svg{transform:rotate(180deg);}
.spa-erweitern:focus-visible{outline:2px solid var(--at-acc-1,#6b93d6);outline-offset:2px;}
.spa-erweitern-zahl{color:var(--t-lo);font-weight:400;}

/* Formularfläche */
.spa-formular{padding:var(--at-ab-xl,24px);border-radius:var(--at-radius-l,20px);border:1px solid var(--border-h,rgba(107,112,148,.32));background:var(--at-glas-1,rgba(46,50,80,.52));-webkit-backdrop-filter:var(--at-glas-1-weich,blur(14px));backdrop-filter:var(--at-glas-1-weich,blur(14px));box-shadow:var(--at-schatten-3),var(--at-kante);scroll-margin-top:calc(var(--nav-h,72px) + 24px);}
@media (min-width:480px){.spa-formular{padding:var(--at-ab-2xl,32px);}}
.spa-formular fieldset{border:0;margin:0;padding:0;min-width:0;}
.spa-formular legend,.spa-verteilung-titel{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo);margin:0 0 var(--at-ab-s,8px);padding:0;}
.spa-betrag-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--at-ab-s,8px);margin:0 0 var(--at-ab-m,12px);}
.spa-betrag{min-height:var(--at-hoehe,44px);padding:0 6px;border-radius:999px;border:1px solid rgba(130,140,185,.42);background:rgba(255,255,255,.04);color:var(--t-hi);font:inherit;font-size:15px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;transition:background var(--at-dur,.22s),border-color var(--at-dur,.22s),color var(--at-dur,.22s);}
.spa-betrag:hover{border-color:var(--at-acc-1,#6b93d6);}
.spa-betrag[aria-pressed="true"]{background:var(--at-verlauf);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(61,99,171,.32),inset 0 1px 0 rgba(255,255,255,.2);}
.spa-betrag:focus-visible{outline:2px solid var(--at-acc-1,#6b93d6);outline-offset:2px;}
.spa-feld{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--at-ab-m,12px);font-size:13px;color:var(--t-lo);}
.spa-feld[hidden]{display:none;}
.spa-feld .atmed-feld{width:100%;box-sizing:border-box;}
.spa-hilfe{margin:-4px 0 var(--at-ab-l,16px);font-size:12.5px;line-height:1.55;color:var(--t-mut,#8b90aa);}
.spa-hilfe a{color:var(--acc,#8eb8f0);}
.spa-haken{display:flex;align-items:flex-start;gap:10px;margin:var(--at-ab-s,8px) 0 var(--at-ab-m,12px);font-size:14.5px;color:var(--t-mid);cursor:pointer;line-height:1.45;}
.spa-haken input{margin-top:1px !important;}

.spa-verteilung{margin:var(--at-ab-s,8px) 0 var(--at-ab-l,16px);padding:var(--at-ab-m,12px) var(--at-ab-l,16px);border-radius:var(--at-radius-s,10px);background:var(--at-glas-2,rgba(13,15,23,.34));box-shadow:inset 0 1px 2px rgba(0,0,0,.25);}
.spa-verteilung-leer{margin:0;color:var(--t-mid);font-size:14px;line-height:1.5;}
.spa-verteilung-liste{list-style:none;margin:0;padding:0;}
.spa-verteilung-liste li{display:flex;justify-content:space-between;gap:var(--at-ab-m,12px);padding:5px 0;font-size:14px;color:var(--t-mid);border-bottom:1px solid rgba(130,140,185,.14);}
.spa-verteilung-liste li:last-child{border-bottom:0;}
.spa-verteilung-liste li.spa-summe{font-weight:700;color:var(--t-hi);border-top:1px solid rgba(130,140,185,.3);margin-top:2px;}
.spa-verteilung-liste span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--spa-gold);}
.spa-verteilung-liste li.spa-summe span:last-child{color:var(--t-hi);}

.spa-absenden{width:100%;justify-content:center;margin:var(--at-ab-s,8px) 0 0;}
.spa-meldung-zeile{min-height:1.4em;margin:var(--at-ab-s,8px) 0 0;font-size:14px;color:#f0a3a3;}
.spa-meldung-zeile.ist-gut{color:var(--spa-gruen);}
.spa-sicher{display:flex;gap:8px;align-items:flex-start;margin:var(--at-ab-s,8px) 0 0;font-size:12.5px;line-height:1.5;color:var(--t-mut,#8b90aa);}
.spa-sicher svg{flex:0 0 16px;width:16px;height:16px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;}

/* Verwendung: Akkordeon je Projekt */
.spa-transparenz>p{color:var(--t-mid);max-width:66ch;}
.spa-akkordeon{border-top:1px solid var(--border);margin-top:var(--at-ab-l,16px);}
.spa-akk{border-bottom:1px solid var(--border);}
.spa-akk>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 20px;gap:var(--at-ab-m,12px);align-items:center;min-height:56px;padding:var(--at-ab-s,8px) 0;cursor:pointer;}
.spa-akk>summary::-webkit-details-marker{display:none;}
.spa-akk>summary:focus-visible{outline:2px solid var(--at-acc-1,#6b93d6);outline-offset:2px;border-radius:var(--at-radius-xs,6px);}
.spa-akk-titel{font-weight:700;color:var(--t-hi);font-size:16px;line-height:1.35;}
.spa-akk-wert{font-size:13.5px;color:var(--t-lo);font-variant-numeric:tabular-nums;white-space:nowrap;}
.spa-akk>summary svg{width:20px;height:20px;fill:none;stroke:var(--t-lo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--at-dur-l,.34s) var(--at-ease,ease);}
.spa-akk[open]>summary svg{transform:rotate(180deg);}
.spa-akk-inhalt{padding:0 0 var(--at-ab-xl,24px);}
.spa-verwendung-leer{margin:0;color:var(--t-lo);font-size:14.5px;line-height:1.6;max-width:66ch;}
.spa-verwendung-tabelle{width:100%;border-collapse:collapse;font-size:14px;}
.spa-verwendung-tabelle th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-lo);font-weight:600;padding:6px 8px 6px 0;border-bottom:1px solid rgba(130,140,185,.3);}
.spa-verwendung-tabelle td{padding:9px 8px 9px 0;border-bottom:1px solid rgba(130,140,185,.14);color:var(--t-mid);vertical-align:top;}
.spa-verwendung-tabelle .spa-r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.spa-verwendung-tabelle code{font-size:12.5px;color:var(--t-hi);background:rgba(255,255,255,.06);padding:2px 6px;border-radius:var(--at-radius-xs,6px);}
.spa-verwendung-tabelle a,.spa-teilen a:not(.atmed-btn){color:var(--acc,#8eb8f0);}
.spa-gedaempft{color:var(--t-lo);}
@media (max-width:640px){
  .spa-verwendung-tabelle thead{display:none;}
  .spa-verwendung-tabelle tr{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 0;border-bottom:1px solid rgba(130,140,185,.14);}
  .spa-verwendung-tabelle td{border:0;padding:0;display:contents;}
  .spa-verwendung-tabelle td::before{content:attr(data-l);font-size:12px;color:var(--t-lo);}
  .spa-verwendung-tabelle .spa-r{text-align:left;}
}
.spa-spender--allg{margin-top:var(--at-ab-xl,24px);}

/* Weitersagen */
.spa-teilen-raster{display:flex;flex-wrap:wrap;gap:var(--at-ab-xl,24px);align-items:flex-start;}
.spa-teilen-raster>div{flex:1 1 280px;}
.spa-teilen-raster p{margin:0 0 var(--at-ab-m,12px);color:var(--t-mid);max-width:60ch;}
.spa-teilen-qr{flex:0 0 132px;width:132px;height:132px;border-radius:var(--at-radius-s,10px);background:#fff;padding:8px;box-sizing:border-box;}

/* ── Einbinden-Seite ── */
.spa-schritte{margin:0 0 var(--at-ab-l,16px);padding-left:1.2em;color:var(--t-mid);}
.spa-schritte li{margin:0 0 6px;}
.spa-schritte a{color:var(--acc,#8eb8f0);}
.spa-hinweis{font-size:13.5px;color:var(--t-lo);line-height:1.6;max-width:70ch;}
.spa-hinweis code,.spa-banner-titel code,.legal-section p code{font-size:12.5px;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:var(--at-radius-xs,6px);color:var(--t-hi);}
.spa-banner-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--at-ab-2xl,32px);margin-top:var(--at-ab-l,16px);}
.spa-banner{padding:0 0 var(--at-ab-2xl,32px);border-bottom:1px solid rgba(130,140,185,.16);min-width:0;}
.spa-banner:last-child{border-bottom:0;padding-bottom:0;}
.spa-banner-titel{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 var(--at-ab-m,12px) !important;color:var(--t-hi);}
.spa-banner-titel span{color:var(--t-lo);font-size:14px;}
.spa-banner-vorschau{max-width:100%;overflow:hidden;margin:0 0 var(--at-ab-m,12px);}
.spa-banner-vorschau img,.spa-banner-vorschau iframe{display:block;max-width:100%;border-radius:var(--at-radius-xs,6px);}
.spa-banner-vorschau img{height:auto;}
.spa-code{display:block;margin:0 0 var(--at-ab-s,8px);}
.spa-code textarea{width:100%;box-sizing:border-box;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;min-height:72px;}
.spa-code-leiste{display:flex;flex-wrap:wrap;gap:var(--at-ab-s,8px);align-items:center;}
.spa-knopf-vorschau{display:flex;flex-wrap:wrap;gap:var(--at-ab-l,16px);margin:var(--at-ab-m,12px) 0;}
.spa-knopf-hell{display:inline-flex;padding:var(--at-ab-l,16px) var(--at-ab-xl,24px);background:#fff;border-radius:var(--at-radius-s,10px);}
.spa-qr-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--at-ab-xl,24px);margin-top:var(--at-ab-l,16px);align-items:end;}
.spa-qr{margin:0;min-width:0;}
.spa-qr img{display:block;width:100%;height:auto;border-radius:var(--at-radius-s,10px);box-shadow:var(--at-schatten-2);}
.spa-qr figcaption{display:flex;flex-direction:column;gap:2px;margin-top:var(--at-ab-s,8px);font-size:13px;color:var(--t-lo);line-height:1.45;}
.spa-qr figcaption strong{color:var(--t-hi);font-size:14px;}
.spa-qr figcaption a{color:var(--acc,#8eb8f0);font-weight:600;}
.spa-zurueck{margin-top:var(--at-ab-2xl,32px);}

@media (prefers-reduced-motion:reduce){
  .spa-balken>span,.spa-erweitern svg,.spa-akk>summary svg{transition:none;}
}

/* Abschnittsüberschriften: atmedical-legal.css lädt nur auf page.php,
   deshalb hier dieselbe Typografie. */
.spa-wurzel .legal-section h2{font-size:clamp(19px,2.4vw,26px);font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--t-hi);margin:0 0 .55em;}
.spa-wurzel .legal-section>p{color:var(--t-mid);line-height:1.7;margin:0 0 1em;max-width:68ch;}

/* Schwebender Knopf „Weiter zur Spende" (nur unter 1024 px, siehe spenden.js) */
/* a.spa-weiter.atmed-btn: design.css setzt a.atmed-btn{position:relative} und lädt zuletzt (QK 10.10.2026). */
.spa-weiter,a.spa-weiter.atmed-btn{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:900;min-height:var(--at-hoehe,44px);padding:0 24px;box-shadow:0 14px 34px rgba(0,0,0,.55),0 8px 18px rgba(61,99,171,.35);white-space:nowrap;}
.spa-weiter[hidden]{display:none !important;}
.spa-weiter span{font-weight:500;opacity:.85;margin-left:4px;}
@media (min-width:1024px){.spa-weiter{display:none !important;}}
/* Telefon: über den schwebenden Knöpfen (Cookie-Einstellungen links, Barrierefreiheit rechts) bleiben, sonst überdecken sie die Knopfränder (QK 10.10.2026). */
@media (max-width:599px){.spa-weiter,a.spa-weiter.atmed-btn{bottom:calc(84px + env(safe-area-inset-bottom,0px));}}
.spa-code-leiste + .spa-hinweis{margin-top:var(--at-ab-m,12px);}
/* 11.10.2026: Leerzeile vor dem Zuwendungstext */
.spa-hilfe.spa-zuwendung{margin-top:20px;}