*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --teal: #00a8cc; --teal-dark: #007fa3; --teal-pale: #e6f7fb; --teal-mid: #b3e6f5; --ink: #0f1f2e; --slate: #4a6070; --mist: #f0f8fb; --white: #ffffff; --gold: #f5a623; --radius: 18px; --shadow-sm: 0 2px 12px rgba(0,168,204,.10); --shadow-lg: 0 16px 56px rgba(0,168,204,.18); } body { font-family: 'DM Sans', sans-serif; background: var(--mist); color: var(--ink); line-height: 1.65; } /* ─── HERO ──────────────────────────────────────────────── */ .hero { position: relative; background: linear-gradient(140deg, #003d52 0%, #006180 45%, #00a8cc 100%); overflow: hidden; padding: 6rem 2rem 5rem; text-align: center; } .hero__bg-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); } .hero__bg-ring:nth-child(1) { width:600px;height:600px;top:-200px;right:-150px; } .hero__bg-ring:nth-child(2) { width:400px;height:400px;bottom:-150px;left:-80px; } .hero__bg-ring:nth-child(3) { width:200px;height:200px;top:60px;left:10%; } .hero__tag { display: inline-block; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .4rem 1.1rem; border-radius: 100px; margin-bottom: 1.5rem; animation: fadeUp .6s .1s both; } .hero__title { font-family: 'Fraunces', serif; font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900; color: #fff; line-height: 1.1; max-width: 700px; margin: 0 auto 1.25rem; animation: fadeUp .6s .2s both; } .hero__title em { font-style: italic; font-weight: 300; color: var(--teal-mid); } .hero__sub { font-size: 1.05rem; color: rgba(255,255,255,.75); max-width: 560px; margin: 0 auto 2.5rem; font-weight: 300; animation: fadeUp .6s .3s both; } .hero__cta { display: inline-flex; align-items: center; gap: .6rem; background: var(--teal); color: #fff; font-weight: 600; font-size: 1rem; padding: .9rem 2.2rem; border-radius: 100px; text-decoration: none; box-shadow: 0 8px 28px rgba(0,168,204,.45); transition: transform .2s, box-shadow .2s; animation: fadeUp .6s .4s both; } .hero__cta:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,168,204,.5); } .hero__cta svg { transition: transform .2s; } .hero__cta:hover svg { transform: translateX(4px); } /* ─── STATS STRIP ────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--white); box-shadow: var(--shadow-sm); } .stat { padding: 2rem 1.5rem; text-align: center; border-right: 1px solid #e8f4f8; animation: fadeUp .6s .5s both; } .stat:last-child { border-right: none; } .stat__num { font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 900; color: var(--teal); line-height: 1; margin-bottom: .2rem; } .stat__label { font-size: .82rem; color: var(--slate); font-weight: 400; } /* ─── WRAPPER ────────────────────────────────────────────── */ .page { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; } /* ─── SECTION HEADING ────────────────────────────────────── */ .section-label { font-size: .73rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--teal); margin-bottom: .5rem; } .section-title { font-family: 'Fraunces', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 1.2rem; } .section-body { font-size: .97rem; color: var(--slate); max-width: 600px; } /* ─── TWO-COL ABOUT ──────────────────────────────────────── */ .about { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 5rem; } .about__visual { position: relative; } .about__card { background: linear-gradient(135deg, #003d52, #006180); border-radius: var(--radius); padding: 2.5rem 2rem; color: #fff; position: relative; overflow: hidden; } .about__card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(0,168,204,.2); } .about__card-title { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 700; margin-bottom: .75rem; } .about__card-text { font-size: .88rem; opacity: .8; line-height: 1.6; margin-bottom: 1.5rem; } .about__bank { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 1rem 1.2rem; } .about__bank-row { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: .4rem; gap: 1rem; } .about__bank-row:last-child { margin-bottom: 0; } .about__bank-row span:first-child { opacity: .65; flex-shrink: 0; } .about__bank-row span:last-child { font-weight: 500; text-align: right; word-break: break-all; } .about__float { position: absolute; bottom: -18px; right: -18px; background: var(--gold); color: #fff; border-radius: 14px; padding: .9rem 1.2rem; font-size: .78rem; font-weight: 700; box-shadow: 0 8px 24px rgba(245,166,35,.35); text-align: center; line-height: 1.3; } .about__float span { display: block; font-size: 1.4rem; font-family: 'Fraunces', serif; } /* ─── PILLARS ────────────────────────────────────────────── */ .pillars { margin-bottom: 5rem; } .pillars__head { margin-bottom: 2.5rem; } .pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .pillar { background: var(--white); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); border-top: 4px solid var(--teal); transition: transform .25s, box-shadow .25s; } .pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .pillar__icon { width: 48px; height: 48px; background: var(--teal-pale); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; } .pillar__title { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; } .pillar__text { font-size: .88rem; color: var(--slate); } /* ─── IMPACT NUMBERS ─────────────────────────────────────── */ .impact { background: linear-gradient(135deg, var(--teal-pale) 0%, var(--mist) 100%); border-radius: var(--radius); padding: 3.5rem 2.5rem; margin-bottom: 5rem; display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem; align-items: center; } .impact__left .section-title { margin-bottom: .8rem; } .impact__left p { font-size: .9rem; color: var(--slate); margin-bottom: 1.5rem; } .impact__link { display: inline-flex; align-items: center; gap: .4rem; color: var(--teal-dark); font-weight: 600; font-size: .88rem; text-decoration: none; border-bottom: 2px solid var(--teal-mid); padding-bottom: 1px; transition: border-color .2s; } .impact__link:hover { border-color: var(--teal); } .impact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .impact__item { background: var(--white); border-radius: 14px; padding: 1.4rem 1.2rem; box-shadow: var(--shadow-sm); } .impact__num { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 900; color: var(--teal); line-height: 1; margin-bottom: .25rem; } .impact__desc { font-size: .8rem; color: var(--slate); } /* ─── HOW IT WORKS ───────────────────────────────────────── */ .howto { margin-bottom: 5rem; text-align: center; } .howto__head { margin-bottom: 3rem; } .howto__head .section-body { margin: 0 auto; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; } .steps::before { content: ''; position: absolute; top: 32px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--teal-pale), var(--teal), var(--teal-pale)); } .step { position: relative; padding-top: 1rem; } .step__num { width: 64px; height: 64px; background: var(--white); border: 3px solid var(--teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 900; color: var(--teal); margin: 0 auto 1.25rem; position: relative; z-index: 1; box-shadow: var(--shadow-sm); } .step__title { font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: .4rem; } .step__text { font-size: .82rem; color: var(--slate); } /* ─── DONATION WIDGET ────────────────────────────────────── */ .donate-section { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 3rem 3rem; margin-bottom: 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .donate__left .section-title { margin-bottom: .75rem; } .donate__left p { font-size: .9rem; color: var(--slate); margin-bottom: 1.5rem; } .donate__promises { list-style: none; } .donate__promises li { display: flex; align-items: flex-start; gap: .65rem; font-size: .88rem; color: var(--slate); margin-bottom: .7rem; } .donate__promises li::before { content: '✓'; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; background: var(--teal-pale); color: var(--teal-dark); border-radius: 50%; font-size: .72rem; font-weight: 700; margin-top: 1px; } /* Form */ .form__freq { display: flex; background: var(--mist); border-radius: 10px; padding: 4px; gap: 4px; margin-bottom: 1.5rem; } .freq-btn { flex: 1; border: none; background: transparent; border-radius: 7px; padding: .5rem .3rem; font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 500; color: var(--slate); cursor: pointer; transition: all .2s; } .freq-btn.active { background: var(--white); color: var(--teal-dark); box-shadow: 0 2px 8px rgba(0,0,0,.07); font-weight: 600; } .form__label { font-size: .73rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); margin-bottom: .6rem; display: block; } .amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; } .amt-btn { border: 2px solid var(--teal-mid); background: var(--white); border-radius: 10px; padding: .6rem .4rem; font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; color: var(--teal-dark); cursor: pointer; transition: all .2s; text-align: center; } .amt-btn:hover { border-color: var(--teal); background: var(--teal-pale); } .amt-btn.active { border-color: var(--teal); background: var(--teal); color: var(--white); box-shadow: 0 4px 14px rgba(0,168,204,.3); } .custom-wrap { position: relative; margin-bottom: 1.4rem; } .custom-wrap span { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--slate); font-weight: 500; } .custom-input { width: 100%; padding: .75rem 1rem .75rem 2rem; border: 2px solid #d8eef4; border-radius: 10px; font-family: 'Fraunces', serif; font-size: 1rem; color: var(--ink); outline: none; transition: border-color .2s; } .custom-input:focus { border-color: var(--teal); } .custom-input::placeholder { font-family: 'DM Sans', sans-serif; font-size: .85rem; color: #aac5cf; } .form__divider { height: 1px; background: #e6f3f7; margin: 1.2rem 0; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: .7rem; } .field { display: flex; flex-direction: column; gap: .3rem; } .field.full { grid-column: 1/-1; } .field label { font-size: .73rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); } .field input { padding: .7rem .9rem; border: 2px solid #d8eef4; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: .9rem; color: var(--ink); outline: none; transition: border-color .2s; } .field input:focus { border-color: var(--teal); } .privacy-row { display: flex; align-items: flex-start; gap: .5rem; font-size: .79rem; color: var(--slate); margin: 1rem 0 1.25rem; } .privacy-row input { accent-color: var(--teal); margin-top: 2px; flex-shrink: 0; } .privacy-row a { color: var(--teal); } .submit-btn { width: 100%; padding: 1rem; background: linear-gradient(135deg, var(--teal-dark), var(--teal)); color: #fff; border: none; border-radius: 12px; font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all .25s; box-shadow: 0 6px 22px rgba(0,168,204,.35); letter-spacing: .02em; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,168,204,.45); } .submit-btn:active { transform: translateY(0); } .trust-row { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: .3rem; font-size: .73rem; color: var(--slate); } /* ─── QUOTE STRIP ────────────────────────────────────────── */ .quote-strip { background: linear-gradient(135deg, #003d52, #006180); border-radius: var(--radius); padding: 3.5rem 3rem; text-align: center; margin-bottom: 5rem; position: relative; overflow: hidden; } .quote-strip::before { content: '"'; position: absolute; top: -20px; left: 2rem; font-family: 'Fraunces', serif; font-size: 14rem; color: rgba(255,255,255,.05); line-height: 1; } .quote-strip blockquote { font-family: 'Fraunces', serif; font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-style: italic; font-weight: 300; color: #fff; max-width: 700px; margin: 0 auto 1.2rem; line-height: 1.4; position: relative; } .quote-strip cite { display: block; font-style: normal; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-mid); } /* ─── FAQ ────────────────────────────────────────────────── */ .faq { margin-bottom: 5rem; } .faq__head { margin-bottom: 2rem; } .faq__list { display: flex; flex-direction: column; gap: .75rem; max-width: 720px; } .faq__item { background: var(--white); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; } .faq__q { width: 100%; background: none; border: none; padding: 1.1rem 1.4rem; text-align: left; font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 600; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq__q .chevron { width: 20px; height: 20px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .25s, background .2s; font-size: .7rem; } .faq__item.open .faq__q .chevron { transform: rotate(180deg); background: var(--teal); color: #fff; } .faq__a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .3s; font-size: .88rem; color: var(--slate); padding: 0 1.4rem; } .faq__item.open .faq__a { max-height: 300px; padding: 0 1.4rem 1.2rem; } /* ─── FOOTER CTA ─────────────────────────────────────────── */ .footer-cta { text-align: center; padding: 4rem 2rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 2rem; } .footer-cta .section-title { margin-bottom: .75rem; max-width: 600px; margin-left: auto; margin-right: auto; } .footer-cta p { color: var(--slate); font-size: .92rem; margin-bottom: 2rem; } .cta-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--teal); color: #fff; font-weight: 600; font-size: .95rem; padding: .85rem 2rem; border-radius: 100px; text-decoration: none; box-shadow: 0 6px 22px rgba(0,168,204,.35); transition: transform .2s, box-shadow .2s; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,168,204,.45); } .btn-outline { display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: var(--teal-dark); font-weight: 600; font-size: .95rem; padding: .85rem 2rem; border-radius: 100px; text-decoration: none; border: 2px solid var(--teal-mid); transition: border-color .2s, color .2s; } .btn-outline:hover { border-color: var(--teal); color: var(--teal); } /* ─── ANIMATIONS ─────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .animate { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .animate.visible { opacity: 1; transform: translateY(0); } /* ─── SUCCESS ────────────────────────────────────────────── */ #successMsg { display: none; text-align: center; padding: 2.5rem 1.5rem; animation: fadeUp .5s ease both; } #successMsg .big { font-size: 3.5rem; margin-bottom: .75rem; } #successMsg h3 { font-family: 'Fraunces', serif; color: var(--teal); font-size: 1.5rem; margin-bottom: .4rem; } #successMsg p { font-size: .88rem; color: var(--slate); } /* ─── RESPONSIVE ─────────────────────────────────────────── */ @media (max-width: 860px) { .about, .donate-section, .impact { grid-template-columns: 1fr; } .pillars__grid, .steps { grid-template-columns: 1fr 1fr; } .steps::before { display: none; } } @media (max-width: 540px) { .pillars__grid, .steps { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .stat { border-right: none; border-bottom: 1px solid #e8f4f8; } .field-row { grid-template-columns: 1fr; } .donate-section { padding: 2rem 1.5rem; } } /* WP Charitable overrides */ .adiyuva-wrap * { box-sizing: border-box; }

