.einstieg { padding-block: clamp(2.25rem, 4.5vw, 4rem) 0; position: relative; }
.einstieg__innen { width: var(--spalte-weit); margin-inline: auto; position: relative; z-index: 1; }
.einstieg .vorspann { margin-top: 1.125rem; }
.einstieg .knopfreihe { margin-top: 1.75rem; }

.vergleich {
  position: relative;
  border-radius: var(--radius-karte);
  overflow: hidden;
  background: var(--linie);
  border: 1px solid var(--linie);
  --pos: 50%;
  touch-action: pan-y;
  isolation: isolate;
  container-type: inline-size;
}

.vergleich img {
  width: 100%;
  height: min(56.25cqw, max(24cqw, 18.75rem));
  object-fit: cover;
  display: block;
}

.vergleich__davor {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.vergleich__griff {
  position: absolute; inset-block: 0; left: var(--pos);
  width: 2px; margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(16 24 40 / .12);
  z-index: 3; pointer-events: none;
}
.vergleich__knauf {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px; background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgb(16 24 40 / .22);
  color: var(--tinte);
}

.vergleich__regler {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: ew-resize; z-index: 4;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.vergleich__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 4rem; height: 100%; }
.vergleich__regler::-moz-range-thumb { width: 4rem; height: 100%; border: 0; }
.vergleich__regler:focus-visible ~ .vergleich__griff .vergleich__knauf {
  outline: 3px solid var(--blau); outline-offset: 3px;
}

.vergleich__schild {
  position: absolute; top: .875rem; z-index: 2;
  background: rgb(255 255 255 / .95);
  color: var(--tinte);
  font-size: .625rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .45rem .75rem; border-radius: var(--radius);
  margin: 0;
}
.vergleich__schild--links { left: .875rem; }
.vergleich__schild--rechts { right: .875rem; }

.streifen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
}
@media (max-width: 72rem) { .streifen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 52rem) { .streifen { grid-template-columns: 1fr; } }

.streifen__punkt {
  padding: 1.125rem clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--linie);
}
@media (max-width: 52rem) {
  .streifen__punkt { border-right: 0; border-bottom: 1px solid var(--linie); }
}
.streifen__nr { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; color: var(--blau); display: block; }
.streifen__wort { font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin: .2rem 0 0; }

.preispille {
  display: flex; align-items: baseline; gap: .75rem;
  margin: .75rem clamp(1rem, 1.6vw, 1.5rem);
  padding: .75rem 1.5rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 999px;
  white-space: nowrap;
}
.preispille__wort { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.preispille__zahl {
  font-family: 'Archivo', 'Archivo Ersatz', sans-serif;
  font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; color: var(--blau);
}
@media (max-width: 72rem) { .preispille { grid-column: 1 / -1; justify-content: center; } }

.ablauf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.ablauf--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 64rem) { .ablauf, .ablauf--3, .ablauf--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ablauf, .ablauf--3, .ablauf--5 { grid-template-columns: 1fr; } }

.ablauf__schritt { position: relative; }
.ablauf__nr {
  display: block; margin-bottom: .75rem;
  font-family: 'Archivo', 'Archivo Ersatz', sans-serif;
  font-size: 2.25rem; font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: var(--blau);
}
.ablauf__schritt h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4rem; }
.ablauf__schritt p { font-size: .875rem; color: var(--leise); margin: 0; }

.formate { list-style: none; margin: 0; padding: 0; display: grid; }
.formate li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem 1rem; align-items: center;
  padding: .75rem 0;
  border-top: 1px solid var(--linie);
}
.formate li:last-child { border-bottom: 1px solid var(--linie); }

.filterleiste { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; border-bottom: 1px solid var(--linie); }
.filterknopf {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .625rem 0 .75rem;
  font: inherit; font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--leise); cursor: pointer;
  transition: color var(--schwung), border-color var(--schwung);
}
.filterknopf:hover { color: var(--tinte); }
.filterknopf[aria-pressed='true'] { color: var(--blau); border-bottom-color: var(--blau); }

.projektliste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
@media (max-width: 62rem) { .projektliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .projektliste { grid-template-columns: 1fr; } }
.projektliste > [hidden] { display: none; }

