/** Shopify CDN: Minification failed

Line 87:0 All "@import" rules must come first

**/
/*
  ============================================================
  FILE:    assets/faq-glowora.css
  BRAND:   FLO — Premium Hair Gummies
  STYLE:   Editorial Cream | Numbered Accordion | Serif-Forward
  VERSION: 3.0.0

  TABLE OF CONTENTS
  1.  Custom Properties
  2.  Font Import
  3.  Section Scaffold
  4.  Inner Two-Column Grid
  5.  Left Aside (Sticky Label Column)
     5a. Aside Label / Eyebrow
     5b. Aside Heading
     5c. Aside Subheading
     5d. Vertical Decorative Line
     5e. Aside CTA Link (optional)
  6.  Mobile Header (hidden on desktop)
  7.  FAQ List
  8.  FAQ Item
     8a. Item Rule / Separator
  9.  Question Button
     9a. Number Ornament
     9b. Question Text
     9c. Toggle Icon (+ → ×)
  10. Answer Panel (Accordion)
     10a. Answer Inner (grid trick)
     10b. Answer Body (richtext)
  11. Open State
  12. Footnote
  13. Focus Styles (Accessibility)
  14. Responsive: Tablet (≤ 1024px)
  15. Responsive: Mobile (≤ 749px)
  16. Reduced Motion
  ============================================================
*/


/* ── 1. CUSTOM PROPERTIES ─────────────────────────────────── */

.glow-faq {
  /* Palette — overridden inline from Shopify settings */
  --faq-bg:      #FAF8F5;
  --faq-text:    #1C1814;
  --faq-accent:  #D8B8A2;
  --faq-line:    #E8E2D9;

  /* Derived — wärmer, konsistent mit restlicher Palette */
  --faq-text-muted:    color-mix(in srgb, var(--faq-text) 42%, transparent);
  --faq-text-subtle:   color-mix(in srgb, var(--faq-text) 18%, transparent);
  --faq-accent-dim:    color-mix(in srgb, var(--faq-accent) 12%, transparent);
  --faq-accent-mid:    color-mix(in srgb, var(--faq-accent) 46%, transparent);
  --faq-accent-warm:   color-mix(in srgb, var(--faq-accent) 10%, #FAF8F5);
  --faq-hover-bg:      color-mix(in srgb, var(--faq-accent) 5%, transparent);

  /* Spacing (8pt grid) */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-6:  3rem;
  --sp-8:  4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snappy:   cubic-bezier(0.4, 0, 0.2, 1);

  /* Accordion */
  --accordion-duration: 0.52s;
}


/* ── 2. FONT IMPORT ───────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@300;400;500&display=swap');


/* ── 3. SECTION SCAFFOLD ──────────────────────────────────── */

.glow-faq {
  background-color: var(--faq-bg);
  color: var(--faq-text);
  /*
    Mehr vertikaler Raum — die FAQ ist eine Vertrauens-Section,
    sie braucht Luft zum Atmen. Nicht gequetscht.
  */
  padding-block: clamp(var(--sp-12), 12vw, var(--sp-16))
                 clamp(var(--sp-12), 12vw, var(--sp-16));
  position: relative;
}

.glow-faq .page-width {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 3rem);
  width: 100%;
}


/* ── 4. INNER TWO-COLUMN GRID ─────────────────────────────── */

/*
  Aside bekommt mehr Breite — 380px statt 340px.
  Das gibt der Überschrift mehr Raum zum Atmen
  und verhindert frühe Zeilenumbrüche.
*/
.glow-faq__inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: clamp(var(--sp-8), 8vw, var(--sp-12));
  align-items: start;
}


/* ── 5. LEFT ASIDE ────────────────────────────────────────── */

.glow-faq__aside {
  position: sticky;
  top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  /*
    Mehr Abstand nach rechts — visueller Atemraum zur FAQ-Liste.
    Trennlinie wird durch gap + padding erzeugt, nicht durch border.
  */
  padding-right: var(--sp-8);
  padding-block: var(--sp-3);
  border-right: 1px solid var(--faq-line);
}


/* ── 5a. ASIDE EYEBROW ────────────────────────────────────── */

/*
  "HÄUFIGE FRAGEN" Label — deutlich selbstbewusster.
  Vorher: 0.8125rem — etwas zu bescheiden für eine Editorial-Section.
  Jetzt: 0.875rem + stärkeres letter-spacing.
*/
.glow-faq__aside-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--faq-accent);
  margin: 0;
}

