/* Häufige Fragen – Seite haeufige-fragen.html */
:root{
  --ink:#1E3442; --paper:#142030;
  --orange:#DA29C6; --orange-btn:#C520B3; --orange-text:#E85CDA;
  --grey-mid:#B3A3AC; --grey-line:rgba(167,121,142,.22);
}
body{ font-family:'Inter',sans-serif; color:#F5F3F1; background:var(--paper); line-height:1.6; }
.breadcrumb{ max-width:1240px; margin:0 auto; padding:16px 24px 0; font-size:13px; color:var(--grey-mid); }
.breadcrumb a{ color:var(--grey-mid); text-decoration:none; }
.breadcrumb b{ color:#fff; }

.fq-hero{ max-width:900px; margin:0 auto; padding:48px 24px 8px; }
.fq-hero h1{ font-size:clamp(30px,5vw,48px); color:#fff; text-wrap:balance; }
.fq-hero h1 span{ color:var(--orange-text); }
.fq-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.fq-chips a{ padding:8px 16px; border:1px solid var(--grey-line); border-radius:999px; color:#F5F3F1; text-decoration:none; font-size:14px; background:rgba(255,255,255,.03); }
.fq-chips a:hover, .fq-chips a:focus-visible{ border-color:var(--orange); color:var(--orange-text); outline:none; }

.fq-wrap{ max-width:900px; margin:0 auto; padding:16px 24px 72px; }
.fq-sec{ padding-top:40px; scroll-margin-top:90px; }
.fq-sec h2{ font-size:clamp(22px,3vw,28px); color:#fff; margin-bottom:16px; text-wrap:balance; }

.fold{ border:1px solid var(--grey-line); border-radius:10px; background:var(--ink); margin-bottom:10px; scroll-margin-top:90px; }
.fold summary{ list-style:none; cursor:pointer; padding:16px 52px 16px 20px; font-weight:600; font-size:16.5px; color:#fff; position:relative; }
.fold summary::-webkit-details-marker{ display:none; }
.fold summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:24px; font-weight:400; color:var(--orange-text); }
.fold[open] summary::after{ content:"\2212"; }
.fold summary:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; border-radius:10px; }
.fold-body{ padding:0 20px 18px; color:#E6E1E4; font-size:15.5px; max-width:68ch; }
.fold-body p + p{ margin-top:10px; }
.fold-body a{ color:var(--orange-text); text-underline-offset:3px; }


.fq-cta{ padding-top:56px; }
.fq-cta-card{ padding:32px 28px; border:1px solid var(--grey-line); border-radius:14px; background:var(--ink); }
.fq-cta-card h2{ font-size:clamp(22px,3vw,28px); color:#fff; margin-bottom:10px; }
.fq-cta-card p{ color:#E6E1E4; max-width:60ch; }
.fq-cta-card p a{ color:var(--orange-text); }
.fq-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.fbtn{ display:inline-block; padding:12px 24px; border-radius:999px; background:var(--orange-btn); color:#fff; text-decoration:none; font-weight:600; font-size:15px; border:1.5px solid var(--orange-btn); }
.fbtn.ghost{ background:transparent; border-color:var(--orange); }
.fbtn:hover, .fbtn:focus-visible{ background:var(--orange); border-color:var(--orange); outline:none; }

footer{ background:var(--ink); color:var(--grey-mid); text-align:center; padding:22px 24px; font-size:13px; }
footer a{ color:var(--grey-mid); text-decoration:none; }
footer a:hover{ color:#fff; }

/* Hero-Bild: steht für sich, Text folgt darunter (wie auf den anderen Seiten) */
.home-hero-photo{ width:100%; margin:0; overflow:hidden; line-height:0; }
.home-hero-photo img{ width:100%; height:auto; aspect-ratio:16/9; display:block; }
.hero-fade-in{ animation:heroFadeIn 1.6s ease-out both, kenBurns 22s ease-in-out 1.6s infinite alternate; }
@keyframes heroFadeIn{ from{ opacity:.15; filter:grayscale(60%) brightness(1.15); } to{ opacity:1; filter:grayscale(0%) brightness(1); } }
@keyframes kenBurns{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.045) translate(-1%,-1%); } }
@media(prefers-reduced-motion:reduce){ .hero-fade-in{ animation:none; } }

/* Überschrift steht schon im Hero-Bild: sichtbar nur "Klar beantwortet.", der volle H1-Text bleibt für Screenreader und Suchmaschinen */
.fq-hero .sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.fq-hero{ padding-top:36px; }

/* Textlinks: hell mit feiner magentafarbener Linie, beim Darüberfahren magenta */
.fold-body a, .fq-cta-card p a{ color:#F5F3F1; text-decoration:underline; text-decoration-color:rgba(232,92,218,.6); text-decoration-thickness:1px; text-underline-offset:3px; transition:color .2s ease, text-decoration-color .2s ease; }
.fold-body a:hover, .fold-body a:focus-visible, .fq-cta-card p a:hover, .fq-cta-card p a:focus-visible{ color:var(--orange-text); text-decoration-color:var(--orange-text); }