.haupt .held.abschnitt { margin-bottom: 0; padding-bottom: 0; }
.held__kopfbereich { padding-bottom: 2.4rem; }
@media screen and (width >= 1025px) {
  .haupt .held.abschnitt { padding-top: 15rem; }
  .held__kopfbereich { padding-bottom: 3.6rem; }
  .held__innen h1.held__titel--lang { font-size: 6.4rem !important; letter-spacing: -.26rem; }
  .held__versprechen { margin-top: 1.6rem; font-size: 2.8rem; letter-spacing: -.1rem; }
}
@media screen and (width >= 1441px) {
  .haupt .held.abschnitt { padding-top: 16rem; }
  .held__innen h1.held__titel--lang { font-size: 8rem !important; letter-spacing: -.32rem; }
  .held__versprechen { font-size: 3.2rem; max-width: 70rem; }
}
@media screen and (width >= 1729px) {
  .held__innen h1.held__titel--lang { font-size: 9.6rem !important; letter-spacing: -.38rem; }
  .held__versprechen { font-size: 3.6rem; }
}
@media screen and (width <= 1024px) {
  .haupt .held.abschnitt { padding-top: 9rem; }
  .dreidinge .zkopf__titel br, .stimmen .zkopf__titel br { display: none; }
  .dreidinge .zkopf__titel, .stimmen .zkopf__titel { text-wrap: balance; }
  .held__innen h1.held__titel--lang { font-size: 3.8rem !important; max-width: 36rem; letter-spacing: -.14rem; }
  .held .zkopf .behaelter { row-gap: 2rem !important; }
  .held__versprechen { margin-top: 1rem; font-size: 1.9rem; }
  .held .pille { white-space: normal; text-align: center; }
}
@media screen and (width >= 641px) and (width <= 1024px) {
  .held__innen h1.held__titel--lang { font-size: 5.2rem !important; max-width: 60rem; }
  .held__versprechen { font-size: 2.4rem; max-width: 44rem; }
}

.grossmedium__huelle--frei {
  aspect-ratio: auto;
  background: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}
@media screen and (width >= 1025px) { .grossmedium__huelle--frei { margin-top: 0; } }
.grossmedium__huelle--frei .grossmedium {
  transform: none;
  box-shadow: none;
  background: none;
  border-radius: 0;
  overflow: hidden;
}

.heldvideo .videoflaeche { position: relative; }
.tonknopf {
  position: absolute;
  right: 1.2rem;
  top: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.8rem;
  border: 0;
  border-radius: .8rem;
  background: var(--farbe-schwarz);
  color: var(--farbe-weiss);
  font: 600 1.6rem/1.2 Inter, sans-serif;
  letter-spacing: -.02rem;
  cursor: pointer;
  box-shadow: var(--schatten-knopf);
}
.tonknopf[hidden] { display: none; }
.tonknopf svg { width: 2rem; height: 2rem; flex: none; }
.tonknopf:focus-visible { outline: .3rem solid var(--farbe-violett-kraeftig); outline-offset: .3rem; }
@media screen and (width >= 1025px) {
  .tonknopf { right: 2.4rem; top: 2.4rem; padding: 1.2rem 2.2rem; font-size: 1.8rem; }
}