.glow-faq__aside-dash {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--faq-accent);
  flex-shrink: 0;
}


/* ── 5b. ASIDE HEADING ────────────────────────────────────── */

/*
  "HÄUFIGE FRAGEN" Hauptüberschrift.
  Das ist das visuelle Ankerelement der gesamten Section.
  Vorher: clamp(2rem, 2.8vw, 3.25rem) → max ~52px
  Jetzt:  clamp(2.75rem, 4vw, 5rem)   → max ~80px — echte Präsenz.

  Italic-Variante für das zweite Wort möglich via <em> im Liquid.
  Hier: font-weight 300 + Cormorant = natürlich edel.
*/
.glow-faq__aside-heading {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--faq-text);
  margin: 0;
  hyphens: auto;
  text-wrap: pretty;
}

.glow-faq__aside-heading em {
  font-style: italic;
  color: var(--faq-accent);
  opacity: 0.9;
}


/* ── 5c. ASIDE SUBHEADING ─────────────────────────────────── */

/*
  "Wir beantworten die wichtigsten Fragen rund um FLO"
  Vorher: 1rem (16px), max-width: 28ch — etwas kurz abgehackt.
  Jetzt: clamp(1.0625rem, 1.3vw, 1.25rem) — fließt besser,
  mehr Zeilenhöhe für emotionalen Lesefluss.
*/
.glow-faq__aside-sub {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.85;
  color: var(--faq-text-muted);
  margin: 0;
  /* Etwas mehr Zeichen pro Zeile erlaubt — wirkt weniger abgehackt */
  max-width: 32ch;
}


/* ── 5d. VERTICAL DECORATIVE LINE ─────────────────────────── */

.glow-faq__aside-vline {
  display: block;
  width: 1px;
  height: 72px;
  background: linear-gradient(
    to bottom,
    var(--faq-accent-mid) 0%,
    transparent 100%
  );
  margin-top: var(--sp-4);
}


/* ── 6. MOBILE HEADER ─────────────────────────────────────── */

.glow-faq__mobile-header {
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block-end: var(--sp-8);
  padding-block-end: var(--sp-6);
  border-bottom: 1px solid var(--faq-line);
}

.glow-faq__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faq-accent);
  margin: 0;
}

.glow-faq__eyebrow-dash {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--faq-accent);
  flex-shrink: 0;
}

/*
  Mobile Heading: groß, dominant, sofort erkennbar.
  Vorher: clamp(2rem, 8vw, 2.75rem)
  Jetzt:  clamp(2.5rem, 10vw, 3.5rem)
*/
.glow-faq__mobile-heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 10vw, 3.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--faq-text);
  margin: 0;
}

.glow-faq__mobile-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3.5vw, 1.125rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--faq-text-muted);
  margin: 0;
}


/* ── 7. FAQ LIST ──────────────────────────────────────────── */

.glow-faq__list {
  margin: 0;
  padding: 0;
  /* Obere Trennlinie etwas feiner — subtiler, eleganter */
  border-top: 1px solid var(--faq-line);
}

.glow-faq__empty {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--faq-text-muted);
  padding-block: var(--sp-6);
}


/* ── 8. FAQ ITEM ──────────────────────────────────────────── */

.glow-faq__item {
  position: relative;
  /*
    Weichere Übergangszeit — Premium Beauty Marken vermeiden
    abrupte Statechanges. 0.3s statt 0.25s.
  */
  transition: background 0.3s ease;
}

/*
  Hover: ganz sanfter Warm-Ton — kaum sichtbar, aber spürbar.
  Nicht stark genug um zu lenken, aber stark genug für Feedback.
*/
.glow-faq__item:hover {
  background: var(--faq-hover-bg);
}

.glow-faq__item.is-open {
  background: var(--faq-bg);
}


/* ── 8a. ITEM RULE ────────────────────────────────────────── */

/*
  Trennlinien: feiner und eleganter.
  Accent-Farbe bei Hover/Open = subtile Verbindung zur Marke.
*/
.glow-faq__item-rule {
  display: block;
  height: 1px;
  background: var(--faq-line);
  transition: background 0.35s ease;
}

.glow-faq__item:hover .glow-faq__item-rule,
.glow-faq__item.is-open .glow-faq__item-rule {
  background: color-mix(in srgb, var(--faq-accent) 35%, var(--faq-line));
}


/* ── 9. QUESTION BUTTON ───────────────────────────────────── */

.glow-faq__question-wrap {
  display: block;
  margin: 0;
  padding: 0;
}

