/* ==========================================================================
   11 · FAQ (Bauteam G) · Präfix faq-
   Arpeggio «Popular Queries»: zentrierter Kopf, Akkordeon mit tannengrünem
   Doppelstrich (dreht sich zum ×), Linien zeichnen sich beim Scrollen,
   klebende Fragen-Karte mit H22.
   ========================================================================== */

.faq {
  /* Federkurven als CSS linear(): lebendig (Nachschwingen ≈ 0,6) und weich (≈ 0,2) */
  --faq-spring: cubic-bezier(.34, 1.56, .64, 1);
  --faq-spring: linear(0, 0.029, 0.107, 0.218, 0.347, 0.485, 0.621, 0.748, 0.861, 0.956, 1.032, 1.09, 1.13, 1.153, 1.162, 1.161, 1.15, 1.134, 1.113, 1.091, 1.069, 1.047, 1.028, 1.012, 0.998, 0.988, 0.981, 0.976, 0.974, 0.974, 0.975, 0.977, 0.98, 0.984, 0.988, 0.991, 1);
  --faq-soft: cubic-bezier(.16, 1, .3, 1);
  --faq-soft: linear(0, 0.028, 0.096, 0.189, 0.293, 0.399, 0.501, 0.595, 0.679, 0.752, 0.813, 0.864, 0.905, 0.937, 0.962, 0.981, 0.994, 1.004, 1.01, 1.013, 1.015, 1.015, 1.015, 1.013, 1.012, 1.01, 1.009, 1.007, 1.006, 1.005, 1);
  --faq-num-w: clamp(52px, calc(4.2 * var(--u)), 80px);
  --faq-num-gap: clamp(12px, calc(1 * var(--u)), 20px);
  padding-block: var(--section-pad) calc(var(--section-pad) * .7);
}

/* ---------- Kopf ---------- */
.faq-head {
  display: grid;
  justify-items: center;
  gap: clamp(20px, calc(1.6 * var(--u)), 30px);
  text-align: center;
  margin-bottom: clamp(64px, calc(7.3 * var(--u)), 140px);
  overflow-x: clip;                 /* die Zeilen driften seitlich herein */
}
.faq-title { width: 100%; }
/* Zeilen so breit wie ihr Text: Die seitliche Drift bleibt so immer im Bildschirm */
.faq-title__line { width: fit-content; max-width: 100%; margin-inline: auto; will-change: transform; }
.faq-lead { max-width: 22em; }

/* ---------- Raster: Liste links, Karte rechts ---------- */
.faq-body { align-items: start; row-gap: clamp(56px, calc(6 * var(--u)), 96px); }
.faq-main { grid-column: 1 / span 8; padding-right: clamp(0px, calc(3.4 * var(--u)), 64px); }
.faq-aside {
  grid-column: 9 / span 4;
  position: sticky;
  top: calc(var(--header-h) + clamp(16px, calc(1.6 * var(--u)), 32px));
  align-self: start;
  container-type: inline-size;       /* Kartenhöhe 4:5 aus der Spaltenbreite (cqw) */
}

/* ---------- Akkordeon ---------- */
.faq-list { margin: 0; padding: 0; list-style: none; }
.faq-item { position: relative; }

/* Linien: Grundlinie wird scroll-gekoppelt gezeichnet, tannengrüne Füllung bei Hover/offen */
.faq-rule { position: relative; display: block; height: 1px; background: var(--line); transform-origin: 0 50%; }
.faq-rule__fill {
  position: absolute; inset: 0; background: var(--c-moss);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-out);
}
.faq-item.is-open .faq-rule__fill { transform: scaleX(1); }
.faq-rule--end { background: var(--line); }
/* Seit 0.47.3: Weg zu den Fragen der Unterseiten /preise/ und /betreuung/ */
.faq-weiter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: clamp(22px, calc(1.8 * var(--u)), 32px); font-size: 16px; color: var(--muted); }
.faq-weiter .link-u { color: var(--fg); }
.faq-weiter__links { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }

.faq-h { margin: 0; font: inherit; }
.faq-q {
  display: grid;
  grid-template-columns: var(--faq-num-w) minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--faq-num-gap);
  width: 100%;
  padding: clamp(22px, calc(1.8 * var(--u)), 34px) 0;
  text-align: left;
  color: var(--fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq-q:focus-visible { outline-offset: 4px; border-radius: 8px; }
.faq-q__num {
  font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1;
  color: var(--faint);
  transition: color .5s var(--ease-out);
}
.faq-q__text {
  font-size: clamp(20px, calc(1.667 * var(--u)), 32px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
  transition: transform .8s var(--faq-soft), color .4s ease;
  text-wrap: balance;
}
.faq-item.is-open .faq-q__num { color: var(--c-moss); }

/* Arpeggio-Doppelstrich: zwei tannengrüne Linien (Moos, 5,7:1 auf Papier), beim Öffnen Drehung zum × */
.faq-icon {
  position: relative; align-self: center;
  width: clamp(36px, calc(2.5 * var(--u)), 48px); height: clamp(36px, calc(2.5 * var(--u)), 48px);
  transition: transform .9s var(--faq-spring);
}
.faq-icon > span {
  position: absolute; left: 16%; right: 16%; top: 50%;
  height: 2px; margin-top: -1px; border-radius: 2px;
  background: var(--c-moss);
  transition: transform .9s var(--faq-spring);
}
.faq-icon > span:first-child { transform: translateY(-4px); }
.faq-icon > span:last-child  { transform: translateY(4px); }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.faq-q[aria-expanded="true"] .faq-icon > span:first-child { transform: rotate(45deg); }
.faq-q[aria-expanded="true"] .faq-icon > span:last-child  { transform: rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
  .faq-item:hover .faq-rule__fill { transform: scaleX(1); }
  .faq-q:hover .faq-q__text { transform: translateX(10px); }
  .faq-q:hover .faq-q__num { color: var(--c-moss); }
  .faq-q[aria-expanded="false"]:hover .faq-icon > span:first-child { transform: translateY(-6px); }
  .faq-q[aria-expanded="false"]:hover .faq-icon > span:last-child  { transform: translateY(6px) scaleX(.6); }
}

/* Antwort: Höhe klappt per Feder (JS), Inhalt steigt auf */
.faq-panel { overflow: hidden; }
.faq-panel__inner {
  display: grid; justify-items: start; gap: 18px;
  padding: 0 clamp(48px, calc(4.6 * var(--u)), 88px) clamp(30px, calc(2.6 * var(--u)), 48px) calc(var(--faq-num-w) + var(--faq-num-gap));
}
.faq-a {
  max-width: 38em;
  font-size: clamp(17px, calc(1.146 * var(--u)), 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(8, 18, 14, .72);
}
.faq-more { font-size: 16px; }
/* Mehrere Links unter einer Antwort (seit 0.47.13, z. B. «Mehr zu WordPress · Mehr zu Shopify») */
.faq-more--mehr { display: flex; flex-wrap: wrap; gap: 10px 28px; }
html.no-js .faq-panel[hidden] { display: block; }

/* ---------- Klebende Fragen-Karte (H22) ---------- */
.faq-card {
  position: relative;
  /* 4:5, aber nie höher als der Bildschirm unter dem Header (klebend) und nie zu knapp für den Text */
  height: clamp(420px, 125cqw, calc(100vh - var(--header-h) - 48px));
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  color: var(--c-paper);
  background: #150e09;
  box-shadow: 0 40px 80px -40px rgba(8, 18, 14, .45), 0 2px 6px rgba(8, 18, 14, .06);
}
.faq-card__ph { position: absolute; inset: 0; }
.faq-card__zoom { position: absolute; inset: 0; transform-origin: 50% 62%; will-change: transform; }
.faq-card__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 9, 6, 0) 34%, rgba(12, 9, 6, .5) 60%, rgba(12, 9, 6, .9) 100%);
}
.faq-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: grid; justify-items: start; gap: clamp(12px, calc(1 * var(--u)), 18px);
  padding: clamp(22px, calc(2 * var(--u)), 40px);
}
.faq-card__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-signal);
  box-shadow: 0 0 0 5px rgba(123, 92, 255, .22);
}
.faq-card__title {
  margin-top: 4px;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.faq-card__text {
  max-width: 22em;
  font-size: clamp(16px, calc(1.042 * var(--u)), 20px);
  line-height: 1.4;
  color: rgba(242, 244, 238, .78);
}
.faq-card__btn { margin-top: clamp(6px, calc(.8 * var(--u)), 14px); }
/* Direkter Kontaktweg neben dem Projektplaner (seit 0.48.1) */
.faq-card__mail { font-size: 14px; line-height: 1.45; color: rgba(242, 244, 238, .78); }
.faq-card__mail a { color: var(--c-paper); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.faq-card__mail a:hover { text-decoration-color: var(--c-signal-bright); }

/* ---------- Mobile ----------
   Seit 0.47.8 kompakter (Wunsch des Gründers, 02.10.2026: FAQ auf dem Handy kleiner): weniger Luft um Kopf,
   Liste und Karte, engere Fragezeilen, die erste Antwort startet geschlossen (11-faq.js), und die Fragen-Karte
   ist ein Band in Texthöhe statt eines Hochformats 4:5 (vorher rund 420 px hoch). Gilt auch für die FAQ der Unterseiten. */
@media (max-width: 800px) {
  .faq { --faq-num-w: 30px; --faq-num-gap: 10px; padding-block: 72px 56px; }
  .faq-head { gap: 14px; margin-bottom: 36px; }
  .faq-body { row-gap: 32px; }
  .faq-main, .faq-aside { grid-column: 1 / -1; }
  .faq-main { padding-right: 0; }
  .faq-aside { position: static; }
  .faq-q { padding: 16px 0; }
  .faq-q__num { font-size: 12px; }
  .faq-q__text { font-size: 19px; line-height: 1.25; }
  .faq-icon { width: 32px; height: 32px; }
  .faq-panel__inner { padding: 0 8px 22px calc(var(--faq-num-w) + var(--faq-num-gap)); gap: 14px; }
  .faq-a { font-size: 16px; }
  /* Band: Höhe aus dem Inhalt, H22 läuft dahinter; Schleier über die ganze Fläche, damit der Text überall lesbar bleibt */
  .faq-card { height: auto; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; }
  .faq-card__veil { background: linear-gradient(180deg, rgba(12, 9, 6, .38) 0%, rgba(12, 9, 6, .72) 45%, rgba(12, 9, 6, .9) 100%); }
  .faq-card__body { position: relative; padding: 22px; gap: 10px; }
  .faq-card__dot { display: none; }
  .faq-card__title { margin-top: 0; font-size: 26px; }
  .faq-card__text { font-size: 15px; }
  .faq-card__btn { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-title__line, .faq-card__zoom { will-change: auto; }
}

/* ---------- Kompakte Fassung der Startseite (seit 0.65.0, Entwurf «Scrollfluss» vom 11.10.2026) ----------
   Zwei Spalten: links der Kopf (klebt), rechts die Fragen – kleiner gesetzt, ohne Nummernspalte und ohne die Karte mit dem
   Film. Alles hängt an .faq--kompakt: Die Unterseiten (\twstrata\seite_fragen()) bleiben bei der grossen Fassung oben. */
.faq--kompakt { --faq-num-w: 0px; --faq-num-gap: 0px; padding-block: clamp(64px, calc(8 * var(--u)), 120px); }
.faq-kompakt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, calc(5 * var(--u)), 96px); align-items: start; }
.faq--kompakt .faq-head { position: sticky; top: calc(var(--header-h) + 32px); justify-items: start; gap: 16px; margin-bottom: 0; overflow: visible; text-align: left; }
.faq--kompakt .faq-title { width: auto; font-size: clamp(30px, calc(2.9 * var(--u)), 44px); }
.faq-fehlt { margin: 0; font-size: 15px; }
.faq--kompakt .faq-main { grid-column: auto; padding-right: 0; }
.faq--kompakt .faq-q { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding: 17px 0; }
.faq--kompakt .faq-q__num { display: none; }
.faq--kompakt .faq-q__text { font-size: clamp(17px, calc(1.3 * var(--u)), 20px); letter-spacing: -.018em; text-wrap: pretty; }
.faq--kompakt .faq-icon { width: 30px; height: 30px; }
.faq--kompakt .faq-panel__inner { gap: 12px; padding: 0 42px 20px 0; }
.faq--kompakt .faq-a { max-width: 44em; font-size: 16px; line-height: 1.55; }
.faq--kompakt .faq-more { font-size: 15px; }
.faq--kompakt .faq-weiter { margin-top: 18px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .faq--kompakt .faq-q:hover .faq-q__text { transform: translateX(6px); } }
@media (max-width: 800px) {
  .faq--kompakt { padding-block: 56px; }
  .faq-kompakt { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq--kompakt .faq-head { position: static; gap: 12px; margin-bottom: 0; }
  .faq--kompakt .faq-q { padding: 15px 0; }
  .faq--kompakt .faq-q__text { font-size: 17px; }
  .faq--kompakt .faq-panel__inner { padding: 0 8px 18px 0; }
}