.heldvideo .videoflaeche.ist-gestartet video { cursor: pointer; }
.heldvideo .videoflaeche:fullscreen { aspect-ratio: auto; background-color: var(--farbe-schwarz); }
.heldvideo .videoflaeche:fullscreen video { object-fit: contain; background-color: var(--farbe-schwarz); }
.spieler {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 4.8rem 1rem .8rem;
  background: linear-gradient(to top, rgb(0 0 0 / .62), rgb(0 0 0 / .28) 55%, rgb(0 0 0 / 0));
  color: var(--farbe-weiss);
  font: 500 1.3rem/1 Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  transition: opacity .25s ease, transform .25s ease;
}
.spieler[hidden] { display: none; }
.videoflaeche.ist-ruhig .spieler { opacity: 0; transform: translateY(.6rem); pointer-events: none; }
.videoflaeche.ist-ruhig { cursor: none; }
.spieler__knopf {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .15s ease;
}
.spieler__knopf:hover { background-color: rgb(255 255 255 / .16); }
.spieler__knopf svg { width: 2rem; height: 2rem; }
.spieler__knopf:focus-visible,
.spieler__leiste:focus-visible { outline: .2rem solid var(--farbe-violett-kraeftig); outline-offset: .2rem; }
.spieler__start,
.videoflaeche.ist-angehalten .spieler__pause,
.spieler__stumm,
.videoflaeche.ist-stumm .spieler__laut { display: none; }
.videoflaeche.ist-angehalten .spieler__start,
.videoflaeche.ist-stumm .spieler__stumm { display: block; }
.spieler__zeit { flex: none; padding: 0 .4rem; opacity: .92; }
.spieler__leiste {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 2.4rem;
  display: flex;
  align-items: center;
  margin: 0 .6rem;
  cursor: pointer;
  touch-action: none;
  border-radius: .4rem;
}
.spieler__spur {
  position: relative;
  width: 100%;
  height: .4rem;
  border-radius: .4rem;
  background-color: rgb(255 255 255 / .28);
  overflow: hidden;
  transition: height .15s ease;
}
.spieler__puffer,
.spieler__stand {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
}
.spieler__puffer { background-color: rgb(255 255 255 / .34); }
.spieler__stand { background-color: var(--farbe-violett-kraeftig); }
.spieler__griff {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin: -.7rem 0 0 -.7rem;
  border-radius: 50%;
  background-color: var(--farbe-weiss);
  box-shadow: 0 .1rem .4rem rgb(0 0 0 / .4);
  transform: scale(0);
  transition: transform .15s ease;
}
.spieler__leiste:hover .spieler__spur,
.spieler__leiste.ist-gezogen .spieler__spur { height: .6rem; }
.spieler__leiste:hover .spieler__griff,
.spieler__leiste:focus-visible .spieler__griff,
.spieler__leiste.ist-gezogen .spieler__griff { transform: scale(1); }
@media screen and (width >= 1025px) {
  .spieler { gap: .8rem; padding: 6.4rem 2rem 1.4rem; font-size: 1.5rem; }
  .spieler__knopf { width: 4.2rem; height: 4.2rem; }
  .spieler__knopf svg { width: 2.4rem; height: 2.4rem; }
}
@media screen and (width <= 480px) {
  .spieler { padding: 3.2rem .4rem .4rem; gap: 0; }
  .spieler__zeit[data-spieler-dauer] { display: none; }
}

@media screen and (width <= 400px) {
  .lauftext__satz { font-size: 2.8rem; overflow-wrap: break-word; hyphens: auto; }
  .haupt .knopf { max-width: 100%; }
  .haupt .knopf--mittel .knopf__innen,
  .haupt .knopf--gross .knopf__innen { padding-left: 2.4rem; padding-right: 2.4rem; white-space: normal; text-align: center; }
}

.frage__antwort p + p { margin-top: 1.2rem; }
.zkopf__text h3 + h3 { margin-top: 1.4rem; }
@media screen and (width <= 640px) {
  .seitenkopf__titel--fliessend br, .fallbeispiel .zkopf__titel br { display: none; }
  .seitenkopf__titel--fliessend, .fallbeispiel .zkopf__titel { text-wrap: balance; }
}

.terminformular { width: 100%; max-width: 76rem; margin: 4rem auto 0; }
@media screen and (width >= 1025px) { .terminformular { margin-top: 5.6rem; } }

.heldpunkte { margin: 5rem 0 0; }
@media screen and (width >= 1025px) { .heldpunkte { margin-top: 6rem; } }
.merkmale--vier { margin-top: 0; }
.merkmale--vier .merkmale__liste { gap: 3.2rem; }
.merkmale--vier .merkmal__titel { align-items: flex-start; font-size: 1.8rem; line-height: 125%; }
.merkmale--vier .merkmal__zeichen {
  width: 2.6rem;
  height: 2.6rem;
  padding: .4rem;
  border-radius: 50%;
  background: var(--farbe-violett-blass);
  color: var(--farbe-violett-link);
}
@media screen and (width >= 641px) and (width <= 1024px) {
  .merkmale--vier .merkmale__liste { flex-flow: row wrap; }
  .merkmale--vier .merkmal { width: calc(50% - 1.6rem); }
}
@media screen and (width >= 1025px) {
  .merkmale--vier { row-gap: 0 !important; }
  .merkmale--vier .merkmale__liste { grid-column: 1 / -1; flex-wrap: nowrap; gap: 3.2rem; }
  .merkmale--vier .merkmal { flex: 1 1 0; width: auto; min-width: 0; }
  .merkmale--vier .merkmal__text { max-width: none; }
}