.glow-faq__question {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;

  display: grid;
  /*
    Nummer-Spalte etwas breiter: 64px statt 56px.
    Toggle-Icon-Spalte: 48px statt 44px.
    Gibt der Frage mehr Luft und lässt den Toggle eleganter wirken.
  */
  grid-template-columns: 64px 1fr 48px;
  align-items: center;
  gap: var(--sp-3);
  padding-inline: 0;
  color: var(--faq-text);

  /*
    Mehr vertikales Padding — Fragen atmen besser.
    Premium Beauty Marken nutzen großzügige Touch-Targets.
    Vorher: 2.25rem oben/unten
    Jetzt:  clamp(1.75rem, 3vw, 2.75rem) — skaliert mit Viewport
  */
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.75rem);

  transition: color 0.3s ease;
}

.glow-faq__question:hover {
  color: var(--faq-text);
}

.glow-faq__item.is-open .glow-faq__question {
  color: var(--faq-text);
}


/* ── 9a. NUMBER ORNAMENT ──────────────────────────────────── */

/*
  Nummern: von 1.375rem auf 1.75rem.
  Italic Cormorant macht sie zum Design-Element — nicht zur Zahl.
  Soll an Benefits-Section-Nummern erinnern: konsistent.
*/
.glow-faq__num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--faq-accent);
  opacity: 0.65;
  transition: opacity 0.3s ease;
  user-select: none;
  line-height: 1;
  align-self: start;
  padding-top: 0.15em;
}

.glow-faq__item:hover .glow-faq__num,
.glow-faq__item.is-open .glow-faq__num {
  opacity: 1;
}


/* ── 9b. QUESTION TEXT ────────────────────────────────────── */

/*
  Frage-Texte: deutlich größer.
  Vorher: clamp(1.125rem, 1.7vw, 1.625rem) → max ~26px
  Jetzt:  clamp(1.25rem, 2vw, 1.875rem)    → max ~30px

  Bei geöffnetem Item: italic — die Frage wird zum Thema des
  expandierten Bereichs. Subtile visuelle Verschiebung.
*/
.glow-faq__question-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.875rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: inherit;
  transition:
    letter-spacing 0.4s var(--ease-out-expo),
    color 0.3s ease,
    font-style 0.3s ease;
}

.glow-faq__item.is-open .glow-faq__question-text {
  letter-spacing: 0.01em;
  font-style: italic;
}


/* ── 9c. TOGGLE ICON (+ → ×) ─────────────────────────────── */

/*
  Toggle: von 22px auf 26px — besser sichtbar,
  besser greifbar, eleganter im größeren Layout.
*/
.glow-faq__toggle {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  justify-self: end;
}

.glow-faq__toggle-h,
.glow-faq__toggle-v {
  position: absolute;
  background: var(--faq-accent);
  border-radius: 1px;
  transition:
    transform var(--accordion-duration) var(--ease-out-expo),
    opacity 0.35s ease;
}

.glow-faq__toggle-h {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
}

.glow-faq__toggle-v {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}

.glow-faq__item.is-open .glow-faq__toggle-v {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.glow-faq__item.is-open .glow-faq__toggle-h {
  transform: translateY(-50%) rotate(45deg) scaleX(1);
}

.glow-faq__item.is-open .glow-faq__toggle-h::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--faq-accent);
  transform: rotate(90deg);
}


/* ── 10. ANSWER PANEL ─────────────────────────────────────── */

.glow-faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--accordion-duration) var(--ease-out-expo);
  overflow: hidden;
}

.glow-faq__answer-wrap:not([hidden]) {
  display: grid;
}

.glow-faq__item.is-open .glow-faq__answer-wrap {
  grid-template-rows: 1fr;
}

.glow-faq__answer-wrap[hidden] {
  display: grid;
  grid-template-rows: 0fr;
}


/* ── 10a. ANSWER INNER ────────────────────────────────────── */

.glow-faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}


/* ── 10b. ANSWER BODY ─────────────────────────────────────── */

/*
  Answer-Layout: mit Frage ausgerichtet (gleiche Spalten).
  Antwort erscheint immer in Spalte 2 — unter der Frage.
*/
.glow-faq__answer {
  display: grid;
  grid-template-columns: 64px 1fr 48px;
  /* Mehr Abstand unten — Antwort braucht Raum zum Enden */
  padding-block-end: clamp(var(--sp-4), 4vw, var(--sp-8));
  padding-inline: 0;
}

.glow-faq__answer > * {
  grid-column: 2;
}