🌍 ADIYUVA Stiftung

Gemeinsam Leben retten & Zukunft gestalten

Ihre Spende ermöglicht nachhaltige Hilfe — für Bildung, Gesundheit und soziale Gerechtigkeit weltweit.

Jetzt spenden
0
Menschen unterstützt
0
Aktive Projekte
0
% der Spenden fließen direkt

Hoffnung schaffen,wo sie gebraucht wird

ADIYUVA bedeutet "Hilf dir selbst" — und genau das ist unser Ansatz. Wir befähigen Menschen, ihre eigene Zukunft zu gestalten, statt Abhängigkeiten zu schaffen.

Jeder Mensch verdient Würde, Zugang zu Bildung und ein Leben in Sicherheit. Mit Ihrer Unterstützung schaffen wir nachhaltige Strukturen, die über unsere Arbeit hinaus bestehen.

💳 Per Überweisung spenden

Sichere Direktüberweisung — 100% transparent und steuerlich absetzbar.

EmpfängerADIYUVA e.V.
IBANDE09 4306 0967 1353 0490 00
BICGENODEM1GLS
VerwendungGemeinsam Leben retten
98%direktweitergeleitet

Wo Ihre Spende wirkt

📚

Bildung

Schulen bauen, Lehrmittel bereitstellen, Stipendien vergeben — Wissen ist der Schlüssel zur Selbstermächtigung.

