/* ── سوالات متداول (FAQ-Akkordeon) ──
     Aufklappen ohne JS-Hoehenmessung: .hz-faq__panel ist ein Grid, dessen
     einzige Zeile per Transition von 0fr auf 1fr waechst - reine CSS-Arbeit,
     kein Layout-Thrashing. visibility sorgt dafuer, dass Links in
     geschlossenen Antworten nicht per Tab erreichbar sind. Das Skript in
     templates/home.html setzt nur aria-expanded + .is-open. */
  /* Farbige Box: dunkles Smaragd-/Waldgruen mit weichen Lichtakzenten
     (hell-gruen oben, Bernstein unten) und feinem Gitter wie im Hero - hebt
     sich klar vom hellen Seitenhintergrund ab, die weissen Fragekarten stehen
     darauf kontrastreich im Vordergrund. Gleiche Breite wie die anderen
     Abschnitte, die Liste selbst bleibt fuer die Lesbarkeit auf 960px
     begrenzt. */
  .hz-faq {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(1400px, calc(100% - 0.25rem));
    margin: 3.5rem auto 3rem;
    padding: 2.5rem 1.5rem 2.75rem;
    border-radius: 24px;
    border: 1px solid rgba(110, 231, 183, 0.16);
    background:
      radial-gradient(ellipse 60% 50% at 10% 0%, rgba(52, 211, 153, 0.22), transparent 60%),
      radial-gradient(ellipse 50% 45% at 92% 100%, rgba(245, 166, 35, 0.14), transparent 60%),
      linear-gradient(155deg, #04362b 0%, #064e3b 48%, #0a3d33 100%);
    box-shadow: 0 16px 36px rgba(4, 54, 43, 0.28);
  }
  .hz-faq::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
  }
  .hz-faq__title,
  .hz-faq__list {
    max-width: 960px;
    margin-inline: auto;
  }
  .hz-faq__title {
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
  }
  .hz-faq__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 0.6rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #34d399, var(--hz-amber));
  }
  .hz-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .hz-faq__item {
    background: #fff;
    border: 1px solid #e2eef5;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(11, 31, 46, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .hz-faq__item.is-open {
    border-color: rgba(26, 184, 232, 0.45);
    box-shadow: 0 8px 22px rgba(11, 31, 46, 0.08);
  }
  /* Hover nur mit echter Maus: auf Touch-Geraeten bleibt :hover nach dem
     Antippen haengen, eine gerade geschlossene Karte sahe sonst weiter
     "aktiv" aus. */
  @media (hover: hover) {
    .hz-faq__item:hover {
      border-color: rgba(26, 184, 232, 0.45);
      box-shadow: 0 8px 22px rgba(11, 31, 46, 0.08);
    }
    .hz-faq__item:hover .hz-faq__chevron { color: var(--hz-cyan-deep); }
  }
  .hz-faq__q {
    margin: 0;
    font-size: inherit;
  }
  .hz-faq__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    background: none;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--hz-ink);
    text-align: right;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hz-faq__toggle:focus-visible {
    outline: 2px solid var(--hz-cyan);
    outline-offset: 2px;
  }
  .hz-faq__num {
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--hz-mint);
    color: var(--hz-cyan-deep);
    font-size: 0.85rem;
    font-weight: 800;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .hz-faq__item.is-open .hz-faq__num {
    background: var(--hz-cyan-deep);
    color: #fff;
  }
  .hz-faq__q-text { flex: 1 1 auto; min-width: 0; }
  .hz-faq__chevron {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    color: #7a93a6;
    transition: transform 0.3s ease, color 0.2s ease;
  }
  .hz-faq__item.is-open .hz-faq__chevron {
    transform: rotate(180deg);
    color: var(--hz-cyan-deep);
  }
  .hz-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.32s ease, visibility 0s linear 0.32s;
  }
  .hz-faq__item.is-open .hz-faq__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.32s ease, visibility 0s;
  }
  .hz-faq__panel-inner {
    min-height: 0;
    overflow: hidden;
  }
  .hz-faq__a {
    margin: 0 1.1rem;
    padding: 0.9rem 0 1.1rem;
    border-top: 1px dashed #dbe7ef;
    color: #334155;
    font-size: 0.93rem;
    line-height: 2;
    text-align: right;
  }
  .hz-faq__a p { margin: 0; }
  .hz-faq__a p + p { margin-top: 0.55rem; }
  .hz-faq__a strong { color: var(--hz-ink); font-weight: 700; }
  .hz-faq__note { color: #5a7388; font-size: 0.88rem; }
  .hz-faq__link {
    color: #007bff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .hz-faq__link:hover { color: #0056b3; }
  /* "PDFهای": ohne Leerzeichen trennt der Browser sonst zwischen Latein und Persisch um. */
  .hz-faq__nowrap { white-space: nowrap; }

  @media (max-width: 767px) {
    /* Seitlich schmaler (.hz-home hat mobil schon 0.75rem Rand), damit die
       Fragen auf 320-390px nicht in 4 Zeilen zerfallen. */
    .hz-faq { margin: 2.25rem auto 2rem; padding: 1.5rem 0.5rem 1.6rem; border-radius: 18px; }
    .hz-faq__title { font-size: 1.15rem; margin-bottom: 1.1rem; }
    .hz-faq__list { gap: 0.55rem; }
    .hz-faq__item, .hz-faq__toggle { border-radius: 12px; }
    .hz-faq__toggle { padding: 0.8rem 0.75rem; gap: 0.55rem; font-size: 0.9rem; line-height: 1.65; touch-action: manipulation; }
    .hz-faq__num { width: 1.55rem; height: 1.55rem; font-size: 0.78rem; }
    .hz-faq__chevron { width: 1rem; height: 1rem; }
    .hz-faq__a { margin: 0 0.75rem; padding: 0.75rem 0 0.95rem; font-size: 0.87rem; line-height: 1.9; }
    .hz-faq__a p + p { margin-top: 0.5rem; }
    .hz-faq__note { font-size: 0.83rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hz-faq__item,
    .hz-faq__num,
    .hz-faq__chevron,
    .hz-faq__panel,
    .hz-faq__item.is-open .hz-faq__panel { transition: none; }
  }