/* =====================================================================
   Astromantie · FAQ (/faq/, Seite 147, Vorlage page-faq.php) seit 09.10.2026 (Freigabe Tobias 09.10.2026)
   Himmel und Farbwechsel wie die Analyse-Seiten (css/ez.css): oben der lila Himmel, der weich ins dunkle
   Universum auslaeuft, darunter die Sterne (AstroSterne), die Themen abwechselnd mit eigenem Nebel
   (Magenta/Indigo wie die Kostprobe, Lavendel wie die Fragen, Lila wie oben). Jeder Nebel laeuft oben und unten
   weich aus (Maske), so entstehen keine Kanten. Kopf und Themen mittig, Kacheln wie die Bereiche im Mondkalender.
   ===================================================================== */
@property --fq-w { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

html:has(body.fq-seite) { scroll-behavior: smooth; }
body.fq-seite { background: #0b0618; }
body.fq-seite .astro-content { background: transparent; }

.fq {
  --grund: #0b0618;
  --hero: radial-gradient(55% 50% at 74% 40%, rgba(118, 64, 214, 0.28), rgba(118, 64, 214, 0) 70%),
          radial-gradient(42% 40% at 10% 80%, rgba(170, 80, 210, 0.14), rgba(170, 80, 210, 0) 70%),
          radial-gradient(60% 26% at 50% 78%, rgba(232, 201, 106, 0.06), rgba(232, 201, 106, 0) 70%),
          linear-gradient(180deg, #06030d 0%, #0f0724 42%, #120827 70%, #0b0618 100%);
  --tint: 124, 58, 237;
  --gold: #e8c96a;
  --gold-hell: #f6e3a1;
  --text: #f4effe;
  --mittel: rgba(238, 230, 255, 0.76);
  --leise: rgba(238, 230, 255, 0.54);
  --gold-verlauf: linear-gradient(135deg, #fbe9b0 0%, #e8c96a 48%, #c9993c 100%);
  --titel-verlauf: linear-gradient(110deg, #c9b6ff 0%, #e8c96a 55%, #fbe9b0 75%, #c9b6ff 100%);
  --weich: cubic-bezier(.2, .7, .2, 1);
  --karte-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 55%), rgba(16, 10, 36, 0.62);
  --karte-rand: rgba(255, 255, 255, 0.09);
  --karte-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 50px rgba(0, 0, 0, 0.34);
  /* Nebel laufen oben und unten ueber diese Strecke aus */
  --auslauf: 170px;
  /* Hoehe der Kopfzeile der Website, setzt js/fq.js */
  --kopf-h: 76px;

  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color: var(--text);
  background: var(--grund);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.fq *, .fq *::before, .fq *::after { box-sizing: border-box; }
:where(.fq) a { color: inherit; text-decoration: none; }
.fq a:hover { opacity: 1; }
:where(.fq) button { font: inherit; }
.fq::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 5, 26, 0), #08051a);
}

/* ---------- Sternenhimmel: bleibt stehen, endet mit dem Inhalt (wie .ez-himmel) ---------- */
.fq-himmel {
  --astro-star-tempo: 0.95;
  position: sticky; top: 0; height: 100vh; margin-bottom: -100vh;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.fq > section { position: relative; }
.fq-wrap { position: relative; width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.fq-spalte { position: relative; width: min(860px, calc(100% - 40px)); margin: 0 auto; }

/* =====================================================================
   1. OBEN: lila Himmel, alles mittig, darunter die Themen
   ===================================================================== */
.fq-hero { padding: clamp(30px, 4.4vw, 60px) 0 clamp(26px, 3vw, 40px); }
.fq-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: -90px; bottom: -120px; z-index: -1; pointer-events: none;
  background: var(--hero);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, rgba(0, 0, 0, 0.55) 76%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 52%, rgba(0, 0, 0, 0.55) 76%, rgba(0, 0, 0, 0) 100%);
}
.fq-hero-text { max-width: 760px; margin: 0 auto; text-align: center; }

.fq-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); text-shadow: 0 0 18px rgba(232, 201, 106, 0.4);
}
.fq-kicker svg { width: 14px; height: 14px; fill: var(--gold); filter: drop-shadow(0 0 6px rgba(232, 201, 106, 0.6)); }
.fq-h1 {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: clamp(2.7rem, 5.6vw, 4.8rem); line-height: 1.04; letter-spacing: -0.015em;
  margin: 18px 0 22px; color: #f8f3ff;
}
.fq-h1 em, .fq-h2 em {
  font-style: italic; padding-right: 0.14em; margin-right: -0.06em;
  background: var(--titel-verlauf); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: fq-schimmer 10s ease-in-out infinite;
}
@keyframes fq-schimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.fq-lead { font-size: clamp(1.05rem, 1.45vw, 1.2rem); line-height: 1.7; color: var(--mittel); max-width: 34em; margin: 0 auto; }

.fq-zahlen { display: flex; justify-content: center; gap: clamp(26px, 4vw, 52px); margin: 34px 0 0; padding: 0; list-style: none; }
.fq-zahlen li { position: relative; }
.fq-zahlen li + li::before { content: ''; position: absolute; left: calc(-0.5 * clamp(26px, 4vw, 52px)); top: 8%; bottom: 8%; width: 1px; background: linear-gradient(180deg, rgba(232, 201, 106, 0), rgba(232, 201, 106, 0.4), rgba(232, 201, 106, 0)); }
.fq-zahlen b {
  display: block; font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1;
  background: var(--gold-verlauf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(232, 201, 106, 0.3));
}
.fq-zahlen span { display: block; margin-top: 8px; font-size: 12.5px; letter-spacing: 0.03em; color: var(--mittel); }

/* Themen: Kacheln wie die Bereiche im Mondkalender, ein Klick springt zum Thema */
.fq-themen { max-width: 920px; margin: clamp(36px, 4.4vw, 56px) auto 0; scroll-margin-top: calc(var(--kopf-h) + 20px); }
.fq-themen-titel { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 22px; }
.fq-themen-titel span { font-family: 'Fraunces', serif; font-size: 12.5px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); }
.fq-themen-titel::before, .fq-themen-titel::after { content: ''; flex: 0 1 120px; height: 1px; }
.fq-themen-titel::before { background: linear-gradient(90deg, rgba(232, 201, 106, 0), rgba(232, 201, 106, 0.5)); }
.fq-themen-titel::after { background: linear-gradient(90deg, rgba(232, 201, 106, 0.5), rgba(232, 201, 106, 0)); }
.fq-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.fq-kachel {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; height: 100%;
  padding: 12px 30px 12px 12px; border-radius: 20px;
  background: linear-gradient(150deg, #241838, #100d24); border: 1px solid rgba(149, 115, 203, 0.42);
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.4s var(--weich), border-color 0.3s, box-shadow 0.3s;
}
.fq-kachel img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)); transition: transform 0.45s var(--weich); }
.fq-kachel b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: #fbf7ff; }
.fq-kachel small { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.fq-kachel::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -5px;
  border-right: 1.6px solid rgba(232, 201, 106, 0.7); border-bottom: 1.6px solid rgba(232, 201, 106, 0.7);
  transform: rotate(45deg); opacity: 0.45; transition: opacity 0.3s, transform 0.4s var(--weich);
}
.fq-kachel:hover, .fq-kachel:focus-visible {
  transform: translateY(-3px); outline: none;
  border-color: rgba(232, 201, 106, 0.7);
  box-shadow: 0 22px 40px -20px rgba(0, 0, 0, 0.9), 0 0 26px rgba(232, 201, 106, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fq-kachel:hover img { transform: scale(1.08) rotate(-4deg); }
.fq-kachel:hover::after { opacity: 1; transform: translateY(2px) rotate(45deg); }

/* =====================================================================
   2. DIE THEMEN: jedes ein eigener Abschnitt mit Nebel, der oben und unten weich auslaeuft
   ===================================================================== */
.fq-thema { padding: clamp(20px, 2.4vw, 26px) 0; scroll-margin-top: calc(var(--kopf-h) + 4px); }
.fq-thema::before {
  content: ''; position: absolute; left: 0; right: 0; top: -110px; bottom: -110px; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 var(--auslauf), #000 calc(100% - var(--auslauf)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 var(--auslauf), #000 calc(100% - var(--auslauf)), rgba(0, 0, 0, 0) 100%);
}
/* Kostprobe der Analyse-Seiten: Nebel in Magenta und Indigo */
.fq-thema.ton-probe::before {
  background:
    radial-gradient(42% 40% at 20% 48%, rgba(176, 72, 206, 0.24), rgba(176, 72, 206, 0) 70%),
    radial-gradient(40% 40% at 82% 56%, rgba(70, 88, 214, 0.22), rgba(70, 88, 214, 0) 70%),
    linear-gradient(180deg, rgba(20, 10, 44, 0) 0%, #150a31 26%, #1a0d3b 50%, #150a31 74%, rgba(20, 10, 44, 0) 100%);
}
/* Fragen der Analyse-Seiten: Lavendel */
.fq-thema.ton-lavendel::before {
  background:
    radial-gradient(50% 40% at 50% 40%, rgba(176, 146, 255, 0.24), rgba(176, 146, 255, 0) 72%),
    linear-gradient(180deg, rgba(36, 21, 82, 0) 0%, rgba(36, 21, 82, 0.8) 28%, rgba(36, 21, 82, 0.55) 66%, rgba(36, 21, 82, 0) 100%);
}
/* Lila wie der Himmel oben, nur leiser */
.fq-thema.ton-lila::before {
  background:
    radial-gradient(46% 42% at 74% 44%, rgba(118, 64, 214, 0.26), rgba(118, 64, 214, 0) 70%),
    radial-gradient(40% 40% at 18% 60%, rgba(170, 80, 210, 0.15), rgba(170, 80, 210, 0) 70%),
    linear-gradient(180deg, rgba(15, 7, 36, 0) 0%, rgba(17, 8, 38, 0.9) 28%, rgba(18, 8, 39, 0.9) 72%, rgba(15, 7, 36, 0) 100%);
}

/* Kopf eines Themas: eine Zeile wie im bisherigen FAQ (Icon, Ueberschrift, Linie darunter) */
.fq-thema-kopf { position: relative; display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding: 0 0 16px; }
.fq-thema-kopf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(232, 201, 106, 0.5), rgba(196, 165, 255, 0.24) 45%, rgba(196, 165, 255, 0.05)); }
.fq-thema-ic {
  flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #30235e, #120c2a 70%);
  border: 1px solid rgba(232, 201, 106, 0.42);
  box-shadow: 0 0 0 5px rgba(232, 201, 106, 0.04), 0 12px 26px -12px rgba(0, 0, 0, 0.8), 0 0 28px rgba(var(--tint), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fq-thema-ic img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.fq-thema-titel { flex: 1 1 auto; min-width: 0; }
.fq-thema-kopf small { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.fq-thema-kopf small b { font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.08em; }
.fq-h2 { margin: 0; font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -0.01em; color: #f8f3ff; }
.fq-thema .fq-h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); }

.fq-fragen { display: grid; gap: 12px; }
.fq-frage {
  border-radius: 20px; background: var(--karte-bg); border: 1px solid var(--karte-rand); box-shadow: var(--karte-schatten);
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
  scroll-margin-top: calc(var(--kopf-h) + 24px);
}
.fq-frage:hover { border-color: rgba(255, 255, 255, 0.17); }
.fq-frage.ist-offen {
  background: linear-gradient(135deg, rgba(var(--tint), 0.2), rgba(0, 0, 0, 0) 70%), var(--karte-bg);
  border-color: rgba(232, 201, 106, 0.4);
  box-shadow: var(--karte-schatten), 0 0 40px -10px rgba(var(--tint), 0.45);
}
.fq-frage > h3 { margin: 0; font: inherit; }
.fq-frage h3 button {
  width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; gap: 16px;
  padding: 19px 22px; border: 0; background: none; color: #fbf7ff; text-align: left; cursor: pointer;
  font-size: 16.5px; font-weight: 600; line-height: 1.4;
}
/* Die Website setzt Ueberschriften samt span per !important in die Titelschrift (UI-Standard, in der Ebene
   @layer astromantieTypography: html body :is(h1..h6) :is(span, ...)). !important in einer Ebene schlaegt jedes
   !important ausserhalb, darum steht die Ausnahme in derselben Ebene und gewinnt dort ueber die genauere Auswahl:
   die Fragen bleiben in der Textschrift, die Nummer in Cinzel. */
@layer astromantieTypography {
  html body .fq .fq-frage h3, html body .fq .fq-frage h3 :is(span, button) { font-family: 'Hanken Grotesk', system-ui, sans-serif !important; }
  html body .fq .fq-frage h3 .fq-nr { font-family: 'Cinzel', serif !important; }
}
.fq-frage h3 button:focus-visible { outline: 2px solid rgba(232, 201, 106, 0.7); outline-offset: -4px; border-radius: 20px; }
.fq-nr { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: rgba(232, 201, 106, 0.78); transition: color 0.3s; }
.fq-frage.ist-offen .fq-nr { color: var(--gold-hell); }
.fq-plus { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(232, 201, 106, 0.5); transition: transform 0.45s var(--weich), background 0.3s, box-shadow 0.3s; }
.fq-plus::before, .fq-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; border-radius: 2px; background: var(--gold); transition: transform 0.45s var(--weich); }
.fq-plus::after { transform: rotate(90deg); }
.fq-frage h3 button:hover .fq-plus { background: rgba(232, 201, 106, 0.08); box-shadow: 0 0 16px rgba(232, 201, 106, 0.22); }
.fq-frage.ist-offen .fq-plus { transform: rotate(180deg); background: rgba(232, 201, 106, 0.14); }
.fq-frage.ist-offen .fq-plus::after { transform: rotate(0deg); }
.fq-antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--weich); }
.fq-frage.ist-offen .fq-antwort { grid-template-rows: 1fr; }
.fq-antwort > div { overflow: hidden; }
.fq-antwort-in { padding: 0 24px 24px 72px; }
.fq-antwort-in::before { content: ''; display: block; height: 1px; margin: 0 0 18px; background: linear-gradient(90deg, rgba(232, 201, 106, 0.45), rgba(196, 165, 255, 0.18) 60%, rgba(196, 165, 255, 0)); }
.fq-antwort p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.75; color: rgba(255, 255, 255, 0.92); }
.fq-antwort p:last-child { margin-bottom: 0; }
.fq-antwort strong { color: var(--gold-hell); font-weight: 600; }
.fq-antwort a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.fq-teilen {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 0; border: 0; background: none;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--leise); cursor: pointer; transition: color 0.25s;
}
.fq-teilen:hover { color: var(--gold-hell); }
.fq-teilen svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Zurueck zu den Themen: leise, rechts im Kopf */
.fq-hoch {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(190, 165, 255, 0.18); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--leise);
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.fq-hoch:hover { color: var(--gold-hell); background: rgba(232, 201, 106, 0.07); border-color: rgba(232, 201, 106, 0.5); }
.fq-hoch svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================
   3. NOCH FRAGEN? Lavendel-Schein wie die Fragen der Analyse-Seiten, laeuft oben weich ein
   ===================================================================== */