🏥

Gesundheit

Medizinische Versorgung, Prävention und Aufklärung in Regionen ohne ausreichende Infrastruktur.

🤝

Soziale Stärkung

Gemeinschaften stärken, lokale Strukturen fördern und nachhaltige Veränderungen von innen heraus ermöglichen.

Zahlen, die bewegen

Transparenz ist uns wichtig — sehen Sie selbst, was Ihre Spende bewirkt hat.

Vollständigen Jahresbericht lesen
2.400
Kinder in Schulprogrammen
850
Familien mit Gesundheitsversorgung
12
Neue Brunnen gebaut
320
Ausgebildete Gemeinschaftshelfer

In 4 Schritten helfen

Spenden war noch nie so einfach — in weniger als 2 Minuten erledigt.

1

Betrag wählen

Wählen Sie einen vordefinierten Betrag oder geben Sie Ihren eigenen ein.

2

Rhythmus festlegen

Einmalig, monatlich oder jährlich — ganz wie es für Sie passt.

3

Daten eingeben

Sicheres Formular — Ihre Daten werden nie an Dritte weitergegeben.

4

Bestätigung erhalten

Sie erhalten sofort eine Bestätigung + Spendenquittung per E-Mail.

„Nachhaltige Entwicklung entsteht durch Zusammenarbeit — nicht durch Almosen." — ADIYUVA Stiftung · #GemeinsamLebenRetten

