/* faq.css – fix-16: nur für die FAQ-Seiten (faq.html, en/faq.html). Wird nach draft.css und nav.css geladen.
   Alle Regeln hängen an body.faq-page, andere Seiten sind nicht betroffen. */
body.faq-page { background: #ecdfd1; color: #241812; }
.faq-page main.page { padding: 34px 0 56px; }
.faq-page .kicker { margin: 0 0 6px; color: #9a4520; }
.faq-page h1 { color: #241812; margin: 0 0 22px; }
.faq-page h2 { color: #241812; }

/* Helle Box mit Fragen und Antworten */
.faq-box { max-width: 860px; background: #f7f1ea; color: #241812; border: 1px solid #ddcab8; border-radius: 16px; box-shadow: 0 1px 2px rgba(60, 35, 20, .05), 0 10px 28px rgba(60, 35, 20, .07); padding: 6px 28px; }
.faq-item + .faq-item { border-top: 1px solid #e0cfbf; }
.faq-q { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.005em; }
.faq-q button { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; margin: 0; padding: 19px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .faq-q button:hover { color: #a34b24; } }
.faq-q button:focus-visible { outline: 2px solid #f26520; outline-offset: 3px; border-radius: 6px; }
.faq-a p { margin: 0; padding: 0 0 20px; max-width: 70ch; font-size: 16px; line-height: 1.65; color: #3e2f27; }
.faq-a a.u { color: #8a3a17; }
.faq-a a.u:hover { color: #f26520; }

/* Plus-/Minus-Symbol (nur mit JavaScript sichtbar; ohne JavaScript sind alle Antworten offen) */
.faq-ico { display: none; position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #e3c2ad; background: #fff; }
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #f26520; transition: transform .2s ease; }
.faq-ico::after { transform: rotate(90deg); }

/* Aufklapp-Verhalten, nur wenn faq.js läuft (Klasse am <html>) */
.faq-js .faq-ico { display: block; }
.faq-js .faq-q button[aria-expanded="true"] .faq-ico { background: #f26520; border-color: #f26520; }
.faq-js .faq-q button[aria-expanded="true"] .faq-ico::before, .faq-js .faq-q button[aria-expanded="true"] .faq-ico::after { background: #fff; transform: rotate(180deg); }
.faq-js .faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.faq-js .faq-a > div { overflow: hidden; min-height: 0; }
.faq-js .faq-item.open .faq-a { grid-template-rows: 1fr; visibility: visible; }
.faq-js .faq-box.ready .faq-a { transition: grid-template-rows .24s ease, visibility 0s linear .24s; }
.faq-js .faq-box.ready .faq-item.open .faq-a { transition: grid-template-rows .24s ease, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) {
  .faq-js .faq-box.ready .faq-a, .faq-js .faq-box.ready .faq-item.open .faq-a, .faq-ico::before, .faq-ico::after { transition: none; }
}

/* Kontakt-Box unten */
.faq-page .faq-contact { max-width: 860px; margin: 22px 0 0; padding: 26px 28px; border-color: #ddcab8; box-shadow: 0 1px 2px rgba(60, 35, 20, .05), 0 10px 28px rgba(60, 35, 20, .07); }
.faq-contact h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.25; }

/* Mobil: Überschrift und Kontakt-Box zentriert (wie überall), Fragen und Antworten linksbündig (Lesbarkeit) */
@media (max-width: 768px) {
  .faq-page main.page { padding: 26px 0 40px; }
  .faq-page h1 { margin-bottom: 18px; }
  .faq-box { padding: 2px 18px; border-radius: 14px; text-align: left; }
  .faq-q { font-size: 16px; }
  .faq-q button { padding: 17px 0; gap: 14px; }
  .faq-a p { font-size: 15px; line-height: 1.6; padding-bottom: 18px; }
  .faq-ico { width: 28px; height: 28px; }
  .faq-page .faq-contact { margin-top: 18px; padding: 22px 18px; }
  .faq-contact h2 { font-size: 22px; }
  .faq-contact .btn { width: 100%; }
}