.leermeldung { padding: 2.5rem 0; color: var(--leise); }
.leermeldung[hidden] { display: none; }

.preisreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 60rem) { .preisreihe { grid-template-columns: 1fr; } }

.preiskarte { position: relative; display: flex; flex-direction: column; }
.preiskarte__kopf { padding-bottom: 1.125rem; border-bottom: 1px solid var(--linie); }
.preiskarte h3 { font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .2rem; }
.preiskarte__umfang { font-size: .8125rem; color: var(--leise); margin: 0; }
.preiskarte__jebild { font-size: .8125rem; font-weight: 650; color: var(--blau); margin: .2rem 0 0; }
.preiskarte__zahl {
  margin-top: auto; padding-top: 1.5rem;
  display: flex; align-items: baseline; justify-content: center; gap: .5rem;
  color: var(--blau);
}
.preiskarte__ab { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.preiskarte__betrag {
  font-family: 'Archivo', 'Archivo Ersatz', sans-serif;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1;
}
.preiskarte--betont { border-color: var(--blau); background: var(--blau-zart); }
.preiskarte__marke {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--blau); color: #fff;
  font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .875rem; border-radius: 999px; white-space: nowrap;
}

.staffel { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; }
.staffel__punkt { display: flex; align-items: baseline; gap: .5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.staffel__betrag {
  font-family: 'Archivo', 'Archivo Ersatz', sans-serif;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--blau);
  text-transform: none; letter-spacing: -.02em;
}
.staffel__trenner { color: var(--leise); }
@media (max-width: 40rem) { .staffel__trenner { display: none; } }

.merkmalreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 100%; }
.merkmalreihe > * + * { border-left: 1px solid var(--linie); }
@media (max-width: 48rem) {
  .merkmalreihe { grid-template-columns: 1fr; }
  .merkmalreihe > * + * { border-left: 0; border-top: 1px solid var(--linie); }
}

.formularkarte { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.formularkarte[hidden] { display: none; }
@media (max-width: 62rem) { .formularkarte { grid-template-columns: 1fr; } }
.formularkarte__links { padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.anfrageart { margin-bottom: 1.5rem; }
html[data-anfrageart='allgemein'] .nur-projekt { display: none; }

html[data-anfrageart='projekt'] .wort-allgemein,
html[data-anfrageart='allgemein'] .wort-projekt { display: none; }

.formular-direkt {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-block: 1rem 1.25rem;
  font-size: .9375rem; font-weight: 650;
}
.formular-direkt a {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--tinte); text-decoration: none;
  transition: color var(--schwung);
}

.formular-direkt a[href^='tel:'] {
  border: 1.5px solid var(--blau); border-radius: 999px;
  color: var(--blau); padding: .5rem 1rem;
  transition: background var(--schwung), color var(--schwung);
}
@media (hover: hover) {
  .formular-direkt a[href^='tel:']:hover { background: var(--blau); color: #fff; }
}
@media (hover: hover) {
  .formular-direkt a:hover { color: var(--blau); }
}

.formularkarte__rechts {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border-left: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 1.25rem;
}
@media (max-width: 62rem) { .formularkarte__rechts { border-left: 0; border-top: 1px solid var(--linie); } }

.formular { display: grid; gap: 1.25rem; }
.feldpaar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feldpaar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 48rem) { .feldpaar, .feldpaar--2 { grid-template-columns: 1fr; } }

.feld { display: grid; gap: .45rem; align-content: start; }
.feld > label, .feldgruppe > legend {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte); padding: 0;
}
.pflicht { color: var(--signal); }

