.seitenkopf {
  padding: 14rem 0 7rem;
  text-align: center;
}
@media screen and (width >= 1025px) { .seitenkopf { padding: 20.5rem 0 10rem; } }

.seitenkopf__hut {
  color: var(--farbe-text-zweit);
  font: 600 1.4rem/1.4 Inter, sans-serif;
  letter-spacing: .12rem;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.seitenkopf__titel {
  letter-spacing: -.24rem;
  font: 800 4.4rem/.95 Inter, sans-serif;
  color: var(--farbe-tinte);
  overflow-wrap: break-word;
  hyphens: auto;
}
@media screen and (width >= 1025px) { .seitenkopf__titel { font-size: 7.2rem; letter-spacing: -.36rem; } }

.seitenkopf__text {
  color: var(--farbe-text-zweit);
  letter-spacing: -.022em;
  font: 400 1.8rem/1.5 Inter, sans-serif;
  max-width: 60rem;
  margin: 2.4rem auto 0;
}
.seitenkopf__knoepfe { display: flex; gap: 1.2rem; justify-content: center; margin-top: 3.2rem; flex-wrap: wrap; }
.seitenkopf__knoepfe .knopf { max-width: 100%; }
.seitenkopf__knoepfe .knopf__innen { white-space: normal; text-align: center; }

.fliesstext {
  max-width: 68.6rem;
  margin: 0 auto;
  padding-bottom: 12rem;
}
.fliesstext h2 {
  letter-spacing: -.04em;
  font: 800 3.6rem/1 Inter, sans-serif;
  color: var(--farbe-tinte);
  margin: 6rem 0 1.6rem;
}
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext h3 {
  font: 700 1.9rem/1.3 Inter, sans-serif;
  color: var(--farbe-tinte);
  margin: 3.2rem 0 1rem;
}
.fliesstext p,
.fliesstext li {
  color: var(--farbe-fliess);
  letter-spacing: -.02em;
  font: 400 1.6rem/1.5 Inter, sans-serif;
}
.fliesstext { overflow-wrap: break-word; hyphens: auto; }
.fliesstext h2, .fliesstext h3 { overflow-wrap: break-word; hyphens: auto; }
.fliesstext p { margin-bottom: 1.6rem; }
.fliesstext ul { margin: 0 0 1.6rem 2.2rem; list-style: disc; }
.fliesstext ol { margin: 0 0 1.6rem 2.2rem; list-style: decimal; }
.fliesstext li { margin-bottom: .6rem; }
.fliesstext li::marker { color: var(--farbe-text-stumm); }
.fliesstext a:not(.knopf) { color: var(--farbe-violett-link); text-decoration: underline; text-underline-offset: .3rem; }
.fliesstext strong { color: var(--farbe-tinte); font-weight: 600; }

.fliesstext__stand {
  color: var(--farbe-text-zweit);
  font: 400 1.4rem/1.5 Inter, sans-serif;
  border-top: 1px solid var(--farbe-linie);
  padding-top: 2.4rem;
  margin-top: 6rem;
}

.zertifikat {
  max-width: 56rem;
  margin: 3.2rem 0 0;
}

.zertifikat img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--farbe-linie);
  border-radius: .8rem;
}

.fliesstext__absender {
  background: var(--farbe-violett-blass);
  border-radius: .4rem;
  padding: 2.8rem 3rem;
  margin-bottom: 5.6rem;
}
.fliesstext__absender > p:first-child {
  color: var(--farbe-text-zweit);
  font-size: 1.4rem;
  margin-bottom: 2rem;
}
.fliesstext__absender > p:last-child { margin-bottom: 0; }

.fliesstext table { border-collapse: collapse; width: 100%; margin-bottom: 2.4rem; }
@media screen and (width <= 760px) {
  .fliesstext table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .fliesstext th, .fliesstext td { min-width: 14rem; }
}
.fliesstext th, .fliesstext td {
  border-bottom: 1px solid var(--farbe-linie);
  padding: 1.2rem 1.2rem 1.2rem 0;
  text-align: left;
  vertical-align: top;
  font: 400 1.5rem/1.6 Inter, sans-serif;
  color: var(--farbe-fliess);
}
.fliesstext th { font-weight: 600; color: var(--farbe-tinte); }