.fq-schluss { padding: clamp(34px, 4vw, 56px) 0 clamp(110px, 12vw, 170px); }
.fq-schluss::before {
  content: ''; position: absolute; left: 0; right: 0; top: -170px; bottom: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 40% at 50% 42%, rgba(176, 146, 255, 0.24), rgba(176, 146, 255, 0) 72%),
    linear-gradient(180deg, rgba(36, 21, 82, 0) 0%, rgba(36, 21, 82, 0.78) 32%, rgba(36, 21, 82, 0.45) 66%, rgba(36, 21, 82, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 var(--auslauf), #000 70%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 var(--auslauf), #000 70%, rgba(0, 0, 0, 0) 100%);
}
.fq-cta {
  position: relative; max-width: 940px; margin: 0 auto; padding: clamp(36px, 5vw, 62px) clamp(24px, 6vw, 80px);
  border-radius: 30px; text-align: center; overflow: hidden;
  background: radial-gradient(110% 130% at 0% 0%, rgba(176, 72, 206, 0.18), rgba(176, 72, 206, 0) 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(70, 88, 214, 0.16), rgba(70, 88, 214, 0) 55%),
              linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) 55%), rgba(14, 7, 32, 0.78);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.fq-cta::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--fq-w), rgba(232, 201, 106, 0) 0deg, rgba(251, 233, 176, 0.9) 60deg, rgba(var(--tint), 0.85) 140deg, rgba(232, 201, 106, 0) 220deg, rgba(232, 201, 106, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fq-umlauf 9s linear infinite;
}
@keyframes fq-umlauf { to { --fq-w: 360deg; } }
@keyframes fq-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.fq-cta-bild { width: 112px; height: 112px; margin: 0 auto 6px; display: block; animation: fq-schweben 6s ease-in-out infinite; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(140, 110, 255, 0.35)); }
.fq-cta .fq-h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin: 14px 0 16px; }
.fq-cta p { margin: 0 auto 30px; max-width: 34em; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.7; color: var(--mittel); }
.fq-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.fq-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; border-radius: 999px;
  font-size: 15.5px; font-weight: 700; letter-spacing: 0.01em; transition: transform 0.3s var(--weich), box-shadow 0.3s, background 0.3s, border-color 0.3s;
}
.fq-knopf svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fq-knopf.gold { background: linear-gradient(135deg, #f5e1ad, #e2c27c 45%, #c99f52); color: #24173f; box-shadow: 0 16px 38px -14px rgba(232, 201, 106, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.fq-knopf.gold:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -14px rgba(232, 201, 106, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.fq-knopf.glas { border: 1px solid rgba(206, 186, 255, 0.34); background: rgba(255, 255, 255, 0.05); color: #fff; }
.fq-knopf.glas:hover { transform: translateY(-2px); border-color: rgba(232, 201, 106, 0.6); background: rgba(232, 201, 106, 0.07); }
.fq-cta-fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 26px; font-size: 13px; color: var(--leise); }
.fq-cta-fuss span { display: inline-flex; align-items: center; gap: 8px; }
.fq-cta-fuss span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(232, 201, 106, 0.8); }