.feld input[type='text'], .feld input[type='email'], .feld input[type='tel'],
.feld input[type='date'], .feld select, .feld textarea {
  font: inherit; font-size: .9375rem;
  padding: .8rem .9rem;
  border: 1px solid var(--feldrand);
  border-radius: 8px;
  background: var(--karte);
  color: var(--tinte); width: 100%;
  transition: border-color var(--schwung), box-shadow var(--schwung);
}
.feld textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.feld ::placeholder { color: var(--leise); opacity: 1; }
.feld select {
  appearance: none; cursor: pointer; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235b6675' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.feld :is(input, select, textarea):hover { border-color: var(--tinte); }
.feld :is(input, select, textarea):focus {
  outline: none; border-color: var(--blau);
  box-shadow: 0 0 0 3px rgb(20 66 143 / .16);
}
.feld :is(input, select, textarea)[aria-invalid='true'] { border-color: var(--signal); }

.fehlerzeile { font-size: .75rem; color: var(--signal); font-weight: 650; }
.fehlerzeile:empty { display: none; }

.feldgruppe { border: 0; margin: 0; padding: 0; display: grid; gap: .45rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.chip span {
  display: block;
  border: 1px solid var(--feldrand);
  border-radius: 8px;
  padding: .7rem 1.1rem;
  font-size: .8125rem; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--karte); color: var(--tinte);
  transition: border-color var(--schwung), background var(--schwung), color var(--schwung);
}
.chip input:hover + span { border-color: var(--tinte); }
.chip input:checked + span { background: var(--blau); border-color: var(--blau); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--blau); outline-offset: 3px; }

.zustimmung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; }
.zustimmung input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--blau); }
.zustimmung label { font-size: .8125rem; color: var(--leise); }

.zusicherung { display: flex; align-items: center; gap: .625rem; font-size: .8125rem; color: var(--leise); justify-content: center; }
.zusicherung svg { color: var(--blau); flex: none; }

.meldung { border-radius: 10px; padding: 1.25rem 1.5rem; font-size: .9375rem; margin-bottom: 1.5rem; }
.meldung[hidden] { display: none; }
.meldung--gut { background: #eaf3ec; border-left: 3px solid #2f7a3e; }
.meldung--schlecht { background: #fdf2f2; border-left: 3px solid var(--signal); }
.meldung h2 { font-size: 1rem; margin-bottom: .35rem; }

.fliesstext { max-width: 68ch; }
.fliesstext h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin: 2.25rem 0 .875rem; }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.fliesstext li { margin-bottom: .4rem; }

.leerseite { display: grid; place-items: center; text-align: center; min-height: 58vh; padding-block: var(--block); }
.leerseite h1 { max-width: 16ch; margin-inline: auto; }
.leerseite .vorspann { margin: 1.25rem auto 0; }
.leerseite .knopfreihe { justify-content: center; margin-top: 2rem; }

.ablauf__zeichen { display: block; width: 2rem; height: 2rem; color: var(--blau); margin-bottom: .625rem; }
.ablauf__zeichen svg, .typkarte__zeichen svg { width: 100%; height: 100%; display: block; }

.beitrag__verfasser { color: var(--leise); font-size: .9375rem; margin-top: .875rem; }
.beitrag__verfasser strong { color: var(--tinte); }

.beitrag { margin-top: 2.25rem; }
.beitrag p { margin: 0 0 1.05rem; }

.beitrag__bild--breit { margin: 0 0 2.75rem; }
.beitrag__bild--breit img { width: 100%; height: auto; display: block; border-radius: var(--radius-karte); }
.beitrag__bild--breit figcaption { color: var(--leise); font-size: .875rem; margin-top: .7rem; text-align: center; }

.kapitel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.beitrag__lang > .kapitel { margin-top: clamp(2.75rem, 5vw, 4.25rem); }
.beitrag__lang > .kapitel:nth-of-type(even) { grid-template-columns: 1fr 1.15fr; }
.beitrag__lang > .kapitel:nth-of-type(even) .kapitel__text { order: 2; }

.kapitel__text h3 { font-size: 1.375rem; letter-spacing: -.01em; margin: 0 0 1rem; }
.kapitel__text > p:last-child { margin-bottom: 0; }

.kapitel__bild { margin: 0; min-width: 0; }
.kapitel__bild > img { width: 100%; height: auto; display: block; border-radius: var(--radius-karte); }
.kapitel__bild figcaption { color: var(--leise); font-size: .875rem; margin-top: .7rem; }

.kapitel__raster { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
.kapitel__raster figcaption { grid-column: 1 / -1; margin-top: 0; }
.raster__zelle { position: relative; min-width: 0; }
.raster__zelle img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.raster__schild {
  position: absolute; top: .625rem; left: .625rem;
  background: rgb(255 255 255 / .95); color: var(--tinte);
  font-size: .5625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: var(--radius);
}

.beitrag__rest > summary { list-style: none; display: flex; width: fit-content; margin: 2rem 0 0; }
.beitrag__rest > summary::-webkit-details-marker { display: none; }
.beitrag__zu { display: none; }
.beitrag__rest[open] > summary .beitrag__zu { display: inline; }
.beitrag__rest[open] > summary .beitrag__auf { display: none; }

.beitrag__autor {
  margin-top: clamp(2.75rem, 5vw, 4.25rem);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--blau);
  border-radius: var(--radius-karte);
  padding: 1.75rem clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: flex-start;
}
.beitrag__autor-kopf { flex: 0 0 13rem; }
.beitrag__autor-bild {
  width: 8.5rem; height: 8.5rem;
  border-radius: 999px; object-fit: cover; display: block;
  margin-bottom: 1rem;
}
.beitrag__autor-titel {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blau);
  margin-bottom: 0;
}
.beitrag__autor-lauf { flex: 1; min-width: 0; }
.beitrag__autor-lauf p { max-width: 68ch; }
.beitrag__autor-lauf p:last-child { margin-bottom: 0; }
@media (max-width: 64rem) {
  .beitrag__autor { flex-direction: column; gap: 1rem; }
}