.entlastung { margin: 12rem 0 4rem; }
@media screen and (width >= 1025px) { .entlastung { margin: 16rem 0 6rem; } }
.entlastung__karte {
  background: var(--farbe-flaeche);
  border-radius: .8rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (width >= 1025px) { .entlastung__karte { flex-direction: row; align-items: stretch; } }
.entlastung__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 4rem 2.4rem;
}
@media screen and (width >= 1025px) { .entlastung__text { padding: 7rem 5.6rem 7rem 7rem; } }
@media screen and (width >= 1441px) { .entlastung__text { padding: 8rem 7rem 8rem 8rem; } }
.entlastung__titel {
  letter-spacing: -.14rem;
  margin: 1rem 0 1.2rem;
  font: 800 3.4rem/100% Inter, sans-serif;
  text-wrap: balance;
}
@media screen and (width >= 1025px) { .entlastung__titel { letter-spacing: -.18rem; font-size: 4.2rem; } }
@media screen and (width >= 1441px) { .entlastung__titel { font-size: 5.6rem; } }
.entlastung__absatz {
  color: var(--farbe-text-zweit);
  letter-spacing: -.02rem;
  text-wrap: pretty;
  font: 400 1.6rem/155% Inter, sans-serif;
}
.entlastung__absatz strong { color: var(--farbe-tinte); font-weight: 600; }
.entlastung__knopf { margin-top: 1.6rem; max-width: 100%; }
@media screen and (width <= 640px) {
  .entlastung__text { padding: 3.2rem 2rem; }
  .entlastung__knopf, .entlastung__knopf .knopf { width: 100%; }
  .entlastung__knopf .knopf__innen { padding-left: 2rem; padding-right: 2rem; }
}
.entlastung__bild { position: relative; flex: 0 0 auto; width: 100%; margin: 0; aspect-ratio: 4 / 5; }
@media screen and (width >= 641px) and (width <= 1024px) { .entlastung__bild { aspect-ratio: 4 / 3; } }
@media screen and (width >= 1025px) { .entlastung__bild { width: 42%; aspect-ratio: auto; } }
@media screen and (width >= 1441px) { .entlastung__bild { width: 44%; } }
.entlastung__bild img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 0;
}

@media screen and (width >= 1025px) { .dreidinge .zkopf--gross .zkopf__titel.t2 { font-size: 5.4rem; letter-spacing: -.22rem; } }
@media screen and (width >= 1441px) { .dreidinge .zkopf--gross .zkopf__titel.t2 { font-size: 7.2rem; letter-spacing: -.3rem; } }
@media screen and (width >= 1729px) { .dreidinge .zkopf--gross .zkopf__titel.t2 { font-size: 8rem; letter-spacing: -.32rem; } }