/* Leiste unten (Handy) */
.fq-leiste { display: none; }

/* ---------- Erscheinen ---------- */
.fq.fq-js .fq-rv { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); transition: opacity 0.9s var(--weich), transform 1.1s var(--weich), filter 0.9s var(--weich); transition-delay: calc(var(--v, 0) * 70ms); }
.fq.fq-js .fq-rv.ist-da { opacity: 1; transform: none; filter: none; }
.fq-auf { animation: fq-auftauchen 1.1s var(--weich) backwards; animation-delay: calc(var(--v, 0) * 120ms + 80ms); }
@keyframes fq-auftauchen { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* =====================================================================
   Tablet und Handy
   ===================================================================== */
@media (max-width: 760px) {
  .fq-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fq { --auslauf: 130px; }
  .fq-wrap, .fq-spalte { width: calc(100% - 32px); }
  .fq-h1 { font-size: clamp(2.35rem, 10vw, 2.9rem); }
  .fq-zahlen { gap: 26px; }
  .fq-zahlen li + li::before { left: -13px; }
  .fq-themen-titel::before, .fq-themen-titel::after { flex-basis: 60px; }
  /* Kacheln: drei nebeneinander, Bild oben */
  .fq-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fq-kachel { grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 6px; padding: 12px 6px; border-radius: 16px; text-align: center; }
  .fq-kachel img { width: 46px; height: 46px; }
  .fq-kachel b { font-size: 12.5px; line-height: 1.25; hyphens: auto; -webkit-hyphens: auto; }
  .fq-kachel small { margin-top: 3px; font-size: 9.5px; letter-spacing: 0.1em; }
  .fq-kachel::after { display: none; }
  .fq-thema-kopf { gap: 12px; padding-bottom: 14px; margin-bottom: 16px; }
  .fq-thema-ic { flex-basis: 46px; width: 46px; height: 46px; }
  .fq-thema-ic img { width: 36px; height: 36px; }
  .fq-thema-kopf small { font-size: 9.5px; letter-spacing: 0.18em; }
  .fq-thema .fq-h2 { font-size: 1.45rem; }
  .fq-hoch { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .fq-hoch span { display: none; }
  .fq-frage { border-radius: 18px; }
  .fq-frage h3 button { grid-template-columns: 24px minmax(0, 1fr) 30px; gap: 12px; padding: 17px 16px; font-size: 15.5px; }
  .fq-nr { font-size: 12px; }
  .fq-plus { width: 30px; height: 30px; }
  .fq-antwort-in { padding: 0 18px 20px 18px; }
  .fq-antwort p { font-size: 15px; }
  .fq-cta { border-radius: 24px; }
  .fq-knopf { width: 100%; }

  .fq-leiste {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; display: flex; align-items: center; gap: 10px;
    padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(16, 10, 36, 0.9); border: 1px solid rgba(232, 201, 106, 0.32);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9);
    transform: translateY(140%); transition: transform 0.5s var(--weich);
  }
  .fq-leiste.ist-da { transform: none; }
  .fq-leiste span { flex: 1; font-size: 13px; line-height: 1.3; color: var(--mittel); }
  .fq-leiste span b { display: block; color: #fff; font-size: 14px; }
  .fq-leiste a { flex: 0 0 auto; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 999px; background: linear-gradient(135deg, #f5e1ad, #e2c27c 45%, #c99f52); color: #24173f; font-size: 14px; font-weight: 700; }
}

@media (prefers-reduced-motion: reduce) {
  .fq *, .fq *::before, .fq *::after { animation: none !important; transition: none !important; }
  .fq.fq-js .fq-rv { opacity: 1; transform: none; filter: none; }
}