Ihre Fragen, unsere Antworten

Wofür wird meine Spende verwendet?
Ihre Spende fließt in unsere drei Kernbereiche: Bildung, Gesundheit und soziale Stärkung. 98% jeder Spende kommen direkt den Projekten zugute — nur 2% gehen in die Verwaltung.
Bekomme ich eine Spendenquittung?
Ja, Sie erhalten automatisch eine offizielle Spendenquittung per E-Mail, die Sie für Ihre Steuererklärung nutzen können. ADIYUVA ist als gemeinnützig anerkannt.
Kann ich eine Dauerspende jederzeit kündigen?
Selbstverständlich. Dauerspenden können Sie jederzeit per E-Mail an [email protected] kündigen — ohne Fristen, ohne Bürokratie.
Sind meine Daten sicher?
Alle Daten werden SSL-verschlüsselt übertragen und ausschließlich zur Abwicklung Ihrer Spende genutzt. Wir geben keine Daten an Dritte weiter — das ist unser Versprechen.
Kann ich für ein bestimmtes Projekt spenden?
Über diese allgemeine Spendenseite unterstützen Sie unsere Gesamtarbeit dort, wo der Bedarf am größten ist. Für projektbezogene Spenden kontaktieren Sie uns direkt.
/* ── Amount / Frequency ─────────────────────────── */ let amt = 25, freq = 'einmalig'; function setFreq(btn, v) { document.querySelectorAll('.freq-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); freq = v; updateBtn(); } function selAmt(btn, v) { document.querySelectorAll('.amt-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); amt = v; document.getElementById('customAmt').value = ''; updateBtn(); } function onCustom() { const v = document.getElementById('customAmt').value; document.querySelectorAll('.amt-btn').forEach(b => b.classList.remove('active')); if (v) { amt = parseFloat(v); updateBtn(); } } function updateBtn() { const suffix = freq === 'einmalig' ? '' : freq === 'monatlich' ? '/Monat' : '/Jahr'; document.getElementById('subBtn').textContent = `Jetzt ${amt} €${suffix} spenden ❤️`; } /* ── Submit ─────────────────────────────────────── */ function doSubmit() { const fn = document.getElementById('fn').value.trim(); const ln = document.getElementById('ln').value.trim(); const em = document.getElementById('em').value.trim(); const pr = document.getElementById('priv').checked; if (!fn || !ln || !em || !pr) { alert('Bitte füllen Sie alle Pflichtfelder aus und bestätigen Sie die Datenschutzerklärung.'); return; } document.querySelector('.form__freq').style.display = 'none'; document.querySelector('.form__label').style.display = 'none'; document.querySelector('.amounts').style.display = 'none'; document.querySelector('.custom-wrap').style.display = 'none'; document.querySelector('.form__divider').style.display = 'none'; document.querySelectorAll('.field-row, .privacy-row, #subBtn, .trust-row').forEach(el => el.style.display = 'none'); document.getElementById('successMsg').style.display = 'block'; } /* ── FAQ Accordion ──────────────────────────────── */ function toggleFaq(btn) { const item = btn.closest('.faq__item'); const wasOpen = item.classList.contains('open'); document.querySelectorAll('.faq__item').forEach(i => i.classList.remove('open')); if (!wasOpen) item.classList.add('open'); } /* ── Scroll Animations ──────────────────────────── */ const obs = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } }); }, { threshold: 0.12 }); document.querySelectorAll('.animate').forEach(el => obs.observe(el)); /* ── Counter Animation ──────────────────────────── */ const counterObs = new IntersectionObserver(entries => { entries.forEach(e => { if (!e.isIntersecting) return; const el = e.target.querySelector('[data-target]'); if (!el) return; const target = parseInt(el.dataset.target); const duration = 1600; const step = target / (duration / 16); let current = 0; const timer = setInterval(() => { current = Math.min(current + step, target); el.textContent = Math.round(current).toLocaleString('de-DE') + (el.dataset.target === '98' ? '%+' : '+'); if (current >= target)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert