---
import Base from '../layouts/Base.astro';
const main = `<div class="faq-page">
    <div class="faq-hero">
      <p class="faq-eyebrow">Häufige Fragen</p>
      <h1 class="faq-heading">FAQ &amp;<br>Größentabelle</h1>
    </div>

    <!-- Versand & Lieferung -->
    <p class="faq-cat">Versand &amp; Lieferung</p>
    <div class="faq-list" role="list">

      <div class="faq-item" role="listitem">
        <button class="faq-question" aria-expanded="false">
          Wie lange dauert der Versand?
          <span class="faq-icon" aria-hidden="true">+</span>
        </button>
        <div class="faq-answer">
          Wir versenden in der Regel innerhalb von 1–2 Werktagen. Die Lieferzeit innerhalb Deutschlands beträgt dann 2–4 Werktage. In Österreich und der Schweiz 3–7 Werktage. Du bekommst eine Tracking-Nummer per E-Mail, sobald dein Paket unterwegs ist.
        </div>
      </div>

      <div class="faq-item" role="listitem">
        <button class="faq-question" aria-expanded="false">
          Ab wann ist der Versand kostenlos?
          <span class="faq-icon" aria-hidden="true">+</span>
        </button>
        <div class="faq-answer">
          Ab einem Bestellwert von 50 € ist der Versand innerhalb Deutschlands kostenlos. Darunter berechnen wir 4,90 € Versandkosten. Für Österreich und die Schweiz berechnen wir 8,90 €, unabhängig vom Bestellwert.
        </div>
      </div>

      <div class="faq-item" role="listitem">
        <button class="faq-question" aria-expanded="false">
          Versendest du auch ins Ausland?
          <span class="faq-icon" aria-hidden="true">+</span>
        </button>
        <div class="faq-answer">
          Aktuell versenden wir nach Deutschland, Österreich und in die Schweiz. Weitere Länder sind geplant. Meld dich gern bei uns, wenn du aus einem anderen Land bestellst — wir schauen, was wir machen können.
        </div>
      </div>

    </div>

    <!-- Rückgabe & Reklamation -->
    <p class="faq-cat">Rückgabe &amp; Reklamation</p>
    <div class="faq-list">

      <div class="faq-item">
        <button class="faq-question" aria-expanded="false">
          Kann ich Artikel zurückschicken?
          <span class="faq-icon" aria-hidden="true">+</span>
        </button>
        <div class="faq-answer">
          Ja. Du hast 30 Tage Zeit, Artikel ungetragen und im Originalzustand zurückzuschicken. Das gesetzliche Widerrufsrecht beträgt 14 Tage — wir geben dir 30. Schreib uns eine Mail an <a href="mailto:info@tgasolutions-shop.de">info@tgasolutions-shop.de</a> und wir kümmern uns darum.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question" aria-expanded="false">
          Was mache ich, wenn ich einen Fehler oder Schaden reklamieren will?
          <span class="faq-icon" aria-hidden="true">+</span>
        </button>
        <div class="faq-answer">
          Schreib uns direkt an <a href="mailto:info@tgasolutions-shop.de">info@tgasolutions-shop.de</a> mit deiner Bestellnummer und einem Foto des Problems. Wir finden eine Lösung — unkompliziert und ohne Bürokratie.
        </div>
      </div>

    </div>

    <!-- Produkte -->
    <p class="faq-cat">Produkte &amp; Material</p>
    <div class="faq-list">

      <div class="faq-item">
        <button class="faq-question" aria-expanded="false">
          Welches Material verwenden eure Produkte?
          <span class="faq-icon" aria-hidden="true">+</span>
        </button>
        <div class="faq-answer">
          Alle Textilien sind aus 100% Bio-Baumwolle (GOTS-zertifiziert, Fairtrade). Die Hoodies haben 280 g/m², die T-Shirts 180 g/m². Die Caps sind aus Baumwolle, ebenfalls ohne Plastik. Keine Synthetikfasern — weil's auf der Baustelle warm genug wird.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question" aria-expanded="false">
          Wie pflege ich die Teile richtig?
          <span class="faq-icon" aria-hidden="true">+</span>
        </button>
        <div class="faq-answer">
          Alles waschbar bei 40°C, am besten auf links gewaschen. Nicht heiß trocknen — einlaufen vermeiden. Nicht bleichen, nicht chemisch reinigen. Die Stickereien und Prints sind hitzeempfindlich — also nicht direkt drügebügeln.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question" aria-expanded="false">
          Wie fallen die Größen aus?
          <span class="faq-icon" aria-hidden="true">+</span>
        </button>
        <div class="faq-answer">
          Unsere Hoodies und T-Shirts fallen in Unisex-Schnitt aus — das bedeutet: etwas breiter geschnitten, eher gerader Fall. Wenn du es enger magst, eine Größe kleiner nehmen. Im Zweifel: die Größentabelle weiter unten auf dieser Seite checken.
        </div>
      </div>

    </div>

    <!-- Zahlung -->
    <p class="faq-cat">Zahlung</p>
    <div class="faq-list">

      <div class="faq-item">
        <button class="faq-question" aria-expanded="false">
          Welche Zahlungsarten akzeptiert ihr?
          <span class="faq-icon" aria-hidden="true">+</span>
        </button>
        <div class="faq-answer">
          PayPal, Kreditkarte (Visa, Mastercard) und Banküberweisung (Vorkasse). Bei Banküberweisung: Wir versenden erst nach Zahlungseingang. In der Regel dauert das 1–2 Werktage zusätzlich.
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-question" aria-expanded="false">
          Habe ich einen Rabattcode?
          <span class="faq-icon" aria-hidden="true">+</span>
        </button>
        <div class="faq-answer">
          Wenn du dich für unseren Newsletter einträgst, bekommst du 10% auf deine erste Bestellung — Code: <strong>HANDWERK10</strong>. Den Code einfach im Warenkorb eingeben.
        </div>
      </div>

    </div>

    <!-- Größentabelle -->
    <div class="size-section" id="groessen">
      <p class="faq-cat" style="margin-top:0">Größentabelle</p>
      <h2 style="font-family:var(--font-display);font-size:clamp(20px,2.5vw,28px);font-weight:900;text-transform:uppercase;margin-bottom:var(--sp-sm)">Hoodies &amp; T-Shirts (Unisex)</h2>
      <div class="size-table-wrap">
        <table class="size-table">
          <thead>
            <tr>
              <th scope="col">Größe</th>
              <th scope="col">Brustumfang (cm)</th>
              <th scope="col">Körpergröße (cm)</th>
              <th scope="col">Hüfte (cm)</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>XS</td><td>84–88</td><td>158–164</td><td>86–90</td></tr>
            <tr><td>S</td><td>88–92</td><td>164–170</td><td>90–94</td></tr>
            <tr><td>M</td><td>92–96</td><td>170–176</td><td>94–98</td></tr>
            <tr><td>L</td><td>96–100</td><td>176–182</td><td>98–102</td></tr>
            <tr><td>XL</td><td>100–108</td><td>182–188</td><td>102–108</td></tr>
            <tr><td>2XL</td><td>108–116</td><td>188–194</td><td>108–114</td></tr>
            <tr><td>3XL</td><td>116–124</td><td>194+</td><td>114–120</td></tr>
          </tbody>
        </table>
      </div>
      <p class="size-note">Angaben in Zentimeter. Unisex-Schnitt = etwas breiter als Regular Fit. Bei Unsicherheit: eine Größe kleiner wählen.</p>
      <p class="size-note" style="margin-top:6px">Die Caps sind One Size — SnapBack-Verschluss passt nahezu allen Kopfgrößen.</p>
    </div>

    <!-- Contact CTA -->
    <div class="faq-contact">
      <h2>Frage nicht beantwortet?</h2>
      <p>Schreib uns — wir antworten auf der Baustelle, in der Werkstatt, irgendwo.</p>
      <a href="mailto:info@tgasolutions-shop.de" class="btn btn-primary">info@tgasolutions-shop.de</a>
    </div>

  </div>`;
