/* =========================================================
   FAQ-Seite. Lädt nach rahmen.css, startseite.css und leistung.css. Präfix fq-.
   Große Fenster: Antwort als weiße Karte auf dem Foto.
   Kleine oder niedrige Fenster: jedes Thema mit eigenem Foto, Antwort als Blase unter der Frage, nichts klebt.
   Die Grenze steht in em, damit sie mitgeht, wenn jemand die Schrift im Browser größer stellt.
   Schmale Fenster brauchen mehr Höhe, weil die Karte dort höher wird. Muss zu gross in faq.js passen.
   ========================================================= */

/* Dunkler Kopf ohne Foto, die helle Fläche legt sich mit runden Ecken darüber */
.fx .fq-hero { display: block; min-height: 0; background-color: var(--teal-deep); background-image: radial-gradient(60% 90% at 78% 20%, rgba(14, 138, 128, .3), transparent 72%); }
.fq-hero__in { position: relative; z-index: 1; padding-block: 6rem calc(2rem + var(--radius-card)); }
.fq-hero .fx-hero__title { max-width: 42rem; margin: .9rem 0 1rem; font-size: clamp(2rem, 8vw, 4rem); }
.fq-hero .fx-hero__sub { max-width: 34rem; margin-bottom: 0; color: var(--cream-85); }
.fq-hero .fx-crumb__item { color: var(--teal-accent-soft); }
.fq-hero .fx-crumb__item + .fx-crumb__item::before { color: var(--cream-70); }
.fq-hero .fx-crumb__a { color: var(--cream); text-decoration-color: var(--cream-70); }
.fq-flaeche { position: relative; z-index: 3; margin-top: calc(-1 * var(--radius-card)); padding-block: clamp(3rem, 6vw, 5rem) clamp(4.5rem, 9vw, 7rem); background: var(--bg) var(--licht) no-repeat; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.fq-themen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.fq-thema { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1.1rem; border: 1px solid var(--cream-70); border-radius: var(--radius-btn); color: var(--cream); font-weight: 600; font-size: 1rem; transition: background .4s var(--ease), color .4s var(--ease); }
.fq-thema:hover { background: var(--cream); color: var(--teal-deep); }

.fq-bereich { --oben: 5.25rem; }
.fq-liste { max-width: 46rem; }

/* Hinweis und Schalter nur mit JS, ohne JS stehen alle Antworten schon da */
.fq-hilfe, .fq-nur-gross, .fq-nur-klein { display: none; }
.fx-js .fq-nur-klein { display: inline; }
.fx-js .fq-hilfe { display: block; margin-bottom: 1rem; }
.fq-alle { min-height: 44px; padding: .25rem 0; font: inherit; font-size: 1.02rem; font-weight: 600; color: var(--teal-primary); background: none; border: 0; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; transition: color .4s var(--ease); }
.fq-alle:hover { color: var(--teal-mid); }

/* Thema */
.fq-teil { padding-bottom: 3rem; scroll-margin-top: 6rem; }
.fq-teil:last-child { padding-bottom: 0; }
.fq-bild { margin-bottom: 1.25rem; }
.fq-bild .fx-frame__in { aspect-ratio: 16 / 9; max-height: 40svh; }
.fq-bild img { object-position: 50% 42%; }
#vertrauen .fq-bild img { object-position: 50% 20%; }
.fq-h { margin-top: .9rem; font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; color: var(--teal-deep); }
.fq-ki { margin-top: .4rem; font-size: 1rem; }
.fq-fragen { margin-top: 1rem; }
.fq-punkt { border-top: 1px solid var(--line); }
.fq-punkt:last-child { border-bottom: 1px solid var(--line); }
.fq-kopf { font: inherit; }

/* Frage: sieht aus wie ein Knopf, auch ohne Maus darüber */
.fq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 4rem; padding: .7rem .6rem .7rem 1rem; text-align: left;
  font-family: var(--font-heading); font-size: 1.18rem; font-weight: 600; line-height: 1.3; color: var(--teal-deep); background: none; border: 0; border-radius: var(--radius-card); cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.fq-pfeil { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--teal-primary); background: var(--teal-tint); border-radius: 50%; transition: background .4s var(--ease), color .4s var(--ease), transform .6s var(--ease); }
.fq-q:hover { background: var(--teal-tint); }
.fq-q:hover .fq-pfeil { background: var(--white); }
.fq-punkt.is-offen .fq-q { color: var(--cream); background: var(--teal-deep); }
.fq-punkt.is-offen .fq-pfeil { color: var(--teal-accent); background: var(--line-dark); transform: rotate(90deg); }

