/* ==========================================================================
   ALBI HOME — HÄUFIGE FRAGEN
   A single-open accordion on the Vorteile backdrop.
   Depends on tokens.css + base.css + components.css.

   THE COLLAPSED STATE IS OPT-IN, exactly like motion.css's reveal: every rule
   that hides an answer is scoped to .faq--js, a class faq.js adds only after
   it has taken over. Without the script the section is a plain list of four
   questions with their answers visible — never four bars that do nothing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE SECTION
   The same textured panel as Ihre Vorteile (and the Projekte wall), for the
   same reason it is used there: it is the site's "dark textured ground", and
   the cards on it are darker than it is. No scrim — the photograph is already
   dark enough to sit type on, and adding one would flatten the texture that
   is the whole point of using it.
   -------------------------------------------------------------------------- */
.faq-section {
  position: relative;
  background-color: var(--bg-raised);
  background-image: url("../img/benefits-bg-1440.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
  .faq-section {
    background-image: image-set(
      url("../img/benefits-bg-1440.webp") type("image/webp") 1x,
      url("../img/benefits-bg-1440.jpg")  type("image/jpeg") 1x);
  }
}
@media (max-width: 1023.98px) {
  .faq-section { background-image: url("../img/benefits-bg-1024.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .faq-section {
      background-image: image-set(
        url("../img/benefits-bg-1024.webp") type("image/webp") 1x,
        url("../img/benefits-bg-1024.jpg")  type("image/jpeg") 1x);
    }
  }
}
@media (max-width: 719.98px) {
  .faq-section { background-image: url("../img/benefits-bg-720.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .faq-section {
      background-image: image-set(
        url("../img/benefits-bg-720.webp") type("image/webp") 1x,
        url("../img/benefits-bg-720.jpg")  type("image/jpeg") 1x);
    }
  }
}

/* --------------------------------------------------------------------------
   2. THE LIST
   Narrower than the 1296 content column. These are single lines of question
   over full-width rows; at 1296 the marker ends up a hand's width away from
   the text it belongs to, and the answers run past a readable measure.
   -------------------------------------------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 1040px;
  margin-inline: auto;
  margin-top: var(--section-stack);
}

.faq__item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, .035);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.faq__item.is-open {
  border-color: var(--a-gold-24);
  background-color: rgba(255, 255, 255, .055);
}
@media (hover: hover) and (pointer: fine) {
  .faq__item:hover { border-color: var(--border-line); }
  .faq__item.is-open:hover { border-color: var(--a-gold-24); }
}

/* The heading carries no visual weight of its own — it exists so the question
   lands in the document outline. All the styling is on the button inside it,
   which is the thing that is actually pressed. */
.faq__heading { font: inherit; letter-spacing: inherit; margin: 0; }

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding: clamp(1.125rem, 2vw, 1.5rem) clamp(1.125rem, 2vw, 1.75rem);
  color: var(--text-primary);
  text-align: left;
}

.faq__q {
  font-family: var(--font-display);
  /* h3 scale, not h4: these are the only thing on the row and they carry the
     section. At h4 they read as list labels rather than as questions. */
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  transition: color var(--dur-base) var(--ease-out);
}
.faq__trigger:hover .faq__q { color: var(--text-accent); }

/* --- The marker ----------------------------------------------------------
   ONE glyph, not two. The open state rotates the plus 45deg, which lands it
   exactly on a cross — so the transition is a single animated transform
   instead of two icons cross-fading through a moment where both are half
   visible and the mark looks like a smudge. */
.faq__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--a-gold-40);
  border-radius: var(--radius-pill);
  color: var(--gold-400);
  transition: transform var(--dur-slow) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.faq__mark .icon { width: 20px; height: 20px; }

.faq__item.is-open .faq__mark {
  transform: rotate(45deg);
  border-color: var(--gold-400);
  background-color: var(--a-gold-12);
}
.faq__trigger:hover .faq__mark { border-color: var(--gold-400); }

/* --- The panel -----------------------------------------------------------
   0fr -> 1fr on a grid row, rather than max-height. max-height has to guess a
   value larger than any answer will ever be, which makes the close always
   start late and at a different speed than the open. A grid row animates to
   the content's real height, whatever it turns out to be.

   Both states are declared on .faq--js only, so without the script the panel
   keeps its default (auto) height and every answer stays on screen. */
.faq--js .faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq--js .faq__item.is-open .faq__panel { grid-template-rows: 1fr; }

/* overflow:hidden is what makes the 0fr row actually clip its content — the
   row shrinks, but the child would otherwise overflow it and stay visible. */
.faq--js .faq__inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.faq--js .faq__item.is-open .faq__inner {
  opacity: 1;
  /* Delayed so the copy fades in as the row finishes opening rather than
     appearing in a 1px-tall slot on the first frame. */
  transition-delay: 80ms;
}

.faq__a {
  max-width: 68ch;
  padding: 0 clamp(1.125rem, 2vw, 1.75rem) clamp(1.125rem, 2vw, 1.5rem);
  color: var(--text-secondary);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
}

/* The answer's own top padding cannot live on .faq__a: with the row at 0fr
   the padding is still part of the element being clipped, so a collapsed item
   would animate from a padded box and the close would visibly jump. It goes
   on the trigger side instead, as a negative-free gap. */
.faq--js .faq__a { padding-top: var(--space-1); }

@media (max-width: 599.98px) {
  .faq { gap: var(--space-3); }
  .faq__q { font-size: var(--fs-h4); }
  .faq__mark { width: 34px; height: 34px; }
  .faq__mark .icon { width: 17px; height: 17px; }
  .faq__a { font-size: var(--fs-body); }
}

/* Rotating the marker is the one motion here that conveys state rather than
   decorating it, so it stays — but instantly, via the token override in
   tokens.css. The row height snaps for the same reason. */
@media (prefers-reduced-motion: reduce) {
  .faq--js .faq__panel { transition: none; }
  .faq--js .faq__inner { transition: none; }
}