.dreidinge__raster {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  margin-top: 4rem;
}
@media screen and (width >= 1025px) {
  .dreidinge__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 6rem; }
}
.dreidinge__karte {
  background: var(--farbe-flaeche);
  border-radius: .8rem;
  padding: 4rem 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.dreidinge__zeichen {
  width: 6.4rem;
  height: 6.4rem;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: var(--farbe-violett-blass);
  color: var(--farbe-violett-kraeftig);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dreidinge__zeichen svg { width: 3rem; height: 3rem; display: block; }
.dreidinge__name { letter-spacing: -.08rem; font: 700 2.4rem/115% Inter, sans-serif; }
.dreidinge__text {
  color: var(--farbe-text-zweit);
  text-wrap: pretty;
  font: 400 1.6rem/155% Inter, sans-serif;
}
.dreidinge__text + .dreidinge__text { color: var(--farbe-tinte); font-weight: 500; }
.dreidinge__knopf { display: flex; justify-content: center; margin-top: 5rem; }
@media screen and (width >= 1025px) { .dreidinge__raster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dreidinge__nummer { color: var(--farbe-violett-kraeftig); font: 800 2.6rem/1 Inter, sans-serif; }
.entlastung__bild--brief img { object-position: 50% 28%; }
.fallbeispiel__hinweis { color: var(--farbe-fliess); text-wrap: pretty; font: 400 1.6rem/155% Inter, sans-serif; }
.fallbeispiel > .zkopf { margin-bottom: 5rem; }
@media screen and (width >= 1025px) { .fallbeispiel > .zkopf { margin-bottom: 7rem; } }

.fallbeispiel { margin: 12rem 0 14rem; }
@media screen and (width >= 1025px) { .fallbeispiel { margin: 16rem 0 18rem; } }
.fallbeispiel__kopfzeile { display: flex; justify-content: center; margin-bottom: 4rem; }
@media screen and (width >= 1025px) { .fallbeispiel__kopfzeile { margin-bottom: 5.6rem; } }

.fallbeispiel__buehne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
@media screen and (width >= 1025px) {
  .fallbeispiel__buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5.6rem; align-items: stretch; }
}

.fallbeispiel__karte {
  position: relative;
  overflow: hidden;
  background: var(--farbe-tinte);
  aspect-ratio: 16 / 9;
}
@media screen and (width >= 1025px) { .ablauf__kopf .zkopf__titel { max-width: 80rem; } }
@media screen and (width >= 641px) and (width <= 1024px) { .fallbeispiel__karte { aspect-ratio: 4 / 3; } }
@media screen and (width >= 1025px) { .fallbeispiel__karte { aspect-ratio: auto; min-height: 48rem; } }
.fallbeispiel__film { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.fallbeispiel__etikett {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  z-index: 2;
  padding: .8rem 1.4rem;
  border-radius: .3rem;
  background: var(--farbe-tinte);
  color: var(--farbe-weiss);
  font: 700 1.4rem/1.2 Inter, sans-serif;
}
@media screen and (width >= 1025px) { .fallbeispiel__etikett { top: 2rem; left: 2rem; font-size: 1.6rem; } }
.fallbeispiel__ueberlagerung {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 8rem 2.4rem 2.4rem;
  background: linear-gradient(to top, var(--farbe-tinte) 0%, var(--farbe-klar) 100%);
  color: var(--farbe-weiss);
  pointer-events: none;
}
@media screen and (width >= 1025px) { .fallbeispiel__ueberlagerung { padding: 10rem 3.2rem 3rem; } }
.fallbeispiel__zitat { font: italic 400 1.5rem/150% Inter, sans-serif; opacity: .9; margin-bottom: 1.2rem; text-wrap: pretty; }
@media screen and (width >= 1025px) { .fallbeispiel__zitat { font-size: 1.6rem; } }
.fallbeispiel__name { font: 800 1.9rem/125% Inter, sans-serif; letter-spacing: -.04rem; }
@media screen and (width >= 1025px) { .fallbeispiel__name { font-size: 2.2rem; } }
.fallbeispiel__start {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 6rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.fallbeispiel__start[hidden] { display: none; }
.fallbeispiel__kreis {
  width: 7.2rem;
  height: 7.2rem;
  border: .4rem solid var(--farbe-weiss);
  border-radius: 50%;
  color: var(--farbe-weiss);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dauer-3) var(--kurve-weich);
}
.fallbeispiel__kreis svg { width: 3.2rem; height: 3.2rem; margin-left: .4rem; display: block; }
.fallbeispiel__start:hover .fallbeispiel__kreis { transform: scale(1.08); }
@media screen and (width >= 1025px) { .fallbeispiel__film { position: absolute; inset: 0; } }

.videofenster {
  width: min(100vw - 3.2rem, 120rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
.videofenster::backdrop { background: var(--farbe-schleier-video); }
.videofenster__film { display: block; width: 100%; height: auto; max-height: calc(100vh - 12rem); aspect-ratio: 16 / 9; background: var(--farbe-schwarz); }
.videofenster__zu {
  position: absolute;
  top: -5.6rem;
  right: 0;
  width: 4.4rem;
  height: 4.4rem;
  padding: 1rem;
  border: 0;
  border-radius: 50%;
  background: var(--farbe-weiss);
  color: var(--farbe-tinte);
  cursor: pointer;
}
.videofenster__zu svg { width: 100%; height: 100%; display: block; }

.reichweite__ziffer--endlos { line-height: .8; padding-bottom: .08em; }
@media screen and (width <= 640px) {
  .fallbeispiel__karte { aspect-ratio: auto; }
  .fallbeispiel__film { aspect-ratio: 16 / 9; height: auto; }
  .fallbeispiel__ueberlagerung { position: static; padding: 2rem 2rem 2.4rem; background: var(--farbe-tinte); }
  .fallbeispiel__start { inset: 0 0 auto 0; aspect-ratio: 16 / 9; padding: 0; }
  .fallbeispiel__kreis { width: 5.6rem; height: 5.6rem; }
  .fallbeispiel__etikett { font-size: 1.2rem; padding: .6rem 1rem; top: 1rem; left: 1rem; }
}

.fallbeispiel__stimme { display: flex; flex-direction: column; gap: 3.2rem; }
.fallbeispiel__punkte { display: flex; flex-direction: column; gap: 2rem; margin: 0; }
.fallbeispiel__punkt dt {
  display: inline-block;
  margin-bottom: .6rem;
  padding: .3rem .8rem;
  border-left: .3rem solid var(--farbe-violett-kraeftig);
  background: var(--farbe-violett-blass);
  color: var(--farbe-violett-kraeftig);
  letter-spacing: .06rem;
  text-transform: uppercase;
  font: 700 1.3rem/1.3 Inter, sans-serif;
}
.fallbeispiel__punkt dd {
  margin: 0;
  color: var(--farbe-fliess);
  text-wrap: pretty;
  font: 400 1.6rem/155% Inter, sans-serif;
}

.fallbeispiel__zahlen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.fallbeispiel__zahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: .4rem 1.2rem;
  text-align: center;
  border-left: 1px solid var(--farbe-linie);
}
.fallbeispiel__zahl:first-child { border-left: 0; }
.fallbeispiel__wert {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--farbe-violett-link);
  letter-spacing: -.1rem;
  font: 800 3rem/1 Inter, sans-serif;
}
@media screen and (width >= 1441px) { .fallbeispiel__wert { font-size: 3.4rem; } }
.fallbeispiel__wert svg { width: .8em; height: .8em; display: block; }
.fallbeispiel__erklaerung { color: var(--farbe-tinte); font: 700 1.4rem/1.3 Inter, sans-serif; }
@media screen and (width <= 480px) {
  .fallbeispiel__zahl { padding: .4rem .6rem; }
  .fallbeispiel__wert { font-size: 2.4rem; letter-spacing: -.06rem; }
}
.fallbeispiel__knopf { display: flex; justify-content: center; margin-top: 6rem; }

.stapelkarte--weiss { background: var(--farbe-weiss); box-shadow: var(--schatten-stapelkarte); border: 1px solid var(--farbe-linie); }
.stapelkarte--weiss .stapelkarte__kopf { flex-grow: 0; padding: 0 5rem 4.5rem; }
.stapelkarte--weiss .stapelkarte__titel { color: var(--farbe-weiss); background: var(--farbe-tinte); }
.stapelkarte--weiss .stapelkarte__text { color: var(--farbe-text-zweit); }
.stapelkarte__marke {
  width: fit-content;
  padding: .5rem .8rem;
  border-radius: .3rem;
  background: var(--farbe-violett-blass);
  color: var(--farbe-violett-kraeftig);
  letter-spacing: .08rem;
  text-transform: uppercase;
  font: 700 1.2rem/1 Inter, sans-serif;
}

.kompass {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 2rem 1.8rem;
  border-radius: .3rem;
  background: var(--farbe-tinte);
  color: var(--farbe-weiss);
}
.kompass__frage { font: 600 1.3rem/1.3 Inter, sans-serif; opacity: .7; margin-bottom: .4rem; }
.kompass__wahl {
  position: relative;
  padding: 1rem 1.2rem 1rem 3.6rem;
  border: 1px solid var(--farbe-linie-dunkel);
  border-radius: .3rem;
  font: 600 1.4rem/1.2 Inter, sans-serif;
}
.kompass__wahl::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 50%;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -.7rem;
  border: .2rem solid var(--farbe-text-stumm);
  border-radius: 50%;
}
.kompass__wahl--an { border-color: var(--farbe-violett); background: var(--farbe-violett-link); }
.kompass__wahl--an::before { border-color: var(--farbe-weiss); background: radial-gradient(var(--farbe-weiss) 0 35%, var(--farbe-klar) 40%); }
.kompass__fuss { font: 500 1.2rem/1.3 Inter, sans-serif; opacity: .6; margin-top: .4rem; }

.stimmen--einzeln .lauf__spur { justify-content: center; }
.stimmen--einzeln .lauf__greifer,
.stimmen--einzeln .lauf__greifer * { cursor: auto; }
.stimmenkarte .vmedium { background: var(--farbe-tinte); }
.stimmenkarte__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stimmenkarte__abspielen {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: var(--farbe-weiss);
  color: var(--farbe-tinte);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--schatten-vorne);
}
.stimmenkarte__abspielen svg { width: 2.8rem; height: 2.8rem; margin-left: .3rem; display: block; }
.stimmenkarte__zeichen img { object-fit: contain; }

.gespraechsblock__absaetze { display: flex; flex-direction: column; gap: 1.4rem; }
.gespraechsblock__absaetze p {
  color: var(--farbe-text-zweit);
  text-wrap: pretty;
  font: 400 1.6rem/155% Inter, sans-serif;
}
.gespraechsblock__bild { width: 100%; margin: 0; }
.gespraechsblock__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 0;
  box-shadow: var(--schatten-vorne);
}
@media screen and (width >= 1025px) {
  .kacheln__block.gespraechsblock { position: relative; align-items: center; gap: 56px; }
  .gespraechsblock .kacheln__text { flex: 1 1 0; min-width: 0; max-width: 620px; }
  .gespraechsblock .kacheln__mediumhuelle { flex: 0 0 340px; min-width: 0; }
  .gespraechsblock__bild { width: 340px; }
  .gespraechsblock__bild img { border-radius: 16px; }
}

