/* Häufige Fragen und Abschnitte „Titel links, Text rechts“ (Website Oha Vogel).
   Seit 19.10.2026 eigene Datei, weil auch die Startseite Fragen hat. Aufklappen: js/fragen.js. */

/* ---------- Titel links, Text rechts ---------- */
.us-zwei { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.us-zwei > :first-child { position: sticky; top: calc(var(--kopf-h) + 24px); }
.us-h2 { font: 700 clamp(34px, 4.4vw, 78px)/.95 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.us-h2 em { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -.03em; font-variation-settings: "opsz" 144; }

/* ---------- Häufige Fragen ---------- */
.us-faq { padding: clamp(80px, 14vh, 160px) 0; }
.us-frage { border-top: 1px solid var(--blass); }
.us-frage:last-child { border-bottom: 1px solid var(--blass); }
.us-frage-titel { font: 500 clamp(19px, 1.6vw, 24px)/1.3 var(--text); }
.us-frage-titel button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 1fr 36px; gap: 20px; align-items: center; padding: 24px 0;
}
.us-frage-titel button:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
.us-frage-titel i { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--blass); position: relative; transition: background .3s, border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.us-frage-titel i::before, .us-frage-titel i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--tinte); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.us-frage-titel i::after { transform: rotate(90deg); }
.us-frage-titel button:hover i { border-color: var(--pink); }
.us-frage.offen .us-frage-titel i { background: var(--pink); border-color: var(--pink); transform: rotate(180deg); }
.us-frage.offen .us-frage-titel i::before, .us-frage.offen .us-frage-titel i::after { background: var(--weiss); }
.us-frage.offen .us-frage-titel i::after { transform: rotate(0); }
.us-antwort { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.2,.8,.2,1); }
.us-antwort > * { overflow: hidden; }
.us-antwort p { padding: 0 56px 28px 0; font-size: 18px; line-height: 1.6; color: var(--tinte-2); max-width: 44em; }
/* Zugeklappt nur, wenn js/fragen.js läuft: ohne JS und im Editor steht alles offen */
.faq-an .us-frage:not(.offen) .us-antwort { grid-template-rows: 0fr; }

@media (max-width: 900px) {
  /* minmax(0, …): Eine Spalte darf nie breiter werden als der Bildschirm */
  .us-zwei { grid-template-columns: minmax(0, 1fr); }
  .us-zwei > :first-child { position: static; top: auto; }
  .us-antwort p { padding-right: 0; }
}