.fragen { margin: 11rem 0; position: relative; }
@media screen and (width >= 1025px) { .fragen { margin: 14rem 0; } }
@media screen and (width >= 1729px) { .fragen { margin: 17rem 0; } }

.fragen .zkopf { padding-bottom: 8rem; }
@media screen and (width >= 1441px) { .fragen .zkopf { padding-bottom: 9rem; } }

.vergleich { flex-direction: column; gap: 2rem; display: flex; }
@media screen and (width >= 1025px) { .vergleich { flex-direction: row; align-items: stretch; } }

.vergleichskarte {
  background: var(--farbe-flaeche);
  border-radius: .8rem;
  padding: 4rem 3rem;
  flex: 1;
  min-width: 0;
  position: relative;
}

.eignungsbild {
  width: 9rem;
  height: auto;
  margin-bottom: 1.6rem;
  display: block;
}

.portraetflaeche {
  aspect-ratio: 4 / 5;
  border-radius: .6rem;
  margin-bottom: 2.4rem;
  overflow: hidden;
}

.teamkarte .vergleichspunkt__text { margin-top: 0; }

.vergleichskarte--eb {
  background: var(--farbe-gelb-blass);
  box-shadow: inset 0 0 0 .2rem var(--farbe-gelb-linie);
}
.vergleichskarte--eb .vergleichskarte__titel {
  background-color: var(--farbe-gelb);
  box-shadow: .1rem 0 var(--farbe-gelb), -.1rem 0 var(--farbe-gelb);
}

.vergleichskarte__figur {
  max-width: none;
  width: 9rem;
  height: auto;
  position: absolute;
  top: -4.9rem;
  right: 2rem;
  pointer-events: none;
}
@media screen and (width >= 1025px) {
  .vergleichskarte__figur { width: 11rem; top: -5.9rem; right: 3rem; }
}
@media screen and (width >= 1441px) {
  .vergleichskarte__figur { width: 13rem; top: -6.9rem; right: 4rem; }
}
@media screen and (width >= 1025px) { .vergleichskarte { padding: 6rem 5rem; } }
@media screen and (width >= 1441px) { .vergleichskarte { padding: 7rem 6rem; } }

.vergleichskarte__titel {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  letter-spacing: -.02rem;
  background-color: var(--farbe-weiss);
  padding: .3rem .5rem;
  font: 600 2rem/100% Inter, sans-serif;
  display: inline;
  box-shadow: var(--schatten-titelflaeche);
}
.vergleichskarte__hut {
  color: var(--farbe-text-zweit);
  letter-spacing: -.032rem;
  margin-top: 1.6rem;
  font: 400 1.6rem/150% Inter, sans-serif;
}

.vergleichsliste { flex-direction: column; gap: 2.8rem; margin-top: 4rem; display: flex; }
@media screen and (width >= 1025px) { .vergleichsliste { gap: 3.2rem; margin-top: 5rem; } }

.vergleichspunkt { flex-direction: column; gap: .6rem; display: flex; }
.vergleichspunkt__titel {
  letter-spacing: -.02rem;
  align-items: flex-start;
  gap: 1.2rem;
  font: 600 1.8rem/130% Inter, sans-serif;
  display: flex;
}
.vergleichspunkt__zeichen { width: 2.2rem; height: 2.2rem; flex-shrink: 0; margin-top: -.1rem; color: var(--farbe-tinte); }
.vergleichspunkt__zeichen svg { width: 100%; height: 100%; display: block; }