/*
  Antwort-Texte: größer, luftiger, vertrauenswürdiger.
  Vorher: 1.0625rem (17px), line-height: 1.85
  Jetzt:  clamp(1.0625rem, 1.3vw, 1.25rem) — skaliert sanft

  line-height 1.9 — mehr Luftigkeit, weniger technisch.
*/
.glow-faq__answer p,
.glow-faq__answer ul,
.glow-faq__answer ol {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.9;
  color: var(--faq-text-muted);
  margin: 0 0 var(--sp-3) 0;
}

.glow-faq__answer p:last-child,
.glow-faq__answer ul:last-child,
.glow-faq__answer ol:last-child {
  margin-bottom: 0;
}

.glow-faq__answer ul,
.glow-faq__answer ol {
  padding-left: var(--sp-3);
}

.glow-faq__answer li {
  margin-block-end: 0.625rem;
}

.glow-faq__answer a {
  color: var(--faq-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

.glow-faq__answer a:hover {
  color: var(--faq-text);
}

.glow-faq__answer strong {
  font-weight: 500;
  color: var(--faq-text);
}


/* ── 12. FOOTNOTE ─────────────────────────────────────────── */

/*
  "Weitere Fragen? Schreib uns unter..."
  Soll wirken wie eine persönliche Einladung.
  Nicht wie ein Support-Link.

  Vorher: font-size: 0.8125rem (13px) — zu klein
  Jetzt:  clamp(1rem, 1.2vw, 1.125rem) — klar lesbar, warm

  Mehr Abstand nach oben — atmet wie ein Postskriptum.
  Warm-Beige Hintergrund gibt dem CTA einen sanften Rahmen.
*/
.glow-faq__footnote {
  margin: clamp(var(--sp-8), 6vw, var(--sp-12)) 0 0 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--faq-text-muted);

  /* Abgetrennt mit Trennlinie + warmem Hintergrund */
  padding: var(--sp-6) var(--sp-6);
  background: var(--faq-accent-warm);
  border: 1px solid color-mix(in srgb, var(--faq-accent) 22%, transparent);
  border-radius: 1px;

  /* Ausrichtung nicht mehr in der Nummer-Spalte — volle Breite wirkt persönlicher */
  padding-left: var(--sp-6);
}

.glow-faq__footnote strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 300;
  font-style: italic;
  color: var(--faq-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-block-end: 0.5rem;
}

.glow-faq__footnote a {
  color: var(--faq-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.glow-faq__footnote a:hover {
  opacity: 0.7;
}


/* ── 13. FOCUS STYLES (Accessibility) ─────────────────────── */

.glow-faq__question:focus-visible {
  outline: 2px solid var(--faq-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.glow-faq__question:focus:not(:focus-visible) {
  outline: none;
}


/* ── 14. RESPONSIVE: TABLET (≤ 1024px) ───────────────────── */

@media (max-width: 1024px) {
  .glow-faq {
    padding-block: var(--sp-12) var(--sp-8);
  }

  .glow-faq .page-width {
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  }

  .glow-faq__inner {
    grid-template-columns: 300px 1fr;
    gap: var(--sp-8);
  }

  .glow-faq__aside {
    padding-right: var(--sp-6);
    gap: var(--sp-3);
  }

  /* Heading auf Tablet: noch groß genug für Editorial-Wirkung */
  .glow-faq__aside-heading {
    font-size: clamp(2.25rem, 3.5vw, 3.75rem);
  }

  .glow-faq__aside-sub {
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    max-width: none;
  }

  .glow-faq__question {
    grid-template-columns: 56px 1fr 44px;
    gap: var(--sp-2);
  }

  .glow-faq__question-text {
    font-size: clamp(1.125rem, 1.8vw, 1.625rem);
  }

  .glow-faq__num {
    font-size: 1.5rem;
  }

  .glow-faq__answer {
    grid-template-columns: 56px 1fr 44px;
  }

  .glow-faq__answer p,
  .glow-faq__answer ul,
  .glow-faq__answer ol {
    font-size: 1rem;
  }

  .glow-faq__footnote {
    font-size: 1rem;
    padding: var(--sp-4) var(--sp-4);
  }

  .glow-faq__footnote strong {
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  }
}


/* ── 15. RESPONSIVE: MOBILE (≤ 749px) ────────────────────── */
/* ═══════════════════════════════════════════════════
   Komplett neu geschrieben — gleiche Aggressivität
   wie flo-hero Mobile-Block. Desktop unverändert.
═══════════════════════════════════════════════════ */

@media screen and (max-width: 749px) {

  /* Kein horizontaler Overflow */
  .glow-faq {
    overflow-x: hidden;
    padding-block: var(--sp-6) var(--sp-6);
  }

  .glow-faq .page-width {
    padding-inline: 18px;
  }

  /* Single Column */
  .glow-faq__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Desktop Aside ausblenden */
  .glow-faq__aside {
    display: none;
  }

  .glow-faq__aside-vline {
    display: none;
  }

  /* ── MOBILE HEADER ── */
  .glow-faq__mobile-header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-block-end: var(--sp-4);
    padding-block-end: var(--sp-4);
    border-bottom: 1px solid var(--faq-line);
  }

  /* Eyebrow: kompakt */
  .glow-faq__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    gap: var(--sp-1);
  }

  .glow-faq__eyebrow-dash {
    width: 20px;
  }

  /* Mobile Heading: kompakt aber präsent */
  .glow-faq__mobile-heading {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    line-height: 1.1;
    word-break: break-word;
    hyphens: auto;
  }

  /* Mobile Sub */
  .glow-faq__mobile-sub {
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  /* ── FAQ LIST ── */
  .glow-faq__list {
    overflow-x: hidden;
    border-top: 1px solid var(--faq-line);
  }

  /* ── FRAGEN: gut tippbar, gut lesbar ── */
  .glow-faq__question {
    grid-template-columns: 36px 1fr 36px;
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 18px;
    min-height: 56px;
  }

  /* Nummer: kleiner, dekorativ */
  .glow-faq__num {
    font-size: 1.125rem;
    padding-top: 0.1em;
    opacity: 0.7;
  }

  /* Frage-Text: gut lesbar auf Mobile */
  .glow-faq__question-text {
    font-size: clamp(0.9375rem, 4vw, 1.125rem);
    line-height: 1.45;
    word-break: break-word;
    hyphens: auto;
  }

  /* Toggle: gut tippbar */
  .glow-faq__toggle {
    width: 20px;
    height: 20px;
  }

  /* ── ANTWORTEN ── */
  .glow-faq__answer {
    grid-template-columns: 36px 1fr 36px;
    gap: 10px;
    padding-block-end: var(--sp-3);
  }

  .glow-faq__answer p,
  .glow-faq__answer ul,
  .glow-faq__answer ol {
    font-size: 0.9375rem;
    line-height: 1.8;
    word-break: break-word;
  }

  /* ── FOOTNOTE ── */
  .glow-faq__footnote {
    font-size: 0.875rem;
    padding: var(--sp-3) var(--sp-2);
    margin-top: var(--sp-4);
    border-radius: 2px;
  }

  .glow-faq__footnote strong {
    font-size: clamp(1rem, 5vw, 1.25rem);
    margin-block-end: 0.375rem;
  }

  /* Touch: Hover-Effekte deaktivieren */
  @media (hover: none) {
    .glow-faq__item:hover {
      background: transparent;
    }
    .glow-faq__item:hover .glow-faq__item-rule {
      background: var(--faq-line);
    }
    .glow-faq__item:hover .glow-faq__num {
      opacity: 0.7;
    }
  }

  /* ── Sehr kleine Screens (360px) ── */
  @media (max-width: 360px) {
    .glow-faq {
      padding-block: var(--sp-4) var(--sp-4);
    }
    .glow-faq .page-width {
      padding-inline: 14px;
    }
    .glow-faq__mobile-heading {
      font-size: 1.625rem;
    }
    .glow-faq__question {
      grid-template-columns: 30px 1fr 32px;
      gap: 8px;
      padding-top: 14px;
      padding-bottom: 14px;
    }
    .glow-faq__question-text {
      font-size: 0.875rem;
    }
    .glow-faq__answer {
      grid-template-columns: 30px 1fr 32px;
      gap: 8px;
    }
    .glow-faq__answer p,
    .glow-faq__answer ul,
    .glow-faq__answer ol {
      font-size: 0.875rem;
    }
    .glow-faq__footnote {
      padding: var(--sp-2) var(--sp-2);
    }
  }
}


/* ── 16. REDUCED MOTION ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .glow-faq__answer-wrap,
  .glow-faq__answer-wrap[hidden],
  .glow-faq__item.is-open .glow-faq__answer-wrap {
    transition: none;
  }

  .glow-faq__toggle-h,
  .glow-faq__toggle-v {
    transition: none;
  }

  .glow-faq__question-text {
    transition: none;
  }

  .glow-faq__item {
    transition: none;
  }
}