/*
 * »Fragen und Antworten« (11.11., resources/views/shop/teile/fragen.blade.php) – für alle Designs dasselbe, hell wie der Kaufweg.
 * Ebene, Träger und Kopf des Blatts stehen in css/shop.css. Geladen auf der eigenen Seite (shop/fragen) und – erst beim Öffnen des Blatts – von
 * public/js/shop.js (data-blatt-stil am Verweis). Die Antworten gehen weich auf (.klappe aus css/shop.css), ohne Skript stehen sie da.
 */
.fragen-blatt { color: var(--tinte); }
.fragen-kopf { grid-template-columns: minmax(0, 1fr) 48px; padding: 18px 12px 12px 20px; }
.fragen-kopf h2 { font-size: 22px; line-height: 1.2; }
.fragen-kopf p { margin-top: 4px; font-size: 14px; }
.fragen-blatt .blatt-zu { border: 0; background: none; cursor: pointer; }

.fragen-liste { list-style: none; margin: 0; padding: 0 20px; }
.frage { border-bottom: 1px solid var(--linie); }
.frage h3 { margin: 0; font-size: inherit; }
.frage-auf {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 14px 0;
    border: 0; background: none; color: var(--tinte); font: inherit; font-size: 16px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer;
}
.frage-auf .sym { flex: none; width: 18px; height: 18px; color: var(--neben); }
/* Offen: aus dem Plus wird ein Minus – der senkrechte Strich fährt weich ein, kein Sprung. */
.frage-senkrecht { transform-box: fill-box; transform-origin: center; transition: transform 260ms var(--kurve); }
.frage-auf[aria-expanded='true'] .frage-senkrecht { transform: scaleY(0); }
.frage-auf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }
.frage-antwort { padding: 0 0 16px; color: var(--text); font-size: 15px; line-height: 1.6; display: grid; gap: 8px; }
.frage-antwort a { color: var(--akzent); font-weight: 600; }

.fragen-kontakt { margin: 0; padding: 16px 20px max(20px, env(safe-area-inset-bottom)); color: var(--neben); font-size: 14px; line-height: 1.6; }
.fragen-kontakt a { color: var(--akzent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.fragen-kontakt a:hover { text-decoration: underline; }

/* Die eigene Seite (ohne Skript, aus einer Mail): eine Karte in der schmalen Spalte, ohne X – oben steht der Weg zurück. */
.fragen-seite { max-width: 640px; }
.fragen-seite .fragen-blatt { border-radius: 20px; background: var(--flaeche); box-shadow: var(--schatten-fein); }
.fragen-seite .blatt-kopf { position: static; background: none; box-shadow: none; }
.fragen-seite .blatt-zu { display: none; }