.formularseite {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12rem 0 10rem;
}
.formularkarte {
  width: calc(100% - 4rem);
  max-width: 42rem;
  margin: 0 auto;
}
.formularkarte--breit { max-width: 56rem; }

.formularkarte__titel {
  letter-spacing: -.14rem;
  font: 800 3.2rem/1.1 Inter, sans-serif;
  color: var(--farbe-tinte);
  text-align: center;
}
.formularkarte__text {
  color: var(--farbe-fliess);
  font: 400 1.6rem/1.6 Inter, sans-serif;
  text-align: center;
  margin-top: 1.2rem;
}

.feldgruppe { margin-top: 2rem; }
.feldgruppe__marke {
  display: block;
  font: 600 1.4rem/1.4 Inter, sans-serif;
  color: var(--farbe-tinte);
  margin-bottom: .8rem;
}
.feld {
  width: 100%;
  padding: 1.3rem 2.4rem;
  border: 1px solid var(--farbe-linie);
  border-radius: 0;
  background: var(--farbe-weiss);
  letter-spacing: -.02em;
  font: 600 1.7rem/1.41 Inter, sans-serif;
  color: var(--farbe-tinte);
  transition: border-color var(--dauer-35) var(--kurve-weich);
}
.feld::placeholder { color: var(--farbe-text-zweit); font-weight: 400; }

@media (hover: hover) { .feld:hover { border-color: var(--farbe-text-blass); } }
.feld:focus { outline: none; border-color: var(--farbe-tinte); }
.feld:focus-visible { outline: 2px solid var(--farbe-tinte); outline-offset: 0; }

.feldauswahl { position: relative; }
select.feld {
  cursor: pointer;
  appearance: none;
  padding-right: 5.6rem;
  min-height: 5.1rem;
  text-overflow: ellipsis;
}
select.feld option { color: var(--farbe-tinte); font-weight: 600; }
.feldauswahl:has(option[value=""]:checked) select.feld {
  color: var(--farbe-text-zweit);
  font-weight: 400;
}
.feldauswahl__pfeil {
  position: absolute;
  top: 50%; right: 2.2rem;
  width: 2rem; height: 2rem;
  transform: translateY(-50%);
  color: var(--farbe-text-zweit);
  pointer-events: none;
  transition: color var(--dauer-35) var(--kurve-weich);
}
.feldauswahl__pfeil svg { width: 100%; height: 100%; display: block; }
.feldauswahl:has(select.feld:focus) .feldauswahl__pfeil { color: var(--farbe-tinte); }
@media (hover: hover) { .feldauswahl:hover .feldauswahl__pfeil { color: var(--farbe-tinte); } }
textarea.feld { min-height: 12rem; resize: vertical; font-weight: 400; }

.feldreihe { display: flex; gap: 1.2rem; }
.feldreihe > * { flex: 1; min-width: 0; }
@media screen and (width <= 560px) { .feldreihe { flex-direction: column; } }

.formularkarte .knopf { width: 100%; margin-top: 2.4rem; }
.formularkarte .knopf__innen { width: 100%; justify-content: center; }

.trennzeile {
  display: flex; align-items: center; gap: 1.6rem;
  margin: 2.8rem 0;
  color: var(--farbe-text-zweit);
  font: 500 1.3rem/1 Inter, sans-serif;
}
.trennzeile::before, .trennzeile::after {
  content: ""; flex: 1; height: 1px; background: var(--farbe-linie);
}

.formularfuss {
  text-align: center;
  margin-top: 2.4rem;
  color: var(--farbe-text-zweit);
  font: 400 1.5rem/1.6 Inter, sans-serif;
}
.formularfuss a { color: var(--farbe-violett-link); text-decoration: underline; text-underline-offset: .3rem; }

