★★★★★
„Vielen Dank, dass es Euch gibt!“
.abc-testimonials {
--abc-accent: #557a70;
--abc-accent-soft: #eaf1ed;
--abc-text: #303e3b;
--abc-muted: #70827c;
width: 100%;
max-width: 900px;
margin: 0 auto;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
}
.abc-testimonials *,
.abc-testimonials *::before,
.abc-testimonials *::after {
box-sizing: border-box;
}
.abc-testimonial-card {
position: relative;
background: #f7f9f7;
border: 1px solid #e4ebe6;
border-radius: 22px;
padding: 42px 55px 34px;
min-height: 310px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 8px 35px rgba(40, 65, 55, 0.04);
}
.abc-testimonial-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.abc-quote-icon {
width: 43px;
height: 43px;
color: var(--abc-accent);
opacity: 0.55;
}
.abc-stars {
color: #d5aa68;
font-size: 18px;
letter-spacing: 4px;
}
.abc-quote-area {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
padding: 25px 0;
}
.abc-quote-text {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
font-family: inherit;
font-size: clamp(17px, 2.1vw, 22px);
line-height: 1.75;
font-weight: 400;
color: var(--abc-text);
text-align: center;
max-width: 710px;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.abc-quote-text.abc-fade {
opacity: 0;
transform: translateY(5px);
}
.abc-testimonial-footer {
text-align: center;
padding-top: 12px;
border-top: 1px solid #e1e9e3;
}
.abc-testimonial-footer span {
display: inline-block;
padding-top: 14px;
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
color: var(--abc-muted);
}
.abc-carousel-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 28px;
margin-top: 24px;
}
.abc-arrow {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid #dce6df;
background: #ffffff;
color: var(--abc-accent);
font-family: inherit;
font-size: 23px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.abc-arrow:hover {
background: var(--abc-accent);
color: #ffffff;
border-color: var(--abc-accent);
transform: translateY(-2px);
}
.abc-arrow:focus-visible {
outline: 3px solid var(--abc-accent);
outline-offset: 3px;
}
.abc-carousel-dots {
display: flex;
align-items: center;
gap: 12px;
min-width: 85px;
justify-content: center;
}
.abc-current-dot {
width: 9px;
height: 9px;
background: var(--abc-accent);
border-radius: 50%;
}
.abc-counter {
font-size: 13px;
color: var(--abc-muted);
font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
.abc-testimonial-card {
padding: 27px 23px 25px;
border-radius: 17px;
min-height: 340px;
}
.abc-quote-icon {
width: 32px;
height: 32px;
}
.abc-stars {
font-size: 14px;
letter-spacing: 2px;
}
.abc-quote-area {
padding: 25px 0;
}
.abc-quote-text {
font-size: 16px;
line-height: 1.65;
}
.abc-testimonial-footer span {
font-size: 9px;
letter-spacing: 1px;
}
.abc-carousel-controls {
gap: 20px;
}
.abc-arrow {
width: 43px;
height: 43px;
}
}
@media (prefers-reduced-motion: reduce) {
.abc-testimonials *,
.abc-testimonials *::before,
.abc-testimonials *::after {
transition: none !important;
animation: none !important;
}
}
(function () {
const script = document.currentScript;
const container = script.previousElementSibling?.matches(".abc-testimonials")
? script.previousElementSibling
: document.querySelector(".abc-testimonials");
if (!container || container.dataset.initialized === "true") return;
container.dataset.initialized = "true";
const quotes = [
"Ich finde es unfassbar schön, dass Menschen sich so ehrenamtlich einsetzen und anderen helfen. Ich hoffe, ich bin eines Tages auch in der Lage dazu. Vielen Dank an alle! Ihr seid toll!",
"Großartiges Engagement",
"Ich glaube eure Arbeit ist unglaublich wertvoll für sehr viele betroffene Menschen",
"Sehr wertvolle Unterstützung!",
"Hilft mir sehr!",
"Leider habe ich Euch erst sehr spät entdeckt. Aber ich bin unglaublich dankbar, endlich eine Anlaufstelle für meine vielen, vielen Fragen gefunden zu haben. Nun fühl ich mich nicht mehr so alleine mit meinen Gedanken und Gefühlen. Macht mehr Werbung !!!",
"Falls es aktuelle Flyer /Prospekte vom Bundesverband über die ABC-Cafes gibt, bin ich bereit, diese in Praxen und Beratungsstellen im Raum Neuss, z.T. auch in D. zu verteilen.",
"Ein absoluter Mehrwert für Betroffene.",
"Ich bin sehr dankbar, dass ihr das Cafe gebt! besonders auch online!",
"Das macht Ihr super vielen Dank",
"einfach Kasse!!! Vielen Dank!",
"Sehr gute Inhalte!",
"Vielen Dank, dass es Euch gibt!",
"Sehr wertvolle Arbeit; vor allem als ehem. Selbstbetroffene macht ihr mir/ uns richtig Mut",
"Eine sehr wichtige und wertvolle Hilfe und Unterstützung.",
"Danke! Ohne die ABCs hätte vieles bei mir auf dem Weg aus dem Burnout viel länger gedauert.",
"Ich bin sehr dankbar für eure Arbeit, ich komme wieder.",
"Tolle und wichtige Arbeit, ihr habt mir den Einstieg sehr angenehm gemacht, ich habe mich wohl gefühlt und konnte viele wertvolle Inhalte mitnehmen.",
"Bitte diese arbeit weitermachen",
"Eure Arbeit ist sehr lobenswert und hilfreich!",
"Herzlichen Dank für die sehr wertvollen Anregungen!",
'toll, offen, und einfach. Wichtig weil "Sich schämen" für viele ein Thema ist',
"Großartig, dass es dieses Angebot gibt. Schade, dass ich erst jetzt (in meinem 6. Burnout) davon erfahre...",
"Eure Arbeit ist prima, vielen Dank, weiter so",
'Ich empfinde Euer Engagement genial und freue mich, dass ich euch "gefunden" habe.'
];
const quoteElement = container.querySelector(".abc-quote-text");
const counter = container.querySelector(".abc-counter");
const prev = container.querySelector(".abc-prev");
const next = container.querySelector(".abc-next");
const reducedMotion = window.matchMedia(
"(prefers-reduced-motion: reduce)"
).matches;
let current = 0;
let interval = null;
let transitionTimer = null;
let paused = false;
function displayQuote(index, animate = true) {
current = (index + quotes.length) % quotes.length;
clearTimeout(transitionTimer);
if (animate && !reducedMotion) {
quoteElement.classList.add("abc-fade");
transitionTimer = setTimeout(() => {
quoteElement.textContent = "„" + quotes[current] + "“";
counter.textContent = (current + 1) + " / " + quotes.length;
quoteElement.classList.remove("abc-fade");
}, 250);
} else {
quoteElement.textContent = "„" + quotes[current] + "“";
counter.textContent = (current + 1) + " / " + quotes.length;
quoteElement.classList.remove("abc-fade");
}
}
function stopAutoplay() {
clearInterval(interval);
interval = null;
}
function startAutoplay() {
stopAutoplay();
if (reducedMotion || paused || document.hidden) return;
interval = setInterval(() => {
displayQuote(current + 1);
}, 6500);
}
function navigate(direction) {
displayQuote(current + direction);
startAutoplay();
}
prev.addEventListener("click", () => navigate(-1));
next.addEventListener("click", () => navigate(1));
container.addEventListener("mouseenter", () => {
paused = true;
stopAutoplay();
});
container.addEventListener("mouseleave", () => {
paused = false;
if (!container.contains(document.activeElement)) {
startAutoplay();
}
});
container.addEventListener("focusin", () => {
paused = true;
stopAutoplay();
});
container.addEventListener("focusout", (event) => {
if (!container.contains(event.relatedTarget)) {
paused = false;
startAutoplay();
}
});
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
stopAutoplay();
} else {
startAutoplay();
}
});
let touchStartX = 0;
container.addEventListener("touchstart", (event) => {
touchStartX = event.changedTouches[0].screenX;
}, { passive: true });
container.addEventListener("touchend", (event) => {
const difference =
event.changedTouches[0].screenX - touchStartX;
if (Math.abs(difference) > 50) {
navigate(difference < 0 ? 1 : -1);
}
}, { passive: true });
displayQuote(0, false);
startAutoplay();
})();