@media (max-width: 64rem) {
  .kapitel,
  .beitrag__lang > .kapitel:nth-of-type(even) { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .beitrag__lang > .kapitel:nth-of-type(even) .kapitel__text { order: 0; }
}

:root {
  --schrift-titel: clamp(1.75rem, 3.4vw, 2.75rem);
  --schrift-zahl: 1.5rem;
  --schrift-lead: 1.0625rem;
  --schrift-text: .9375rem;
  --schrift-label: .8125rem;
  --schrift-meta: .75rem;
}

main section:not(.vollbild):not(#ratgeber) .titel-l { font-size: var(--schrift-titel); }
main section:not(.vollbild):not(#ratgeber) .marke { font-size: var(--schrift-label); }
main section:not(.vollbild) .vorspann { font-size: var(--schrift-lead); }
.frage > summary { font-size: var(--schrift-lead); }
.klein,
.typkarte p,
.ablauf__schritt p,
.hakenliste li,
.merkmal,
.frage > div { font-size: var(--schrift-text); }
.typkarte h3,
.ablauf__schritt h3,
.preiskarte h3,
.preiskarte__ab { font-size: var(--schrift-label); }
.hinweiszeile,
.preiskarte__umfang,
.preiskarte__jebild { font-size: var(--schrift-meta); }
.preiskarte__betrag,
.ablauf__nr { font-size: var(--schrift-titel); }
.staffel__betrag { font-size: var(--schrift-zahl); }
.staffel__trenner { font-size: var(--schrift-text); }
.feld > label, .feldgruppe > legend { font-size: var(--schrift-label); }
.meldung { font-size: var(--schrift-text); }
.meldung h2 { font-size: var(--schrift-lead); }
.zustimmung label { font-size: var(--schrift-meta); }
.pflicht,
.preiskarte__marke { font-size: var(--schrift-meta); }

.zweiteiler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
.zweiteiler__kopf, .zweiteiler__text { grid-column: 1; }
.zweiteiler__neben { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 40rem) {
  .zweiteiler { grid-template-columns: 1fr; }
  .zweiteiler__neben { grid-column: 1; grid-row: auto; }
}
.beitrag__rumpf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  column-gap: clamp(2rem, 3.5vw, 3.5rem);
  align-items: start;
}
.beitrag__spalte { min-width: 0; }
.beitrag__spalte > .kapitel { grid-template-columns: 1fr; }
.beitrag__spalte > .kapitel > .kapitel__text { max-width: 42rem; }
.beitrag__spalte > .kapitel + .kapitel { margin-top: clamp(2.75rem, 5vw, 4.25rem); }

.beitrag__lang > .kapitel--nurtext,
.beitrag__lang > .kapitel--nurtext:nth-of-type(even),
.beitrag__spalte > .kapitel--nurtext { grid-template-columns: 1fr; }
.kapitel--nurtext > .kapitel__text { max-width: 42rem; }

.beitrag__zwischenbild { margin: 2.25rem 0 0; max-width: 42rem; }
.beitrag__zwischenbild figcaption { color: var(--leise); font-size: .875rem; margin-top: .7rem; }

html[data-seite='landingpage'] .vollbild--hell .vollbild__text .titel-xl {
  max-width: min(30ch, 45vw);
  min-width: min-content;
  overflow-wrap: normal;
  word-break: keep-all;
}
@media (min-width: 64.0625rem) {
  html[data-seite='landingpage'] .vollbild--hell .vollbild__text .titel-xl {
    font-size: min(calc(var(--schrift-titel) * var(--faktor) - 10px), 4.2vw);
  }
}

.beitrag__uebersicht {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: 1.375rem 1.625rem;
  position: sticky;
  top: var(--uebersicht-oben, 5.5rem);
}
@media (max-width: 64rem) {
  .beitrag__rumpf { grid-template-columns: 1fr; }
  .beitrag__uebersicht { position: static; order: -1; margin-bottom: 1.75rem; }
}
.beitrag__uebersicht-titel {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blau); margin-bottom: .75rem;
}
.beitrag__uebersicht ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.beitrag__uebersicht li::marker { color: var(--blau); font-weight: 700; }
.beitrag__uebersicht a { color: var(--tinte); text-decoration: none; }
.beitrag__uebersicht a:hover { color: var(--blau); text-decoration: underline; }
.beitrag__lang h3[id], .beitrag__autor { scroll-margin-top: 5.5rem; }

.bilderband__spur {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .875rem;
}
.bilderband__bild { grid-column: span 2; min-width: 0; }
.bilderband--vollzuerst .bilderband__bild.pos-1,
.bilderband--vollzuletzt .bilderband__bild.pos-4 { grid-column: 1 / -1; }
@media (max-width: 64rem) {
  .bilderband__bild { grid-column: span 3; }
}
@media (max-width: 40rem) { .bilderband__bild { grid-column: 1 / -1 !important; } }
.bilderband__bild[hidden] { display: none; }

.galerie-mehr { margin-top: 1.25rem; }
.galerie-mehr a {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--tinte); font-weight: 650; font-size: .9375rem;
  text-decoration: none;
  transition: color var(--schwung), transform var(--schwung);
}
.galerie-mehr a[hidden] { display: none; }
@media (hover: hover) {
  .galerie-mehr a:hover { color: var(--blau); transform: translateX(4px); }
}
.bilderband__bild > button {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius-karte); overflow: hidden;
}
.bilderband__bild img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }

.bilderband__bild video {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  object-fit: cover; display: block; background: var(--linie);
  transform: scale(1.03);
}
.bilderband__bild .vergleich video { height: auto; }
.bilderband__schild {
  position: absolute; top: .625rem; left: .625rem;
  background: rgb(255 255 255 / .95); color: var(--tinte);
  font-size: var(--schrift-meta); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: var(--radius);
}

.grossbild { border: 0; padding: 0; background: transparent; max-width: min(94vw, 110rem); overflow: visible; }
.grossbild::backdrop { background: rgb(16 24 40 / .85); }
.grossbild figure { margin: 0; }
.grossbild img {
  width: 100%; max-height: 84vh; height: auto;
  object-fit: contain; display: block;
  border-radius: var(--radius-karte);
}
.grossbild__text { color: rgb(255 255 255 / .85); font-size: .875rem; text-align: center; margin-top: .75rem; }
.grossbild__zu,
.grossbild__zurueck,
.grossbild__weiter {
  position: absolute;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  border: 0; background: #fff; color: var(--tinte); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgb(16 24 40 / .35);
}
.grossbild__zu { top: -1.25rem; right: -1.25rem; }
.grossbild__zurueck { left: -1.25rem; top: 50%; transform: translateY(-50%); }
.grossbild__weiter { right: -1.25rem; top: 50%; transform: translateY(-50%); }
.grossbild__zu:hover, .grossbild__zurueck:hover, .grossbild__weiter:hover { color: var(--blau); }
@media (max-width: 48rem) {
  .grossbild__zu { right: 0; top: -3.25rem; }
  .grossbild__zurueck { left: .5rem; }
  .grossbild__weiter { right: .5rem; }
}