.kleingedrucktes {
  color: var(--farbe-text-stumm);
  font: 400 1.3rem/1.55 Inter, sans-serif;
  text-align: center;
  margin-top: 2rem;
}
.kleingedrucktes a { color: inherit; text-decoration: underline; text-underline-offset: .3rem; }

.hinweisstreifen {
  border: 0;
  background: var(--farbe-flaeche);
  border-radius: .5rem;
  padding: 1.6rem 2rem;
  margin-top: 2.4rem;
  color: var(--farbe-text-zweit);
  font: 400 1.35rem/1.5 Inter, sans-serif;
  text-align: center;
}

.schritte { padding-bottom: 10rem; }
.schritt {
  display: grid;
  gap: 2rem 4rem;
  padding: 5rem 0;
  align-items: start;
}
@media screen and (width >= 1025px) { .schritt { grid-template-columns: 8rem 1fr 1fr; padding: 7rem 0; } }

.schritt__zahl {
  font: 800 3.2rem/1 Inter, sans-serif;
  color: var(--farbe-text-blass);
  letter-spacing: -.14rem;
}
.schritt__titel {
  letter-spacing: -.1rem;
  font: 800 2.6rem/1.15 Inter, sans-serif;
  color: var(--farbe-tinte);
}
@media screen and (width >= 1025px) { .schritt__titel { font-size: 3.2rem; } }
.schritt__text {
  color: var(--farbe-fliess);
  font: 400 1.7rem/1.6 Inter, sans-serif;
}
.schritt__text p + p { margin-top: 1.4rem; }
.schritt__marke {
  display: inline-block;
  margin-top: 1.6rem;
  padding: .5rem 1.2rem;
  border-radius: .8rem;
  background: var(--farbe-flaeche);
  color: var(--farbe-text-zweit);
  font: 600 1.3rem/1.4 Inter, sans-serif;
}

.referenzliste {
  display: grid;
  gap: 2rem;
  padding-bottom: 6rem;
}
@media screen and (width >= 700px)  { .referenzliste { grid-template-columns: repeat(2, 1fr); } }
@media screen and (width >= 1200px) { .referenzliste { grid-template-columns: repeat(3, 1fr); } }

