/*! cr-spenden | Quelle: 06h-spenden.css */
@property --pv { syntax: '<number>'; inherits: true; initial-value: 0; }
@layer pages {
.goal { display: grid; gap: 0.5rem; --pv: var(--p); }
.goal.is-armed { --pv: 0; transition: --pv 1600ms var(--ease-out); }
.goal.is-armed.is-in { --pv: var(--p); }
.goal__nums { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; }
.goal__pct { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.goal__nums > span { font-size: 0.92rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.goal__bar { position: relative; block-size: 0.8rem; border-radius: var(--r-pill); background: color-mix(in oklab, var(--accent) 14%, var(--bg-alt)); overflow: hidden; }
.goal__fill {
position: absolute; inset: 0 auto 0 0; inline-size: calc(var(--pv) * 1%); border-radius: inherit;
background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 70%, #fff), var(--accent));
}
.goal__fill::after { 
content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%);
translate: -100% 0; animation: goal-shine 2.8s 1.2s var(--ease-in-out) 2; animation-play-state: var(--play, running);
}
@keyframes goal-shine { to { translate: 100% 0; } }
.goal__stand { font-size: 0.82rem; color: var(--ink-2); }
.goal--big .goal__pct { font-size: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.goal--big .goal__bar { block-size: 1.4rem; }
.goal--big .goal__nums > span { font-size: var(--step-1); color: var(--ink); font-weight: 700; }
.goal--open .goal__pct { font-size: var(--step-1); }
.sstand__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (width >= 60rem) { .sstand__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sstand__card { display: grid; gap: var(--space-s); padding: var(--space-l); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.sprojects { display: grid; gap: var(--space-m); }
.sfilter { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.sfilter .nfilter__chip i { background: var(--c); }
.sgrid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.sprojects:has(input[name="styp"][value="geld"]:checked) .sproj:not([data-typ="geld"]),
.sprojects:has(input[name="styp"][value="sach"]:checked) .sproj:not([data-typ="sach"]),
.sprojects:has(input[name="styp"][value="zeit"]:checked) .sproj:not([data-typ="zeit"]) { display: none; }
.sproj {
--accent: var(--t); display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-l); overflow: hidden;
background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
transition: translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
animation: sproj-in 600ms var(--ease-out) both;
}
.sproj[data-typ="geld"] { --accent-ink: light-dark(#0a5d4c, #6fd3bb); }
.sproj[data-typ="sach"] { --accent-ink: light-dark(#7d4a08, #f2c877); }
.sproj[data-typ="zeit"] { --accent-ink: light-dark(#005a91, #7cc4f2); }
@keyframes sproj-in { from { opacity: 0; translate: 0 0.6rem; } }
.sproj:hover { translate: 0 -4px; box-shadow: var(--shadow-2); }
.sproj__media { position: relative; aspect-ratio: 16 / 9; background: var(--img-color); overflow: hidden; }
.sproj__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 900ms var(--ease-out); }
.sproj:hover .sproj__media img { scale: 1.05; }
.sproj__typ, .sproj__when {
position: absolute; display: inline-flex; gap: 0.35rem; align-items: center; padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
font-size: 0.8rem; font-weight: 800; backdrop-filter: blur(8px);
}
.sproj__typ { top: 0.7rem; left: 0.7rem; background: var(--t); color: #fff; }
.sproj__when { bottom: 0.7rem; left: 0.7rem; background: rgb(15 23 32 / .62); color: #fff; }
.sproj__typ svg, .sproj__when svg { inline-size: 0.95rem; block-size: 0.95rem; }
.sproj__body { display: grid; gap: 0.7rem; align-content: start; padding: var(--space-m); }
.sproj__body h3 { font-size: var(--step-1); }
.sproj__body > p { color: var(--ink-2); }
.sproj__dates { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sproj__dates li { margin: 0; display: inline-flex; gap: 0.35rem; align-items: center; padding: 0.25rem 0.65rem; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent-ink); font-weight: 700; font-size: 0.85rem; }
.sproj__dates svg { inline-size: 0.9rem; }
.sproj__zweck { font-size: 0.9rem; color: var(--ink-2); }
.sproj__zweck b { color: var(--ink); }
.sproj__foot { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin-block-start: auto; padding-block-start: 0.3rem; }
.sproj .btn { --btn-bg: var(--t); --btn-ink: #fff; }
.sverein {
--ink: #f3f7f5; --ink-2: #cfe1db; --line: rgb(255 255 255 / .18); --surface: rgb(255 255 255 / .07); --focus: #ffe95c; --bg-alt: rgb(255 255 255 / .06);
--accent: var(--wiese); --accent-ink: #dbe86a; --on-accent: var(--schiefer); --accent-tint: rgb(255 255 255 / .1);
color-scheme: dark; color: var(--ink); background: #0b2a2a; position: relative; isolation: isolate; overflow: clip;
}
.sverein .display { color: #fff; }
.sverein .lead { color: var(--ink); }
.sverein p { color: var(--ink-2); }
.sverein__aura span { position: absolute; z-index: -1; inline-size: 55vmax; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 40%, transparent), transparent); animation: drift 32s var(--ease-breath) infinite alternate; animation-play-state: var(--play, running); }
.sverein__aura span:nth-child(1) { --c: var(--eibe); left: -18%; top: -30%; }
.sverein__aura span:nth-child(2) { --c: var(--wiese); right: -22%; bottom: -40%; animation-duration: 38s; }
.sverein__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.sverein__facts li { margin: 0; display: grid; gap: 0.3rem; padding: var(--space-m); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.sverein__facts b { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; color: var(--accent-ink); white-space: nowrap; }
.sverein__facts span { color: var(--ink-2); font-size: 0.95rem; }
.sverein__why { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); }
.sverein__why li { margin: 0; display: flex; gap: 0.9rem; align-items: start; }
.sverein__why svg { flex: none; inline-size: 2.6rem; block-size: 2.6rem; padding: 0.6rem; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); }
.sverein__why span { display: grid; gap: 0.15rem; color: var(--ink-2); }
.sverein__why b { color: #fff; font-size: var(--step-0); }
.sverein .card { background: var(--surface); border-color: var(--line); color: var(--ink); }
.sverein .card a { color: #fff; }
.sverein .formcard {
color-scheme: light; --bg: #fff; --bg-alt: var(--kalk); --surface: #fff; --ink: var(--schiefer); --ink-2: var(--schiefer-2); --ink-3: var(--schiefer-3);
--line: var(--linie); --focus: #0b5cd5; --accent: var(--eibe); --accent-ink: var(--eibe-ink); --accent-tint: var(--eibe-tint); --on-accent: #fff; color: var(--ink);
}
.sverein .formcard p { color: var(--ink-2); }
.sverein .formcard a { color: var(--accent-ink); }
.skonto__iban { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.skonto__iban b { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.copy-btn { appearance: none; border: 1px solid var(--line); background: var(--accent-tint); color: var(--accent-ink); border-radius: var(--r-pill); padding: 0.15rem 0.7rem; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.copy-btn:hover { border-color: var(--accent); }
.sdone { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.sdone li { margin: 0; }
.sdone article { display: grid; gap: 0.5rem; }
.sdone__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; background: var(--img-color); }
.sdone__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(0.85); transition: filter var(--dur-3), scale 900ms var(--ease-out); }
.sdone li:hover .sdone__img img { filter: saturate(1.05); scale: 1.04; }
.sdone__badge { position: absolute; top: 0.7rem; left: 0.7rem; display: inline-flex; gap: 0.3rem; align-items: center; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 0.8rem; font-weight: 800; }
.sdone__badge svg { inline-size: 0.95rem; block-size: 0.95rem; }
.sdone h3 { font-size: var(--step-1); }
.sdone h3 a { color: inherit; text-decoration-color: color-mix(in oklab, var(--accent) 50%, transparent); }
.sdone p { color: var(--ink-2); }
}