#faq { --fq-nr: 26px; --fq-plus: 36px; --fq-luft: 14px; --fq-linie: var(--line-2); }
@media (min-width: 768px) { #faq { --fq-nr: 34px; --fq-plus: 40px; --fq-luft: 18px; } }

.m-faq-raster { display: grid; grid-template-columns: minmax(0, 1fr); }
.m-faq-kopf .titel .serif { letter-spacing: -.03em; }

.m-faq-liste { border-top: 1px solid var(--fq-linie); }
.m-faq-frage { border-bottom: 1px solid var(--fq-linie); }

.m-faq-frage > summary {
  display: grid; grid-template-columns: var(--fq-nr) minmax(0, 1fr) var(--fq-plus); column-gap: var(--fq-luft); align-items: center;
  min-height: 76px; padding-block: 20px; list-style: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.m-faq-frage > summary::-webkit-details-marker { display: none; }
.m-faq-frage > summary::marker { content: ""; }
.m-faq-frage > summary:focus-visible { outline-offset: 2px; border-radius: var(--r-klein); }

.m-faq-nr {
  align-self: first baseline; font-size: 13px; line-height: 1; color: var(--muted);
  transition: color .3s var(--sanft);
}
.m-faq-q {
  align-self: first baseline;
  font-size: clamp(19px, 1.1vw + 15px, 24px); line-height: 1.25; letter-spacing: -.02em; font-weight: 600; color: var(--ink);
}

.m-faq-plus {
  position: relative; justify-self: end; width: var(--fq-plus); height: var(--fq-plus); border-radius: 50%;
  background: rgba(0, 0, 0, .06); transition: background-color .3s var(--sanft), transform .12s ease-out;
}
.m-faq-plus::before, .m-faq-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px;
  background: var(--ink); transition: transform .5s var(--feder), background-color .3s var(--sanft);
}
.m-faq-plus::after { transform: rotate(90deg); }

@media (hover: hover) and (pointer: fine) {
  .m-faq-frage > summary:hover .m-faq-plus { background: rgba(0, 0, 0, .1); }
}
.m-faq-frage > summary:active .m-faq-plus { transform: scale(.88); transition-duration: .08s; }

:is(.m-faq:not(.m-faq--js) .m-faq-frage[open], .m-faq--js .m-faq-frage.ist-auf) .m-faq-nr { color: var(--orange-text); }
:is(.m-faq:not(.m-faq--js) .m-faq-frage[open], .m-faq--js .m-faq-frage.ist-auf) .m-faq-plus { background: var(--orange); }
:is(.m-faq:not(.m-faq--js) .m-faq-frage[open], .m-faq--js .m-faq-frage.ist-auf) .m-faq-plus::before,
:is(.m-faq:not(.m-faq--js) .m-faq-frage[open], .m-faq--js .m-faq-frage.ist-auf) .m-faq-plus::after { background: #fff; transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .m-faq--js .m-faq-frage.ist-auf > summary:hover .m-faq-plus { background: var(--orange-hell); }
}

.m-faq-antwort { overflow: hidden; }
.m-faq--js .m-faq-frage.ist-zuklappend::details-content { display: block; content-visibility: visible; }
.m-faq-innen { display: flow-root; padding: 0 0 28px calc(var(--fq-nr) + var(--fq-luft)); }
.m-faq-text { font-size: 17px; line-height: 1.55; letter-spacing: -.005em; color: var(--ink-2); max-width: 62ch; }
.m-faq-weiter { display: flex; width: fit-content; min-height: 44px; margin-top: 6px; font-size: 17px; }
@media (min-width: 768px) {
  .m-faq-innen { padding-right: calc(var(--fq-plus) + var(--fq-luft)); padding-bottom: 32px; }
}

.m-faq-kontakt {
  margin-top: clamp(40px, 9vw, 56px); padding: 26px 24px 24px; border-radius: var(--r-gross);
  background: var(--card); box-shadow: var(--schatten-1);
}
.m-faq-kontakt-titel { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.m-faq-kontakt .klein { font-size: 15px; max-width: 42ch; }
.m-faq-kontakt-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.m-faq-kontakt .knopf { min-height: 44px; font-feature-settings: "tnum" 1; }

@media (min-width: 1024px) {
  .m-faq-raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(56px, 6vw, 104px);
    grid-template-areas: "kopf liste" "kontakt liste";
  }
  .m-faq-kopf { grid-area: kopf; margin-bottom: 0; }
  .m-faq-liste { grid-area: liste; align-self: start; margin-top: 8px; }
  .m-faq-kontakt { grid-area: kontakt; align-self: start; margin-top: 44px; padding: 28px; }
  .m-faq-frage > summary { min-height: 88px; padding-block: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-faq-plus, .m-faq-plus::before, .m-faq-plus::after { transition: background-color .2s linear; }
  .m-faq-frage > summary:active .m-faq-plus { transform: none; }
}