.referenz {
  border: 0;
  border-radius: .8rem;
  overflow: hidden;
  background: var(--farbe-flaeche);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dauer-kurz) var(--kurve-weich),
              transform  var(--dauer-kurz) var(--kurve-weich);
}
@media (hover: hover) {
  .referenz:hover { background: var(--farbe-flaeche-karte); }
}
.referenz__bild {
  aspect-ratio: 16/10;
  background: var(--farbe-weiss);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.referenz__bild img {
  width: 38%;
  height: auto;
  max-width: none;
  display: block;
  transition: transform var(--dauer-4) var(--kurve-feder);
}
@media (hover: hover) { .referenz:hover .referenz__bild img { transform: scale(1.08); } }
.referenz__bild--violett { background: var(--farbe-violett-blass); }
.referenz__bild--cyan    { background: var(--farbe-cyan-blass); }
.referenz__bild--gelb    { background: var(--farbe-gelb-blass); }
.referenz__innen { padding: 3.2rem; flex: 1; display: flex; flex-direction: column; }
.referenz__kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.beispielmarke {
  flex-shrink: 0;
  padding: .4rem 1rem;
  border-radius: .8rem;
  background: var(--farbe-flaeche);
  color: var(--farbe-text-zweit);
  font: 700 1.1rem/1.3 Inter, sans-serif;
  letter-spacing: .06rem;
  text-transform: uppercase;
}
.beispielhinweis {
  margin-bottom: 4rem;
  padding: 1.6rem 2rem;
  border-radius: .3rem;
  border: 1px solid var(--farbe-linie);
  color: var(--farbe-text-zweit);
  font: 400 1.5rem/1.6 Inter, sans-serif;
}
.beispielhinweis strong { color: var(--farbe-tinte); font-weight: 700; }
.beispiele__fuss { margin-top: 4rem; display: flex; justify-content: center; }
.beispiele__fuss .knopf { max-width: 100%; }
.beispiele__fuss .knopf__innen { white-space: normal; text-align: center; }

.referenz__gewerk {
  color: var(--farbe-text-zweit);
  font: 600 1.3rem/1.4 Inter, sans-serif;
  margin-bottom: .8rem;
}
.referenz__titel {
  letter-spacing: -.02em;
  font: 600 2rem/1.1 Inter, sans-serif;
  color: var(--farbe-tinte);
  flex: 1;
}
.referenz__zahl {
  margin-top: 2.4rem;
  color: var(--farbe-fliess);
  font: 400 1.5rem/1.5 Inter, sans-serif;
}
.referenz__zahl strong { color: var(--farbe-tinte); font-weight: 800; }
.referenz a::after { content: ""; position: absolute; inset: 0; }
.referenz { position: relative; }

.nichtgefunden { text-align: center; padding: 16rem 0 14rem; }
.nichtgefunden__zahl {
  font: 800 9rem/1 Inter, sans-serif;
  color: var(--farbe-text-blass);
  letter-spacing: -.5rem;
}
@media screen and (width >= 1025px) { .nichtgefunden__zahl { font-size: 14rem; } }

.fehlerkopf { padding: 3.2rem 2rem 0; }
@media screen and (width >= 1025px) { .fehlerkopf { padding: 7.3rem 0 0 7.2rem; } }

.fehlerkopf .wortmarke { right: 0; }

.fehlerinhalt {
  text-align: center;
  padding: 8rem 0 10rem;
}
@media screen and (width >= 1025px) { .fehlerinhalt { padding: 24.8rem 0 16rem; } }
.danke .fehlerinhalt { padding: 6rem 0 8rem; }
@media screen and (width >= 1025px) { .danke .fehlerinhalt { padding: 14rem 0 12rem; } }
.danke .fehlerinhalt__titel { margin-top: 5rem; }
@media screen and (width >= 1025px) { .danke .fehlerinhalt__titel { margin-top: 8rem; } }

.fehlerinhalt__titel {
  letter-spacing: -.14rem;
  font: 800 4rem/1 Inter, sans-serif;
  color: var(--farbe-tinte);
  overflow-wrap: break-word;
  hyphens: auto;
}
@media screen and (width >= 1025px) { .fehlerinhalt__titel { font-size: 4.8rem; letter-spacing: -.16rem; } }

.fehlerinhalt__text {
  color: var(--farbe-text-zweit);
  font: 400 2rem/1.35 Inter, sans-serif;
  max-width: 46rem;
  margin: 1.8rem auto 0;
}

.fehlerinhalt__zeichen {
  color: var(--farbe-text-stumm);
  display: flex;
  justify-content: center;
  margin: 5.6rem 0;
}
.fehlerinhalt__zeichen svg { display: block; width: 6rem; height: 6rem; }
.fehlerinhalt__bild { display: block; width: 26rem; height: auto; margin: -3rem 0; }
@media screen and (width >= 1025px) { .fehlerinhalt__bild { width: 34rem; margin: -4rem 0; } }

.fehlerinhalt__heim {
  display: inline-flex;
  letter-spacing: -.0352rem;
  font: 700 1.6rem/150% Inter, sans-serif;
  color: var(--farbe-tinte);
  text-decoration: underline;
  text-underline-offset: .4rem;
  transition: opacity var(--dauer-kurz) var(--kurve-weich);
}
@media (hover: hover) { .fehlerinhalt__heim:hover { opacity: .6; } }
.fehlerinhalt__heim:focus-visible { outline: 2px solid var(--farbe-violett); outline-offset: 4px; }

.fehlerwege { margin-top: 3.2rem; }
.fehlerwege ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem 2.8rem;
}
.fehlerwege a {
  color: var(--farbe-text-zweit);
  font: 400 1.5rem/1.5 Inter, sans-serif;
  text-decoration: underline;
  text-underline-offset: .3rem;
  transition: color var(--dauer-kurz) var(--kurve-weich);
}
@media (hover: hover) { .fehlerwege a:hover { color: var(--farbe-tinte); } }
.fehlerwege a:focus-visible { outline: 2px solid var(--farbe-violett); outline-offset: 4px; }