.fotomedium { position: relative; width: 100%; aspect-ratio: 1.25; overflow: hidden; background: var(--farbe-flaeche); }
@media screen and (width <= 640px) {
  .ablauf__liste .stapelkarte .stapelkarte__kopf { padding-left: 2.4rem; padding-right: 2.4rem; }
  .ablauf__liste .stapelkarte .fotomedium { aspect-ratio: 1; }
}
.fotomedium--hoch { aspect-ratio: 3 / 4; }
.fotomedium img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.problemstapel { padding-bottom: 8px; }
.problemstapel__liste { list-style: none; margin: 0; padding: 0; }
.problemstapel__karte {
  position: sticky;
  top: calc(84px + var(--n) * 14px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 20px;
  padding: 28px 24px;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: 18px;
  box-shadow: 0 18px 40px -24px var(--farbe-schatten-weich);
}
.problemstapel__nummer { font: 800 15px/1 Inter, sans-serif; color: var(--farbe-violett-kraeftig); padding-top: 6px; }
.problemstapel__inhalt { min-width: 0; }
.problemstapel__titel { font: 800 20px/1.25 Inter, sans-serif; color: var(--farbe-tinte); margin: 0 0 8px; }
.problemstapel__text { font: 400 16px/1.6 Inter, sans-serif; color: var(--farbe-text-zweit); margin: 0; }
@media screen and (width >= 1025px) {
  .problemstapel__liste { max-width: none; margin: 0; }
  .problemstapel__karte { top: calc(120px + var(--n) * 18px); padding: 40px 48px; gap: 28px; min-height: 180px; margin-bottom: 28px; }
  .problemstapel__nummer { font-size: 18px; }
  .problemstapel__titel { font-size: 28px; letter-spacing: -.02em; }
  .problemstapel__text { font-size: 18px; }
}

#probleme .ablauf__liste { list-style: none; margin: 0; padding: 0; }
.schrittstapel .ablauf__liste { list-style: none; margin: 4rem 0 0; padding: 0; }
.haupt .zkopf.zkopf--mittig { text-align: center; }
.haupt .zkopf--mittig .zkopf__pille { justify-content: center; }
.haupt .zkopf--mittig .zkopf__titel { margin-left: auto; margin-right: auto; text-wrap: balance; }
.haupt .zkopf--mittig .zkopf__text { margin: 0 auto; text-wrap: balance; }
.dreidinge.schrittstapel .thesisheld__beleg { margin-left: auto; margin-right: auto; text-align: center; }
.haupt .schrittstapel .dreidinge__knopf { justify-content: center; }
.schrittstapel .stapelkarte { aspect-ratio: auto; min-height: 40rem; max-height: none; }
.schrittstapel .stapelkarte__zahl { background: none; color: var(--farbe-violett-kraeftig); -webkit-text-fill-color: currentColor; font-size: 11rem; line-height: 1; letter-spacing: -.4rem; }
.schrittstapel .stapelkarte--drei { background: var(--farbe-tinte); }
@media screen and (width >= 1025px) {
  .schrittstapel .stapelkarte { max-width: 64rem; min-height: 440px; }
  .schrittstapel .stapelkarte__zahl { font-size: 15rem; }
}
@media screen and (width >= 1025px) {
  .schrittstapel .stapelkarte__titel { font-size: 20px; line-height: 1.2; }
  .schrittstapel .stapelkarte__text { font-size: 16px; line-height: 1.55; }
}
@media screen and (width >= 1025px) {
  #probleme .stapelkarte { aspect-ratio: auto; min-height: 580px; }
  #probleme .stapelkarte__titel { font-size: 20px; line-height: 1.2; }
  #probleme .stapelkarte__text { font-size: 15px; line-height: 1.55; }
  #probleme .stapelkarte__marke { font-size: 11px; }
}
.reichweite__zahl--klein { font-size: 11rem; letter-spacing: -.04em; }
@media screen and (width >= 1025px) { .reichweite__zahl--klein { font-size: 13rem; } }

.haupt > .skalierung--dunkel { background: var(--farbe-tinte); color: var(--farbe-weiss); padding: 88px 0; }
@media screen and (width >= 1025px) { .haupt > .skalierung--dunkel { padding: 128px 0; } }
.skalierung--dunkel .augenbraue { background: var(--farbe-flaeche-hell-zart); color: var(--farbe-weiss); }
.skalierung--dunkel .skalierung__titel,
.skalierung--dunkel .skalierung__text strong,
.skalierung--dunkel .skalierungskarte__zeichen,
.skalierung--dunkel .skalierungskarte__titel { color: var(--farbe-weiss); }
.skalierung--dunkel .skalierung__text,
.skalierung--dunkel .skalierungskarte__text { color: var(--farbe-text-grau); }
.skalierung--dunkel .systemmedium--dunkel { box-shadow: inset 0 0 0 1px var(--farbe-linie-dunkel); }
@media screen and (width >= 1025px) {
  .skalierung--dunkel .skalierung__titel,
  .skalierung--situationen .skalierung__titel { font-size: 56px; letter-spacing: -.04em; line-height: 1.02; }
  .skalierung--dunkel .skalierung__text,
  .skalierung--situationen .skalierung__text { font-size: 18px; line-height: 1.55; }
  .skalierung--dunkel .skalierungskarte__titel,
  .skalierung--situationen .skalierungskarte__titel { font-size: 21px; line-height: 1.25; }
  .skalierung--dunkel .skalierungskarte__text,
  .skalierung--situationen .skalierungskarte__text { font-size: 17px; line-height: 1.6; }
  .skalierung--dunkel .skalierungskarte__zeichen { width: 22px; min-width: 22px; height: 22px; min-height: 22px; }
}
@media screen and (width >= 1025px) and (width <= 1440px) {
  .skalierung--dunkel .skalierung__innenkopf,
  .skalierung--dunkel .skalierung__liste,
  .skalierung--situationen .skalierung__innenkopf,
  .skalierung--situationen .skalierung__liste { grid-column: 1 / -1; }
  .skalierung--dunkel .skalierung__innenkopf,
  .skalierung--situationen .skalierung__innenkopf { gap: 48px; }
  .skalierung--dunkel .skalierung__innenkopf .skalierung__schlagzeile,
  .skalierung--dunkel .skalierung__innenkopf .skalierung__text,
  .skalierung--situationen .skalierung__innenkopf .skalierung__schlagzeile,
  .skalierung--situationen .skalierung__innenkopf .skalierung__text { width: auto; flex: 1 1 0; min-width: 0; }
}

.skalierung--situationen .skalierung__kopf,
.skalierung--situationen .skalierung__inhaltshuelle,
.skalierung--situationen .skalierung__schlagzeile,
.skalierung--situationen .skalierung__text,
.skalierung--situationen .skalierung__liste,
.skalierung--situationen .skalierungskarte,
.skalierung--situationen .skalierungskarte__titel { min-width: 0; }
.skalierung--situationen .skalierung__liste { flex: 1 1 auto; }
.skalierung--situationen .skalierungskarte__medium { aspect-ratio: auto; overflow: hidden; }
.skalierung--situationen .ablaufmedium { aspect-ratio: 3 / 4; }
@media screen and (width >= 1025px) {
  .skalierung--situationen .drehplan { padding: 3.2rem; gap: 1.6rem; }
  .skalierung--situationen .drehplan__zeile { grid-template-columns: 7.6rem 2rem minmax(0, 1fr); gap: 1.4rem; height: 8rem; padding: 0 1.8rem; border-radius: .4rem; }
  .skalierung--situationen .drehplan__zeit { font-size: 2.4rem; }
  .skalierung--situationen .drehplan__punkt { width: 1.6rem; height: 1.6rem; }
  .skalierung--situationen .drehplan__text { font-size: 2.6rem; white-space: normal; }
}
@media screen and (width >= 641px) {
  .skalierung--situationen .skalierungskarte:last-child:nth-child(odd) { width: 100%; }
  .skalierung--situationen .skalierungskarte:last-child:nth-child(odd) .skalierungskarte__text { max-width: 64ch; }
}
@media screen and (width >= 641px) and (width <= 1024px) {
  .skalierung--situationen .skalierung__liste { flex-flow: row wrap; gap: 6rem 2rem; }
  .skalierung--situationen .skalierungskarte { width: calc(50% - 1rem); }
  .skalierung--situationen .drehplan { gap: .6rem; }
  .skalierung--situationen .drehplan__zeile { height: auto; min-height: 4.4rem; padding: .7rem .8rem; }
  .skalierung--situationen .drehplan__text { font-size: 1.4rem; white-space: normal; }
}
@media screen and (width <= 640px) {
  .skalierung--situationen .drehplan { padding: 2rem 1.2rem; gap: .8rem; }
  .skalierung--situationen .drehplan__zeile { grid-template-columns: 3.8rem 1.2rem minmax(0, 1fr); gap: .8rem; height: auto; min-height: 4.8rem; padding: .8rem; }
  .skalierung--situationen .drehplan__zeit { font-size: 1.3rem; }
  .skalierung--situationen .drehplan__text { font-size: 1.45rem; white-space: normal; }
}

@media screen and (width >= 1025px) {
  .vergleichspunkt__text, .entlastung__absatz, .dreidinge__text, .frage__antwort p,
  .fallbeispiel__punkt dd, .kacheln p, .gespraechsblock__absaetze p { font-size: 17px; line-height: 1.6; }
  .zkopf__text h3, .teamblock p, .fusszeile__text { font-size: 18px; line-height: 1.55; }
  .vergleichspunkt__titel { font-size: 17px; }
  .haupt > section:not(.thesisheld), .haupt > .zkopf--gross.zkopf--wahrheit { margin-top: 128px; margin-bottom: 128px; }
  .haupt > section.zkopf--gross { padding-top: 0; }
  .fragen > .zkopf { padding-bottom: 32px; }
  .dreidinge__raster { margin-top: 0; }
  .haupt > .vorlagen { margin-top: 28px; }
  .vorlagen__knopfreihe { margin-top: 0; }
}
@media screen and (width <= 1024px) {
  .haupt > section:not(.thesisheld), .haupt > .zkopf--gross.zkopf--wahrheit { margin-top: 88px; margin-bottom: 88px; }
  .haupt > section.zkopf--gross { padding-top: 0; }
  .fragen > .zkopf { padding-bottom: 24px; }
  .dreidinge__raster { margin-top: 0; }
  .haupt > .vorlagen { margin-top: 20px; }
  .vorlagen__knopfreihe { margin-top: 0; }
}

.haupt .zkopf { text-align: left; }
.haupt .zkopf__pille, .haupt .zkopf__knopf { justify-content: flex-start; }
.haupt .pille:not(.schnelllink__pille) { min-height: 0; padding: 0; border-radius: 0; color: var(--farbe-tinte); font: 700 1.4rem/1.3 Inter, sans-serif; letter-spacing: .06rem; text-transform: uppercase; text-wrap: balance; }
.haupt .pille:not(.schnelllink__pille)::before { display: none; }
@media screen and (width >= 1025px) { .haupt .pille:not(.schnelllink__pille) { font-size: 14px; letter-spacing: .04em; } }
.haupt .zkopf__text { margin: 0; max-width: none; }
@media screen and (width >= 1025px) { .haupt .zkopf__text { max-width: 96rem; } }
@media screen and (width >= 1441px) { .haupt .zkopf__text { max-width: 110rem; } }
.wahrheit__foto { margin: 3.2rem 0 0; }
.wahrheit__foto img { display: block; width: 100%; height: auto; border-radius: 0; object-fit: cover; }
@media screen and (width <= 1024px) {
  .wahrheit__foto img { aspect-ratio: 4 / 3; }
  .zkopf--wahrheit .zkopf__titel br { display: none; }
}
@media screen and (width >= 1025px) {
  .zkopf--wahrheit .behaelter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34%); column-gap: 5.6rem; align-items: center; }
  .zkopf--wahrheit .behaelter > * { grid-column: 1; }
  .zkopf--wahrheit .behaelter > .wahrheit__foto { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .zkopf--wahrheit .zkopf__text { max-width: none; }
}
.stadtband { margin: 12rem 0 14rem; }
.stadtband__kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; margin-bottom: 5rem; max-width: 96rem; }
.stadtband__titel { margin: 0; font: 800 5.6rem/1.05 Inter, sans-serif; letter-spacing: -.16rem; color: var(--farbe-tinte); text-wrap: balance; }
.stadtband__satz { margin: 0; font: 500 2.2rem/1.45 Inter, sans-serif; color: var(--farbe-text-zweit); }
.stadtband__lauf .lauf__spur { list-style: none; margin: 0; }
.stadtband__lauf .vmedium { background: var(--farbe-linie); }
@media screen and (width <= 1024px) {
  .stadtband { margin: 8rem 0 9rem; }
  .stadtband__kopf { margin-bottom: 3rem; gap: 1.4rem; }
  .stadtband__titel { font-size: 3.2rem; letter-spacing: -.08rem; }
  .stadtband__satz { font-size: 1.7rem; }
}