html[data-inhalt='skaliert'] main > section:not(.vollbild),
html[data-inhalt='skaliert'] .kopf__innen,
html[data-inhalt='skaliert'] .fuss__innen {
  zoom: var(--faktor);
}

.galerieblock .filterleiste {
  display: inline-flex; flex-wrap: wrap; gap: .25rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  border-radius: 999px;
  padding: .3rem;
  box-shadow: 0 2px 12px rgb(16 24 40 / .07);
}
.galerieblock .filterknopf {
  border: 0; border-bottom: 0;
  padding: .55rem 1.1rem; border-radius: 999px;
  transition: color var(--schwung), background-color var(--schwung);
}
.galerieblock .filterknopf:hover { background: var(--grund); color: var(--tinte); }
.galerieblock .filterknopf[aria-pressed='true'] { background: var(--blau); color: #fff; }

@media (max-width: 40rem) {
  .galerieblock .filterleiste {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    gap: .45rem;
  }
  .galerieblock .filterknopf {
    background: var(--karte);
    border: 1px solid var(--linie);
  }
  .galerieblock .filterknopf[aria-pressed='true'] {
    border-color: var(--blau);
  }
}

.bilderband__bild .vergleich img,
.grossbild .vergleich img { height: auto; }

.bilderband__gross, .bilderband__klein { position: relative; }
.bilderband__gross > .bilderband__lupe,
.bilderband__klein > .bilderband__lupe {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 5;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  border: 0; padding: 0; background: #fff; color: var(--tinte); cursor: zoom-in;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgb(16 24 40 / .22);
}
.bilderband__gross > .bilderband__lupe:hover,
.bilderband__klein > .bilderband__lupe:hover { color: var(--blau); }

.bilderband__bild.bilderband__klein .vergleich { border: 0; border-radius: var(--radius-karte); }
.bilderband__klein :is(.vergleich__davor, .vergleich__schild, .vergleich__griff, .vergleich__regler),
.bilderband__klein > .bilderband__lupe { display: none; }
.bilderband__klein > .bilderband__flaeche {
  position: absolute; inset: 0; z-index: 6;
  border: 0; padding: 0; background: transparent; cursor: zoom-in;
  border-radius: var(--radius-karte);
}

@media (max-width: 40rem) {
  .bilderband__bild.bilderband__klein .vergleich { border: 1px solid var(--linie); border-radius: var(--radius-karte); }
  .bilderband__klein :is(.vergleich__davor, .vergleich__schild, .vergleich__griff) { display: block; }
  .bilderband__klein .vergleich__regler { display: inline-block; }
  .bilderband__klein > .bilderband__lupe { display: grid; }
  .bilderband__klein > .bilderband__flaeche { display: none; }
  .bilderband__klein .bilderband__schild { display: none; }
  .bilderband__klein .ki-schild { top: auto; bottom: .625rem; right: auto; left: .625rem; }
}

.setspur { container-type: inline-size; column-gap: 1cqw; row-gap: 1cqw; }

.setspur .vergleich,
.setspur .setfilm { border-radius: 0; }

.setfilm { position: relative; min-width: 0; overflow: hidden; }
.setfilm video {
  width: 100%; height: 100%; display: block;
  object-fit: cover; background: var(--linie);
  transform: scale(1.03);
}
.setfilm__marke {
  position: absolute; top: .625rem; left: .625rem; z-index: 2;
  background: rgb(255 255 255 / .95); color: var(--tinte);
  font-size: var(--schrift-meta); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: var(--radius);
}
.setfilm .ki-schild { z-index: 2; }

.setspur > .setfilm { grid-column: span 4; aspect-ratio: 16 / 9; }

.setspur > [data-motiv='aussen1'] { grid-column: span 2; display: grid; }
.setspur > [data-motiv='aussen1'] .vergleich { height: 100%; }
.setspur > [data-motiv='aussen1'] img {
  height: 100%; width: 100%; aspect-ratio: auto; object-fit: cover;
}

.setspur > [data-motiv='aussen2'],
.setspur > [data-motiv='wohnen'],
.setspur > [data-motiv='schlafen'] { grid-column: span 2; }

.setspur > [data-motiv='kind'],
.setspur > [data-motiv='buero'] { grid-column: span 3; }

@container (max-width: 57.5rem) {
  .setspur > li { grid-column: span 3 !important; }
  .setspur > .setfilm { grid-column: span 6 !important; }
  .setspur > li img { aspect-ratio: 16 / 9 !important; }
  .setspur > [data-motiv='aussen1'] .vergleich { height: auto; }
}
@container (max-width: 34rem) {
  .setspur > li,
  .setspur > .setfilm { grid-column: 1 / -1 !important; }
}

.setfenster {
  border: 0; padding: 0; background: transparent;
  width: min(72rem, 92vw); max-width: none;
  max-height: 92vh; overflow: visible;
}
.setfenster::backdrop { background: rgb(16 24 40 / .82); }
.setfenster__blatt {
  background: var(--karte); border-radius: var(--radius-karte);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgb(16 24 40 / .35);
}
.setfenster__titel {
  margin: .25rem 0 0;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.15;
}
.setfenster__inhalt > section:first-child { padding-top: 0; }
.setfenster__inhalt > section:last-child { padding-bottom: 0; }
.setfenster__inhalt .bahn { width: 100%; }
.setfenster__laedt { color: var(--leise); padding: 3rem 0; text-align: center; }

.setfenster__zu {
  position: absolute; top: -.75rem; right: -.75rem;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  border: 0; padding: 0; cursor: pointer;
  background: #fff; color: var(--tinte);
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgb(16 24 40 / .3);
}
.setfenster__zu:hover { color: var(--blau); }
@media (max-width: 40rem) {
  .setfenster { width: 94vw; }
  .setfenster__zu { top: .5rem; right: .5rem; }
}

.grossbild .vergleich--ohne :is(.vergleich__davor, .vergleich__griff, .vergleich__schild, .vergleich__regler) { display: none; }
.grossbild__film { display: none; }
.grossbild .vergleich--film > img { display: none; }
.grossbild .vergleich--film > .grossbild__film {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  object-fit: cover; background: var(--linie);
  transform: scale(1.03);
}

.grossbild { width: min(94vw, 149svh); }
html[data-inhalt='skaliert'] .grossbild { zoom: min(1, calc(1280 / var(--fenster, 1280))); }

:root { --faktor: max(1, calc(var(--fenster, 1280) / 1280)); }

@media (min-width: 80rem) {
  html[data-held='einheitlich'] .vollbild__text .titel-xl { font-size: calc(var(--schrift-titel) * var(--faktor) - 10px); }
  html[data-held='einheitlich'] .vollbild .marke { font-size: calc(var(--schrift-label) * var(--faktor)); }
  html[data-held='einheitlich'] .vollbild .vorspann { font-size: calc(var(--schrift-lead) * var(--faktor)); }
  html[data-held='einheitlich'] .vollbild--hell .vollbild__leiste .streifen__nr { font-size: calc(var(--schrift-zahl) * var(--faktor)); line-height: 1.1; }
  html[data-held='einheitlich'] .vollbild--hell .vollbild__leiste .streifen__wort { font-size: calc(var(--schrift-label) * var(--faktor)); }
  html[data-held='einheitlich'] .vollbild--hell .streifen__zeichen {
    width: calc(2rem * var(--faktor));
    height: calc(2rem * var(--faktor));
  }
  html[data-held='einheitlich'] .vollbild .preispille__wort { font-size: calc(var(--schrift-label) * var(--faktor)); }
  html[data-held='einheitlich'] .vollbild .preispille__zahl { font-size: calc(var(--schrift-zahl) * var(--faktor)); }
  html[data-held='einheitlich'] .vollbild .knopfreihe { zoom: var(--faktor); }
  
}

html[data-held='einheitlich'] .vollbild--hell .vollbild__leiste .streifen__punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 .5rem;
  align-items: center;
}
html[data-held='einheitlich'] .vollbild--hell .vollbild__leiste .streifen__punkt .streifen__stapel { display: contents; }
html[data-held='einheitlich'] .vollbild--hell .vollbild__leiste .streifen__zeichen { grid-column: 1; grid-row: 1; }
html[data-held='einheitlich'] .vollbild--hell .vollbild__leiste .streifen__nr { grid-column: 2; grid-row: 1; }
html[data-held='einheitlich'] .vollbild--hell .vollbild__leiste .streifen__wort { grid-column: 1 / -1; grid-row: 2; margin-top: 0; line-height: 1.2; }
@media (min-width: 64.0625rem) {
  .vollbild--hell .vollbild__text .titel-xl { position: relative; }
  .vollbild--hell .vollbild__text .titel-xl::after {
    content: attr(data-titel);
    content: attr(data-titel) / '';
    position: absolute; inset: 0;
    color: #fff;
    clip-path: inset(-0.2em -0.1em -0.2em var(--titel-klip, 200vw));
    pointer-events: none;
  }
}