.filterablage { position: absolute; width: 0; height: 0; overflow: hidden; }
.vergleichspunkt__zeichen svg { filter: url(#handstrich); }
.vergleichskarte--ueblich .vergleichspunkt__zeichen { color: var(--farbe-text-stumm); }

.vergleichskarte--eb .vergleichspunkt__zeichen {
  box-sizing: content-box;
  background: var(--farbe-gelb);
  border-radius: 50%;
  width: 2rem; height: 2rem;
  margin-top: -.6rem;
  padding: .8rem;
  color: var(--farbe-tinte);
}
.vergleichskarte--eb .vergleichspunkt__text { padding-left: 4.8rem; }

.vergleichspunkt__text {
  letter-spacing: -.032rem;
  color: var(--farbe-text-zweit);
  text-wrap: pretty;
  padding-left: 3.2rem;
  font: 400 1.6rem/150% Inter, sans-serif;
}

.fragenliste { flex-direction: column; display: flex; }

.frage {
  border-radius: .5rem;
  background-color: transparent;
  transition: background-color var(--dauer-morph) var(--kurve-morph),
              border-radius    var(--dauer-morph) var(--kurve-morph);
}
.frage::after {
  content: "";
  display: block;
  height: 1px;
  margin: 0 2rem;
  background: var(--farbe-linie);
  transition: opacity var(--dauer-morph) var(--kurve-morph);
}
.frage:last-child::after { display: none; }
.frage.ist-offen::after { opacity: 0; }

.frage__kopf { margin: 0; }

.frage__knopf {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  padding: 3rem 2rem;
  font: inherit;
  color: inherit;
  display: flex;
}
@media screen and (width >= 1025px) { .frage__knopf { padding: 3.4rem 3rem; } }
.frage__knopf:focus-visible { outline: 2px solid var(--farbe-violett); outline-offset: -2px; border-radius: .5rem; }

.frage__frage {
  letter-spacing: -.02rem;
  font: 600 2rem/130% Inter, sans-serif;
}
@media screen and (width >= 1441px) { .frage__frage { font-size: 2.2rem; } }

.frage__zeichen { width: 2rem; height: 2rem; flex-shrink: 0; margin-top: .4rem; position: relative; }
.frage__zeichen::before,
.frage__zeichen::after {
  content: "";
  background: var(--farbe-tinte);
  width: 100%;
  height: 2px;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  left: 0;
  transition: transform var(--dauer-morph) var(--kurve-morph);
}
.frage__zeichen::after { transform: rotate(90deg); }
.frage.ist-offen .frage__zeichen::after { transform: rotate(0); }

.frage__antwort { padding: 0 2rem 3rem; }
@media screen and (width >= 1025px) { .frage__antwort { padding: 0 3rem 3.4rem; } }
.frage__antwort p {
  letter-spacing: -.032rem;
  color: var(--farbe-text-zweit);
  text-wrap: pretty;
  max-width: 68rem;
  font: 400 1.7rem/155% Inter, sans-serif;
}

.fragenliste.ist-bereit .frage__huelle {
  height: 0;
  overflow: hidden;
  transition: height var(--dauer-morph) var(--kurve-morph);
}
.fragenliste.ist-bereit .frage.ist-offen .frage__huelle { height: var(--antwort-hoehe, auto); }

@media (hover: hover) {
  .fragenliste.ist-bereit .frage:hover { background-color: var(--farbe-flaeche); }
}
.fragenliste.ist-bereit .frage.ist-offen {
  background-color: var(--farbe-flaeche);
  border-radius: .8rem;
}
@media screen and (width >= 1025px) {
  .fragenliste.ist-bereit .frage.ist-offen { border-radius: .8rem; }
}

.vergleichsbild {
  margin: 0;
  border-radius: .8rem;
  aspect-ratio: 4 / 3;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.vergleichsbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  position: absolute;
  inset: 0;
}
@media screen and (width >= 1025px) {
  .vergleichsbild { flex: 0 0 34%; aspect-ratio: auto; }
}

.gespraech__knopf { margin-top: 4rem; }
.gespraech__kacheln { margin-top: 2rem; }
@media screen and (width <= 1024px) { .gespraech__knopf .knopf { display: block; width: 100%; } }
@media screen and (width >= 1025px) {
  .gespraech__knopf { margin-top: 5rem; }
  .gespraech__knopf .knopf { display: inline-block; width: auto; }
  .gespraech__knopf .knopf .knopf__innen { padding-left: 4rem; padding-right: 4rem; }
}

.fragen-mitbild { flex-direction: column; gap: 4rem; display: flex; }
.fragen-mitbild .fragenliste { flex: 1; min-width: 0; }
.fragenkarte {
  background: var(--farbe-flaeche);
  border-radius: .8rem;
  padding: 1.6rem 1.6rem 3rem;
  min-width: 0;
}
.fragenkarte__bild {
  margin: 0 0 2.4rem;
  border-radius: .6rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.fragenkarte__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.fragenkarte .vergleichskarte__titel { margin-left: .5rem; }
.fragenkarte .vergleichskarte__hut { margin: 1.6rem .5rem 2.4rem; }
.fragenkarte .knopf { margin-left: .5rem; }
@media screen and (width >= 1025px) {
  .fragen-mitbild { flex-direction: row; align-items: flex-start; gap: 6rem; }
  .fragenkarte { flex: 0 0 30%; position: sticky; top: 14rem; }
  .fragenkarte__bild { aspect-ratio: 4 / 5; }
}