.demo-oben { padding: 12.5rem 0 0; }
@media screen and (width >= 1025px) { .demo-oben { padding: 16rem 0 0; } }

.demo-kopf { max-width: 58rem; margin: 0 auto 3.2rem; text-align: center; }

.demo-hut {
  color: var(--farbe-text-zweit);
  font: 600 1.3rem/1.4 Inter, sans-serif;
  letter-spacing: .12rem;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.demo-titel {
  letter-spacing: -.16rem;
  font: 800 3.6rem/1.06 Inter, sans-serif;
  color: var(--farbe-tinte);
  overflow-wrap: break-word;
  hyphens: auto;
}
@media screen and (width >= 1025px) { .demo-titel { font-size: 5.2rem; letter-spacing: -.26rem; } }

.demo-satz {
  color: var(--farbe-fliess);
  font: 400 1.7rem/1.55 Inter, sans-serif;
  margin-top: 1.6rem;
}

.assistent {
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 3.2rem 2.4rem 3.6rem;
  border: 0;
  border-radius: .8rem;
  background: var(--farbe-flaeche);
}
@media screen and (width >= 1025px) { .assistent { padding: 4.8rem 4.8rem 5.2rem; } }

.assistent .feld { border-color: var(--farbe-text-blass); }
@media (hover: hover) { .assistent .feld:hover { border-color: var(--farbe-text-stumm); } }
.assistent .feld:focus { border-color: var(--farbe-tinte); }

.assistent [hidden] { display: none; }

.assistent__fortschritt { margin-bottom: 2.8rem; }

.assistent__stand {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: 1rem;
  color: var(--farbe-text-zweit);
  font: 600 1.3rem/1.4 Inter, sans-serif;
}
.assistent__stand-name { color: var(--farbe-tinte); text-align: right; }

.assistent__balken {
  height: .6rem;
  border-radius: .8rem;
  background: var(--farbe-flaeche);
  overflow: hidden;
}
.assistent__balken-fueller {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: .8rem;
  background: var(--farbe-tinte);
  transition: width var(--dauer-4) var(--kurve-weich);
}

.assistent__schritt:not([hidden]) + .assistent__schritt:not([hidden]) { margin-top: 3.6rem; }

.assistent__schritt-titel {
  letter-spacing: -.08rem;
  font: 800 2.4rem/1.15 Inter, sans-serif;
  color: var(--farbe-tinte);
}
.assistent__schritt-titel:focus { outline: none; }
.assistent__schritt-titel:focus-visible { outline: 2px solid var(--farbe-violett); outline-offset: 4px; }

.assistent__schritt-text {
  margin-top: .8rem;
  color: var(--farbe-text-zweit);
  font: 400 1.5rem/1.55 Inter, sans-serif;
}

.assistent__fehler {
  margin-top: .8rem;
  color: var(--farbe-fehler);
  font: 500 1.35rem/1.5 Inter, sans-serif;
}
.feld--fehler { border-color: var(--farbe-fehler); }

.assistent__liste {
  margin-top: 2.4rem;
  border-top: 1px solid var(--farbe-linie);
}
.assistent__zeile {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--farbe-linie);
}
.assistent__zeile dt {
  flex: 0 0 auto;
  color: var(--farbe-text-zweit);
  font: 600 1.4rem/1.5 Inter, sans-serif;
}
.assistent__zeile dd {
  min-width: 0;
  text-align: right;
  color: var(--farbe-tinte);
  font: 400 1.5rem/1.5 Inter, sans-serif;
  overflow-wrap: break-word;
}