---
<Base title={"FAQ & Größen — PMPNZNG"} page="faq" active="faq">
  <Fragment set:html={main} />
</Base>

<style is:global>

.faq-page { max-width: 860px; margin: 0 auto; padding: var(--sp-xl) var(--gutter) var(--sp-2xl); }
.faq-hero {
  margin-bottom: var(--sp-xl);
}
.faq-eyebrow { font-size: 9px; letter-spacing: 0.32em; color: var(--c-red-bright); text-transform: uppercase; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.faq-eyebrow::before { content:''; display:block; width:24px; height:2px; background:var(--c-red-bright); }
.faq-heading { font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); font-weight: 900; text-transform: uppercase; line-height: 0.95; }

/* Category labels */
.faq-cat {
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-red-bright); font-weight: 700;
  margin: var(--sp-lg) 0 var(--sp-sm);
  display: flex; align-items: center; gap: 10px;
}
.faq-cat::after { content:''; flex:1; height:1px; background:var(--c-border); }

/* Accordion */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--c-border); }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 20px 0;
  font-size: 15px; font-weight: 600; color: var(--c-text);
  text-align: left; gap: 16px;
  background: none; border: none; cursor: pointer;
  transition: color var(--dur-fast);
}
.faq-question:hover { color: var(--c-red-bright); }
.faq-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  border: 1px solid var(--c-border-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--c-text-muted);
  transition: all var(--dur-fast);
}
.faq-item.open .faq-icon {
  background: var(--c-red); border-color: var(--c-red); color: #fff;
}
.faq-answer {
  display: none;
  font-size: 14px; color: var(--c-text-muted); line-height: 1.8;
  padding-bottom: 20px;
  max-width: 680px;
}
.faq-item.open .faq-answer { display: block; }
.faq-answer a { color: var(--c-red-bright); text-decoration: underline; }

/* Size table */
.size-section { margin-top: var(--sp-xl); }
.size-table-wrap { overflow-x: auto; margin-top: var(--sp-sm); }
table.size-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.size-table th {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  padding: 12px 16px; text-align: center;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: var(--c-text-muted);
  white-space: nowrap;
}
.size-table th:first-child { text-align: left; }
.size-table td {
  border: 1px solid var(--c-border); padding: 11px 16px;
  text-align: center; color: var(--c-text-muted);
}
.size-table td:first-child {
  font-family: var(--font-display); font-weight: 900; font-size: 14px;
  color: var(--c-text); text-align: left; background: var(--c-surface-1);
}
.size-table tr:hover td { background: var(--c-surface-1); }
.size-note { font-size: 11px; color: var(--c-text-dim); margin-top: 10px; }

/* Contact CTA */
.faq-contact {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  padding: var(--sp-lg); text-align: center; margin-top: var(--sp-xl);
}
.faq-contact h2 { font-family: var(--font-display); font-size: clamp(18px,2.5vw,24px); font-weight: 900; text-transform: uppercase; margin-bottom: 10px; }
.faq-contact p { font-size: 13px; color: var(--c-text-muted); margin-bottom: var(--sp-md); }

</style>