/* ==========================================================================
   FLEIGA WERDEN · freigestellter Hero, Scroll-Sequenz, FAQ-Akkordeon
   (Hero- und Scrolly-Grundlagen liegen in components.css)
   ========================================================================== */

/* ---------- FAQs ---------- */
.faqs{padding-block:clamp(90px,9vw,170px) clamp(70px,8vw,150px)}
.faqs .h2{margin-bottom:clamp(30px,3.5vw,66px)}
.faq{border-top:2px solid var(--paper);margin-right:var(--wrap-r)}
.faq:last-of-type{border-bottom:2px solid var(--paper)}
.faq__q{
  width:100%;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2vw,38px) 0;
  color:var(--paper);
}
.faq__q .h3{font-size:clamp(17px,1.55vw,30px);transition:color .22s var(--ease-out)}
.faq__q:hover .h3{color:var(--pink)}
.faq__q svg{flex:none;width:clamp(20px,1.5vw,28px);height:clamp(20px,1.5vw,28px);transition:transform .4s var(--ease-out)}
.faq.is-open .faq__q svg{transform:rotate(180deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.faq__a>div{overflow:hidden}
.faq.is-open .faq__a{grid-template-rows:1fr}
/* Antworten bewusst gross (Kundenwunsch: Prototyp-Grösse war zu klein) */
.faq__a p{padding-bottom:clamp(20px,2.2vw,42px);max-width:46em;font-size:clamp(16px,1.25vw,23px);font-weight:400;line-height:1.65}
.faqs__cta{margin-top:clamp(36px,4vw,76px)}

/* ---------- Bearbeiten (?edit / ?feedback): alle Antworten offen ---------- */
html[data-modus="bearbeiten"] .faq__a{grid-template-rows:1fr}
html[data-modus="bearbeiten"] .faq__q svg{transform:rotate(180deg)}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  /* Video-Maske (Kopf- und Fussblende) und Scrolly-Titellage kommen aus components.css */
  .faqs{padding-top:80px}
  /* Listen mobil symmetrisch – die Desktop-Regel oben würde die Fundament-Regel sonst überschreiben */
  .faq{margin-right:0}
  .faq__q{gap:14px}
  .faq__a p{font-size:16px;line-height:1.6}
}

/* Desktop: das Objekt beginnt rechts vom Titel (wie Home und Gönner werden) */
@media (min-width:821px){
  #hero .hero__cutout video,#hero .hero__cutout>img{left:24vw}
}