.assistent__meldung {
  margin-top: 2.4rem;
  padding: 1.4rem 1.6rem;
  border: 0;
  border-radius: .4rem;
  background: var(--farbe-flaeche);
  color: var(--farbe-fliess);
  font: 400 1.45rem/1.6 Inter, sans-serif;
}
.assistent__meldung p + p { margin-top: .6rem; }
.assistent__meldung a {
  color: var(--farbe-violett-link);
  text-decoration: underline;
  text-underline-offset: .3rem;
}

.assistent__navi { display: flex; gap: 1.2rem; margin-top: 3rem; }
.assistent__navi .knopf { flex: 1; min-width: 0; }
.assistent__navi .knopf__innen { padding-left: 2rem; padding-right: 2rem; }

.honigtopf {
  position: absolute;
  left: -9999rem;
  top: 0;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.assistent--danke { text-align: center; }
.assistent--danke:focus { outline: none; }
.assistent__danke-bild { display: block; width: 16rem; height: auto; margin: -2rem auto -1rem; }
@media screen and (width >= 1025px) { .assistent__danke-bild { width: 20rem; margin: -3rem auto -1.5rem; } }
.assistent__danke-titel {
  letter-spacing: -.1rem;
  font: 800 2.8rem/1.15 Inter, sans-serif;
  color: var(--farbe-tinte);
}
.assistent__danke-text {
  margin-top: 1.4rem;
  color: var(--farbe-fliess);
  font: 400 1.6rem/1.65 Inter, sans-serif;
}
.assistent__danke-knoepfe { display: flex; justify-content: center; margin-top: 2.8rem; }

.demo-gespraech { max-width: 62rem; margin: 0 auto 4rem; text-align: center; }
.demo-gespraech__titel {
  letter-spacing: -.12rem;
  font: 800 2.8rem/1.15 Inter, sans-serif;
  color: var(--farbe-tinte);
  overflow-wrap: break-word;
  hyphens: auto;
}
@media screen and (width >= 1025px) { .demo-gespraech__titel { font-size: 4rem; letter-spacing: -.2rem; } }
.demo-gespraech__text {
  margin-top: 1.6rem;
  color: var(--farbe-fliess);
  font: 400 1.7rem/1.6 Inter, sans-serif;
}

.assistent__liste { margin-bottom: 0; }
.assistent__zeile dt,
.assistent__zeile dd { margin: 0; }

.fehlerrecht {
  margin-top: 4.8rem;
  text-align: center;
  color: var(--farbe-text-stumm);
  font: 400 1.3rem/1.6 Inter, sans-serif;
}
.fehlerrecht a { color: inherit; text-decoration: underline; text-underline-offset: .3rem; }
@media (hover: hover) { .fehlerrecht a:hover { color: var(--farbe-tinte); } }
.zitat--referenz { margin: 0; padding: 0 0 6rem; }
@media screen and (width >= 1025px) { .zitat--referenz { margin: 0; padding: 0 0 9rem; } }

.zitat--referenz .zitat__person {
  border: 0;
  border-radius: .8rem;
  background: var(--farbe-flaeche);
}

.zitat--referenz .zitat__raster { min-height: 0; }

.zitat--referenz .zitat__text {
  letter-spacing: -.04em;
  font: 750 2.8rem/1 Inter, sans-serif;
  max-width: 62rem;
  margin: 0 auto;
}
@media screen and (width >= 1025px) { .zitat--referenz .zitat__text { font-size: 3.6rem; } }
.sprungmarke {
  display: block;
  width: 0;
  height: 0;
  scroll-margin-top: 12rem;
}
@media screen and (width >= 1025px) { .sprungmarke { scroll-margin-top: 15rem; } }
@media screen and (width >= 1441px) { .sprungmarke { scroll-margin-top: 16rem; } }
@media screen and (width <= 900px) {
  .fliesstext table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
}