.whatsapp-knopf {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 80;
  width: 3.5rem; height: 3.5rem;
  border-radius: 999px;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgb(8 14 26 / .3);
  transition: transform var(--schwung), box-shadow var(--schwung);
}
.whatsapp-knopf:hover { transform: scale(1.08); color: #fff; box-shadow: 0 14px 34px rgb(8 14 26 / .38); }
.whatsapp-knopf svg { width: 1.9rem; height: 1.9rem; }

.logo__wort { height: 1.25rem; width: auto; display: block; }
.fuss .logo__wort { height: 1.125rem; }

.beitrag .vergleich img { height: auto; }

.beitrag ol { margin: 0 0 1.05rem; padding-left: 1.375rem; }
.beitrag ol li { margin-bottom: .4rem; }
.beitrag ol li::marker { font-weight: 700; color: var(--blau); }

.preiskarte__punkte { margin-top: 1.125rem; gap: .55rem; }
.preiskarte__punkte li { font-size: var(--schrift-text); }

#faq .marke,
#faq .titel-l { text-align: center; }
#faq .karte { max-width: 62rem; margin-inline: auto; }
#faq .frage > summary { text-transform: none; letter-spacing: 0; font-weight: 650; }
#faq .frage > div { max-width: 75ch; }
#faq .knopfreihe { justify-content: center; }

.koerper-404 { min-height: 100svh; display: flex; flex-direction: column; }
.koerper-404 main { flex: 1; min-height: 0; display: grid; align-items: center; }
.koerper-404 .leerseite { padding-block: clamp(2rem, 6vh, 4rem); min-height: 0; }
.koerper-404 .leerseite h1 { max-width: 24ch; }

.ki-schild {
  position: absolute; top: .625rem; right: .625rem; z-index: 5;
  background: rgb(255 255 255 / .82); color: var(--leise);
  font-size: .625rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: var(--radius);
  pointer-events: none;
}
.ki-schild--unten { top: auto; bottom: .625rem; right: auto; left: .625rem; }
.kapitel__raster .ki-schild { top: auto; bottom: .5rem; right: .5rem; font-size: .5rem; padding: .2rem .4rem; letter-spacing: .06em; }

.modellhinweis {
  display: flex; align-items: center; gap: 1.75rem;
  background: var(--blau-zart);
  border: 1px solid var(--blau-linie);
  border-radius: var(--radius-karte);
  padding: 2.5rem 2.25rem;
}
.modellhinweis__zeichen { flex: none; width: 4.25rem; height: 4.25rem; color: var(--blau); }
.modellhinweis__zeichen svg { width: 100%; height: 100%; display: block; }
.modellhinweis__titel {
  font-size: var(--schrift-zahl); font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase;
  margin-bottom: .35rem;
}
.modellhinweis__text { font-size: var(--schrift-lead); color: var(--leise); margin: 0; }

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}