/* Antwort als Blase, die Ecke greift die Logo-Kerbe auf */
.fq-a { position: relative; margin: .5rem 0 1rem; padding: 1.1rem 1.25rem 1.2rem; background: var(--white); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--radius-mark); box-shadow: var(--shadow-soft); }
.fq-a p { font-size: 1.2rem; font-weight: 500; line-height: 1.55; color: var(--teal-deep); transition: opacity .5s var(--ease); }
.fx-js .fq-a { display: none; }
.fx-js .fq-punkt.is-offen .fq-a { display: block; animation: fq-rein .5s var(--ease) both; }
@keyframes fq-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Drei Marken wie beim Schreiben. Die Höhe steht schon, deshalb springt nichts. */
.fq-marken-tippen { position: absolute; display: none; gap: .4rem; }
.fq-a .fq-marken-tippen { left: 1.25rem; top: 1.65rem; }
.fq-marken-tippen i { width: 10px; height: 10px; background: var(--teal-primary); border-radius: 0 0 var(--radius-mark) 0; animation: fq-tippen .9s var(--ease) infinite; }
.fq-marken-tippen i:nth-child(2) { animation-delay: .12s; }
.fq-marken-tippen i:nth-child(3) { animation-delay: .24s; }
.fq-punkt.schreibt .fq-marken-tippen, .fq-karte.schreibt .fq-marken-tippen { display: flex; }
.fq-punkt.schreibt .fq-a p, .fq-karte.schreibt .fq-kantwort { opacity: 0; transition: none; }
@keyframes fq-tippen { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Alle Antworten untereinander: Die Fragen werden zu ruhigen Überschriften */
.fq-bereich--alle .fq-punkt.is-offen .fq-q { color: var(--teal-deep); background: none; cursor: default; pointer-events: none; }
.fq-bereich--alle .fq-pfeil { display: none; }

/* Bild-Bühne */
.fq-buehne, .fq-karte { display: none; }
.fq-buehne { position: sticky; top: var(--oben); z-index: 2; height: var(--h); }
.fq-buehne .fx-frame__in { height: 100%; }
.fq-foto { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transform: scale(1.06); object-position: 50% 42%; transition: clip-path 1.1s var(--ease), transform 1.8s var(--ease); }
.fq-foto--uebergabe { object-position: 74% 50%; }
.fq-foto.is-aktiv { z-index: 1; clip-path: inset(0); transform: none; }
.fq-foto.war-aktiv { clip-path: inset(0); transform: none; transition: none; }
.fq-marken { position: absolute; left: 1rem; top: 1rem; z-index: 2; display: flex; gap: .45rem; padding: .5rem .6rem; border-radius: var(--radius-btn); background: rgba(10, 46, 42, .62); }
.fq-marken span { width: 8px; height: 8px; border-radius: 0 0 var(--radius-mark) 0; background: var(--cream-70); transition: background .6s var(--ease), transform .6s var(--ease); }
.fq-marken span.is-aktiv { background: var(--teal-accent); transform: scale(1.25); }

@media (min-width: 56.25em) and (min-height: 38em), (min-width: 68em) and (min-height: 35em) {
  .fq-hero__in { padding-block: 7rem calc(3.5rem + var(--radius-card)); }
  .fq-hero .fx-hero__title { font-size: clamp(2.2rem, 6.4vw, 4rem); }
  .fq-bereich { --h: min(calc(100svh - 10rem), 40rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 4.5vw, 4rem); align-items: start; }
  .fq-bild { display: none; }
  .fx-js .fq-nur-gross { display: inline; }
  .fx-js .fq-nur-klein { display: none; }
  .fx-js .fq-hilfe { margin-bottom: 1.5rem; }
  .fq-buehne { display: block; top: 7.5rem; }
  .fq-teil { padding-bottom: 3.5rem; scroll-margin-top: 7.5rem; }
  .fq-punkt.is-offen .fq-pfeil { transform: none; }
  .fx-js .fq-punkt.is-offen .fq-a { display: none; }
  .fx-js .fq-bereich--alle .fq-punkt.is-offen .fq-a { display: block; }

  /* Die Karte ist so hoch wie die längste Antwort und springt beim Wechsel nicht */
  .fx-js .fq-karte {
    position: absolute; left: -1.75rem; bottom: 1.5rem; z-index: 3; display: block; width: min(38rem, calc(100% - 2.5rem)); padding: 1.5rem 1.9rem 1.1rem;
    background: var(--white); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--radius-mark); box-shadow: var(--shadow-lift);
  }
  .fx-js .fq-bereich--alle .fq-karte { display: none; }
  .fq-stapel { display: grid; }
  .fq-stapel > * { grid-area: 1 / 1; min-width: 0; }
  .fq-mass { visibility: hidden; }
  .fq-kfrage { font-size: 1.06rem; font-weight: 700; line-height: 1.35; color: var(--teal-primary); }
  .fq-text { position: relative; }
  .fq-kantwort { margin-top: .6rem; font-size: clamp(1.3rem, 1.05rem + .5vw, 1.5rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.005em; color: var(--teal-deep); transition: opacity .5s var(--ease); }
  .fq-karte .fq-marken-tippen { left: 0; top: 1.5rem; }
  .fq-ruf { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; margin-top: .9rem; padding-top: .35rem; border-top: 1px solid var(--line); font-size: 1.02rem; }
  .fq-ruf a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--teal-primary); text-decoration: underline; text-underline-offset: .25em; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-js .fq-punkt.is-offen .fq-a { animation: none; }
  .fq-marken-tippen i { animation: none; }
  .fq-foto, .fq-foto.is-aktiv { clip-path: none; transform: none; transition: none; opacity: 0; }
  .fq-foto.is-aktiv { opacity: 1; }
}
@media print {
  .fx-js .fq-a { display: block; box-shadow: none; }
  .fq-buehne, .fq-bild, .fq-hilfe, .fq-pfeil { display: none; }
}