/* ===================================================================
   SHOP-FAQ - eigene Stile fuer shop-faq.html

   Diese Datei enthaelt NUR neue Klassen. Alle beginnen mit "shop-faq",
   damit keine bestehende Regel aus style.css oder shop.css
   ueberschrieben wird.

   Die Seite laedt ausserdem shop.css. Von dort kommt nur die
   Werkzeugleiste oben (.shop-toolbar) - sie sieht damit genauso aus wie
   auf der Shop-Seite. shop.css selbst bleibt unveraendert.

   Zum <details>-Element: style.css gestaltet <details> und <summary>
   ausschliesslich innerhalb von .site-nav (dem Navigations-Menue). Das
   Akkordeon hier ist davon nicht betroffen und faengt beim
   Browser-Standard an.

   Alle Farben kommen aus den Variablen in style.css (:root). Hier steht
   absichtlich kein einziger fester Farbwert.
   =================================================================== */

/* --- Die Statuszeile ("Loading questions…") ------------------------ */
.shop-faq-status {
  margin: 1.5rem 0;

  color: var(--muted);
  line-height: 1.5;
}

/* Sicherheitsnetz: Das Attribut hidden versteckt ein Element nur, wenn
   keine andere Regel ihm ein display gibt. */
.shop-faq-status[hidden] {
  display: none;
}

/* --- Eine aufklappbare Frage --------------------------------------- */
.shop-faq-item {
  margin: 0 0 0.6rem;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Die offene Frage bekommt einen Rahmen in Akzentfarbe. Bewusst nur ein
   Farbwechsel und KEIN dickerer Rahmen: Ein dickerer Rahmen wuerde den
   Text beim Aufklappen um ein paar Pixel zur Seite ruecken. */
.shop-faq-item[open] {
  border-color: var(--accent);
}

/* --- Die Frage selbst (die Klickflaeche) ---------------------------- */
/* display: flex hat zwei Aufgaben: Es stellt das Plus-Zeichen an den
   rechten Rand, UND es entfernt in Chrome das eingebaute Dreieck.
   list-style: none entfernt dasselbe Dreieck in Firefox. */
.shop-faq-item__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;

  padding: 0.9rem 1.1rem;

  font-weight: 600;
  line-height: 1.4;

  list-style: none;
  cursor: pointer;
}

/* Und dasselbe Dreieck in Safari. */
.shop-faq-item__question::-webkit-details-marker {
  display: none;
}

/* Das eigene Zeichen rechts: + wenn zu, − wenn offen.
   flex: 0 0 auto haelt es schmal, damit eine lange Frage es nicht
   zusammenquetscht. */
.shop-faq-item__question::after {
  content: '+';
  flex: 0 0 auto;

  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}

.shop-faq-item[open] .shop-faq-item__question::after {
  content: '−';
}

.shop-faq-item__question:hover {
  color: var(--accent);
}

/* Wer mit der Tabulator-Taste navigiert, muss sehen, wo er steht.
   outline-offset zieht den Rahmen nach innen, damit er nicht ueber den
   Rahmen der Karte hinauslaeuft. */
.shop-faq-item__question:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* --- Die Antwort ---------------------------------------------------- */
/* Oben kein Abstand: Der Abstand zur Frage kommt schon aus deren
   Polsterung. white-space: pre-line zeigt die Zeilenumbrueche aus
   shop-faq-data.js an (gleicher Weg wie bei der Produkt-Beschreibung). */
.shop-faq-item__answer {
  margin: 0;
  padding: 0 1.1rem 1.1rem;

  color: var(--text);
  line-height: 1.6;

  white-space: pre-line;
}

/* --- Schmale Bildschirme (Handy) ------------------------------------ */
/* Weniger Polsterung laesst mehr Platz fuer den Text. */
@media (max-width: 480px) {
  .shop-faq-item__question {
    padding: 0.8rem 0.9rem;
    gap: 0.6rem;
  }

  .shop-faq-item__answer {
    padding: 0 0.9rem 0.9rem;
  }
}