:root {
  --e-kurve: cubic-bezier(0.16, 1, 0.3, 1);
  --e-kurve-io: cubic-bezier(0.76, 0, 0.24, 1);
  --e-r: 18px;
  --e-himmel: #e9f1f9;
  --e-blau-lkw: #2b45b8;
  --e-platzhalter: #dfe6ee;
}

.eh h1,
.em h2,
.ez h2,
.el h2,
.eg h2,
.ea h2,
.ep h2,
.er h2,
.es h2,
.cw--tag h2 {
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.ez h2,
.el h2,
.eg h2,
.ea h2,
.ep h2,
.er h2,
.cw--tag h2 {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
}

.e-fortschritt {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: 3px;
  background: linear-gradient(90deg, var(--orange-600), var(--orange-500) 60%, #ffab5e);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

html.e-an,
html.e-an body {
  overscroll-behavior-x: none;
}

.e-an .kopf.is-geklebt {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .e-an .kopf.is-geklebt {
    background: var(--white);
  }
}

[data-magnet] {
  translate: var(--mx, 0) var(--my, 0);
  transition: translate 420ms var(--e-kurve), background-color var(--tempo) var(--kurve),
    border-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.e-an [data-auf] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms var(--e-kurve), transform 1100ms var(--e-kurve);
  transition-delay: var(--v, 0ms);
}

.e-an [data-auf].ist-da {
  opacity: 1;
  transform: none;
}

.e-an [data-auf="maske"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1300ms var(--e-kurve-io);
  transition-delay: var(--v, 0ms);
}

.e-an [data-auf="maske"] img {
  transform: scale(1.25);
  transition: transform 1800ms var(--e-kurve);
  transition-delay: var(--v, 0ms);
}

.e-an [data-auf="maske"].ist-da {
  clip-path: inset(0 0 0 0);
}

.e-an [data-auf="maske"].ist-da img {
  transform: scale(1);
}

.e-an .einblenden {
  translate: 0 32px;
  transition: opacity 900ms var(--e-kurve), translate 1100ms var(--e-kurve);
}

.e-an .einblenden.ist-sichtbar {
  translate: 0 0;
}

.e-wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.e-wort > span {
  display: inline-block;
}

.e-an .e-teilen .e-wort > span {
  transform: translateY(108%);
  transition: transform 1000ms var(--e-kurve);
  transition-delay: calc(var(--w, 0) * 55ms + var(--v, 0ms));
}

.e-an .e-teilen.ist-da .e-wort > span {
  transform: none;
}

.e-an .e-bildmaske {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1300ms var(--e-kurve-io);
}

.e-an .e-bildmaske img {
  transform: scale(1.2);
  transition: transform 1800ms var(--e-kurve);
}

.e-an .e-bildmaske.ist-da {
  clip-path: inset(0 0 0 0);
}

.e-an .e-bildmaske.ist-da img {
  transform: scale(1);
}

.eh {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: max(40rem, calc(100svh - 7rem));
  padding: clamp(6rem, 14vh, 9rem) 0 clamp(3.5rem, 8vh, 5.5rem);
  color: var(--white);
  background: var(--white);
}

.eh__rahmen {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--e-platzhalter);
  transform-origin: 50% 0;
}

.eh__bild {
  position: absolute;
  inset: -6% 0;
  will-change: transform;
}

.eh__bild picture,
.eh__bild img {
  display: block;
  width: 100%;
  height: 100%;
}

.eh__bild img {
  object-fit: cover;
  object-position: 30% 20%;
}

.eh__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(11, 33, 56, 0.86) 0%, rgba(11, 33, 56, 0.55) 34%, rgba(11, 33, 56, 0) 62%),
    linear-gradient(90deg, rgba(11, 33, 56, 0.5) 0%, rgba(11, 33, 56, 0) 55%);
}

.eh__inhalt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.eh__titel {
  margin: 0 0 var(--s5);
  color: var(--white);
  font-size: clamp(2.75rem, 6.4vw, 6.25rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.eh__dach {
  position: relative;
  display: block;
  margin-bottom: var(--s5);
  padding-left: 2.75rem;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
}

.eh__dach::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2rem;
  height: 2px;
  background: var(--orange-500);
  transform-origin: 0 50%;
}

.eh__zeile {
  display: block;
  overflow: hidden;
  padding-bottom: 0.07em;
}

.eh__zeile > span {
  display: inline-block;
}

.eh__titel em {
  position: relative;
  display: inline-block;
  font-style: normal;
}

.eh__titel em::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.12em;
  bottom: 0.02em;
  height: 0.075em;
  border-radius: 0.04em;
  background: var(--orange-500);
  transform-origin: 0 50%;
}

.eh__lead {
  max-width: 34rem;
  margin: 0 0 var(--s6);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.eh__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.eh__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 1.375rem 0.5rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--white);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  transition: background-color 300ms var(--e-kurve), border-color 300ms var(--e-kurve);
}

.eh__tel:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--white);
  color: var(--white);
}

.eh__tel small {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
}

.eh__tel-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--orange-600);
}

.eh__tel-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.eh__marker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.eh__marker li {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.eh__marker svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--orange-500);
}

.eh__rechner {
  border-radius: var(--e-r);
  box-shadow: 0 30px 80px rgba(11, 33, 56, 0.35);
}

.eh__rechner-marke {
  display: inline-flex;
  margin: 0 0 var(--s3) !important;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--orange-050);
  color: var(--orange-700) !important;
  font-size: 0.875rem !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.eh__weiter {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  translate: -50% 0;
}

.eh__weiter:hover {
  color: var(--white);
}

.eh__weiter i {
  position: relative;
  display: block;
  width: 2px;
  height: 2.5rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}

.eh__weiter i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange-500);
  animation: e-weiter 2s var(--e-kurve-io) infinite;
}

@media (max-height: 61.999rem) {
  .eh__weiter {
    display: none;
  }
}

@keyframes e-weiter {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

.e-an .eh:not(.ist-bereit) .eh__bild picture {
  transform: scale(1.06);
}

.e-an .eh.ist-bereit .eh__bild picture {
  animation: eh-zoom 1800ms var(--e-kurve) both;
}

.e-an .eh:not(.ist-bereit) .eh__schleier,
.e-an .eh:not(.ist-bereit) .eh__dach,
.e-an .eh:not(.ist-bereit) .eh__lead,
.e-an .eh:not(.ist-bereit) .eh__aktion,
.e-an .eh:not(.ist-bereit) .eh__marker,
.e-an .eh:not(.ist-bereit) .eh__weiter {
  opacity: 0;
}

.e-an .eh.ist-bereit .eh__schleier {
  animation: e-ein 1200ms var(--e-kurve) 300ms both;
}

.e-an .eh:not(.ist-bereit) .eh__zeile > span {
  transform: translateY(110%);
}

.e-an .eh.ist-bereit .eh__zeile > span {
  animation: eh-zeile 1200ms var(--e-kurve) both;
}

.e-an .eh.ist-bereit .eh__zeile:nth-of-type(2) > span { animation-delay: 600ms; }
.e-an .eh.ist-bereit .eh__zeile:nth-of-type(3) > span { animation-delay: 720ms; }
.e-an .eh.ist-bereit .eh__zeile:nth-of-type(4) > span { animation-delay: 840ms; }

.e-an .eh:not(.ist-bereit) .eh__titel em::after {
  transform: scaleX(0);
}

.e-an .eh.ist-bereit .eh__titel em::after {
  animation: eh-strich 900ms var(--e-kurve) 1450ms both;
}

.e-an .eh.ist-bereit .eh__dach {
  animation: e-hoch 900ms var(--e-kurve) 450ms both;
}

.e-an .eh.ist-bereit .eh__dach::before {
  animation: eh-strich 900ms var(--e-kurve) 550ms both;
}

.e-an .eh.ist-bereit .eh__lead { animation: e-hoch 1000ms var(--e-kurve) 950ms both; }
.e-an .eh.ist-bereit .eh__aktion { animation: e-hoch 1000ms var(--e-kurve) 1080ms both; }
.e-an .eh.ist-bereit .eh__marker { animation: e-hoch 1000ms var(--e-kurve) 1180ms both; }
.e-an .eh.ist-bereit .eh__weiter { animation: e-ein 1000ms var(--e-kurve) 1800ms both; }

.e-an .eh:not(.ist-bereit) .eh__rechner {
  opacity: 0;
  transform: translateY(60px);
}

.e-an .eh.ist-bereit .eh__rechner {
  animation: eh-rechner 1300ms var(--e-kurve) 850ms both;
}

@keyframes eh-zoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@keyframes eh-zeile {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

@keyframes eh-strich {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes eh-rechner {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes e-hoch {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes e-ein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 61.999rem) {
  .eh__inhalt {
    grid-template-columns: 1fr;
  }

  .eh__rechner {
    max-width: 30rem;
  }

  .eh__weiter {
    display: none;
  }
}

@media (max-width: 47.999rem) {
  .eh {
    display: block;
    min-height: 0;
    padding: 0 0 var(--s7);
    color: var(--ink);
  }

  .eh__rahmen {
    bottom: auto;
    height: max(34rem, calc(100svh - 8.5rem));
  }

  .eh__bild img {
    object-position: 50% 15%;
  }

  .eh__inhalt {
    gap: 0;
  }

  .eh__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: max(34rem, calc(100svh - 8.5rem));
    padding: 6rem 0 4.5rem;
    color: var(--white);
  }

  .eh__titel {
    font-size: clamp(2.5rem, 12.5vw, 3.75rem);
  }

  .eh__lead {
    margin-bottom: var(--s5);
    font-size: 1.0625rem;
  }

  .eh__marker {
    display: none;
  }

  .eh__aktion {
    margin-bottom: 0;
  }

  .eh__rechner {
    margin-top: -2.5rem;
  }
}

.em {
  padding: clamp(6rem, 13vw, 11rem) 0;
  background: var(--white);
}

.em__marke {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s6);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-600);
}

.em__marke::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: currentColor;
}

.em__text {
  max-width: 23em;
  margin: 0;
  color: var(--navy-800);
  font-size: clamp(1.75rem, 3.7vw, 3.375rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.em__text em {
  font-style: normal;
  color: var(--orange-600);
}

.e-an .em__text .e-fw {
  opacity: 0.14;
  transition: opacity 260ms linear;
}

.e-an .em__text .e-fw.an {
  opacity: 1;
}

.ez {
  padding: clamp(5rem, 10vw, 8rem) 0 0;
  overflow: hidden;
  background: var(--sand-100);
}

.ez__kopf {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.ez__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ez__fakt {
  position: relative;
  padding-top: var(--s5);
}

.ez__fakt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--navy-800);
  transform-origin: 0 50%;
}

.e-an .ez__fakt::before {
  transform: scaleX(0);
  transition: transform 1400ms var(--e-kurve) calc(var(--v, 0ms) + 150ms);
}

.e-an .ez__fakt.ist-da::before {
  transform: scaleX(1);
}

.ez__wert {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  margin-bottom: var(--s3);
}

.ez__zahl {
  color: var(--navy-800);
  font-size: clamp(3.75rem, 7vw, 7rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.ez__einheit {
  color: var(--orange-700);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ez__text {
  display: block;
  max-width: 24ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.e-odo {
  display: inline-flex;
}

.e-odo__ziffer {
  display: inline-block;
  height: 0.92em;
  overflow: hidden;
}

.e-odo__band {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--start, 0) * -0.92em));
}

.e-odo__band span {
  display: block;
  height: 0.92em;
  line-height: 0.92;
}

.e-odo.laeuft .e-odo__band {
  transform: translateY(calc(var(--ziel, 0) * -0.92em));
  transition: transform var(--dauer, 1800ms) cubic-bezier(0.2, 0.75, 0.1, 1);
}

@media (max-width: 61.999rem) {
  .ez__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--s7);
  }
}

@media (max-width: 29.999rem) {
  .ez__liste {
    grid-template-columns: 1fr;
  }
}

.ez__band {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding: 1.375rem 0;
  border-top: 1px solid var(--sand-200);
  background: var(--white);
  overflow: hidden;
}

.ez__laufband {
  display: flex;
  width: max-content;
  will-change: transform;
}

.ez__laufband span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--navy-800);
  font-size: clamp(1.375rem, 2.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.ez__laufband span::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin: 0 1.1em;
  border-radius: 50%;
  background: var(--orange-500);
}

.el {
  padding: clamp(5rem, 9vw, 7.5rem) 0;
  background: var(--white);
}

.el__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s5) var(--s7);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.el__kopf .lead {
  max-width: 38rem;
  margin-bottom: 0;
}

.el__steuer {
  display: flex;
  align-items: center;
  gap: var(--s5);
  white-space: nowrap;
}

.el__zaehler {
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.el__zaehler b {
  color: var(--navy-800);
  font-size: 1.25rem;
}

.el__leiste {
  position: relative;
  display: block;
  width: 8rem;
  height: 2px;
  background: var(--line);
}

.el__leiste i {
  position: absolute;
  inset: 0;
  background: var(--orange-500);
  transform: scaleX(0.111);
  transform-origin: 0 50%;
}

.el__knoepfe {
  display: flex;
  gap: var(--s2);
}

.el__knopf {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px solid var(--navy-800);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-800);
  cursor: pointer;
  transition: background-color 250ms var(--e-kurve), color 250ms var(--e-kurve), opacity 250ms var(--e-kurve);
}

.el__knopf svg {
  width: 1.25rem;
  height: 1.25rem;
}

.el__knopf--zurueck svg {
  transform: rotate(180deg);
}

.el__knopf:hover:not(:disabled),
.el__knopf:focus-visible {
  background: var(--navy-800);
  color: var(--white);
}

.el__knopf:disabled {
  opacity: 0.3;
  cursor: default;
}

.el__spur {
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0 max(var(--rand), (100vw - var(--breite)) / 2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  scrollbar-width: none;
}

.el__spur::-webkit-scrollbar {
  display: none;
}

.el__karte {
  flex: none;
  width: min(80vw, 24rem);
  height: clamp(24rem, 56vh, 34rem);
  scroll-snap-align: start;
}

.el__karte--auftakt {
  width: min(86vw, 36rem);
}

.el__karte a {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--e-r);
  background: var(--e-platzhalter);
  color: var(--white);
  text-decoration: none;
  isolation: isolate;
}

.el__bild {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.el__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(calc(var(--x, 0) * -5%)) scale(1.14);
  transition: transform 1200ms var(--e-kurve);
}

.el__karte a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 33, 56, 0.1) 0%, rgba(11, 33, 56, 0) 30%, rgba(11, 33, 56, 0.9) 100%);
  transition: opacity 600ms var(--e-kurve);
}

.el__karte a:hover .el__bild img,
.el__karte a:focus-visible .el__bild img {
  transform: translateX(calc(var(--x, 0) * -5%)) scale(1.22);
}

.el__nr {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.el__plakette {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: var(--orange-600);
  font-size: 0.875rem;
  font-weight: 700;
}

.el__koerper {
  position: absolute;
  inset: auto 0 0;
  display: block;
  padding: 1.5rem 5.25rem 1.5rem 1.5rem;
}

.el__koerper h3 {
  margin: 0 0 0.5rem;
  color: var(--white);
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.el__karte--auftakt .el__koerper h3 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
}

.el__koerper > span {
  display: block;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.el__pfeil {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--orange-600);
  transition: transform 500ms var(--e-kurve), background-color 300ms var(--e-kurve);
}

.el__pfeil svg {
  width: 1.25rem;
  height: 1.25rem;
}

.el__karte a:hover .el__pfeil,
.el__karte a:focus-visible .el__pfeil {
  transform: rotate(-45deg) scale(1.08);
  background: var(--orange-500);
}

.el--quer {
  padding: 0;
}

.el--quer .el__bahn {
  height: var(--el-hoehe, auto);
}

.el--quer .el__buehne {
  position: sticky;
  top: var(--kopf-hoehe);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - var(--kopf-hoehe));
  overflow: hidden;
}

.el--quer .el__spur {
  overflow: visible;
  touch-action: pan-y;
  scroll-snap-type: none;
  will-change: transform;
}

.el--quer .el__karte {
  width: clamp(18rem, 25vw, 24rem);
  height: clamp(20rem, 52vh, 32rem);
}

.el--quer .el__karte--auftakt {
  width: clamp(24rem, 38vw, 36rem);
}

@media (max-width: 61.999rem) {
  .el__kopf {
    grid-template-columns: 1fr;
  }

  .el__steuer {
    flex-wrap: wrap;
    gap: var(--s4);
  }

  .el__leiste {
    display: none;
  }

  .el__karte {
    width: min(72vw, 21rem);
    height: clamp(22rem, 54vh, 30rem);
  }

  .el__karte--auftakt {
    width: min(76vw, 30rem);
  }
}

@media (max-width: 23.999rem) {
  .el__steuer .pfeil-link {
    flex-basis: 100%;
  }
}

.cw--tag {
  background: linear-gradient(180deg, var(--white) 0%, var(--e-himmel) 100%);
}

.cw--tag .lead {
  color: var(--muted);
}

.cw--tag .cw__rahmen {
  border: 1px solid #d7e2ee;
  border-radius: var(--e-r);
  background: linear-gradient(180deg, #bcd8f1 0%, #dcebf8 55%, #f1f5f8 100%);
  box-shadow: 0 30px 80px rgba(29, 74, 115, 0.12);
}

.cw--tag .cw-baum { fill: #8fbf96; }
.cw--tag .cw-wand { fill: #fbfaf7; }
.cw--tag .cw-dach { fill: #c9684c; }
.cw--tag .cw-fenster { fill: #8fb1d1; }
.cw--tag .cw-fenster--licht { fill: #b9d3ea; opacity: 1; }
.cw--tag .cw-tuer-haus { fill: var(--navy-600); }
.cw--tag .cw-innen { fill: #4f6c8a; }
.cw--tag .cw-lampe { fill: #fff6dc; opacity: 0.9; }
.cw--tag .cw-torrahmen { fill: #c5d0db; }
.cw--tag .cw-solar { fill: var(--navy-600); stroke: #9fc0de; }
.cw--tag .cw-hallenschild { fill: var(--navy-800); }
.cw--tag .cw-boden { fill: #c8ced5; }
.cw--tag .cw-markierung { stroke: rgba(255, 255, 255, 0.95); }
.cw--tag .cw-ort { fill: var(--navy-800); }

.cw-ort { font-size: 28px; }
.cw-schrift-klein { font-size: 25px; }
.cw-hallenschild { font-size: 24px; letter-spacing: 0.08em; }
.cw-zeittext { font-size: 25px; }
.cw--tag .cw-rahmen { fill: #33475b; }
.cw--tag .cw-kabine { fill: var(--e-blau-lkw); }
.cw--tag .cw-scheibe { fill: #cfe3f5; }
.cw--tag .cw-kabinenstreifen { fill: var(--white); }
.cw--tag .cw-reifen { fill: #26333f; stroke: #3d4c5a; }
.cw--tag .cw-speiche { stroke: #26333f; }
.cw--tag .cw-zeittext { fill: var(--orange-600); }
.cw--tag .cw-sprechblase { fill: rgba(255, 255, 255, 0.92); stroke: var(--orange-500); }

.cw--tag .cw__schritt {
  border-color: #d7e2ee;
  background: var(--white);
}

.cw--tag .cw__schritt p {
  color: var(--muted);
}

.cw--tag .cw__nr {
  background: #e3ebf3;
  color: var(--navy-800);
}

.cw--tag.cw--scroll .cw__schritt.ist-aktiv {
  border-color: var(--orange-500);
  background: #fff6ee;
  box-shadow: 0 10px 30px rgba(242, 118, 12, 0.12);
}

.cw--tag.cw--scroll .cw__schritt.ist-aktiv .cw__nr {
  color: var(--white);
}

.cw--tag .cw__zaehler {
  background: var(--white);
  color: var(--ink);
}

.cw--tag .cw__fortschritt {
  background: #d7e2ee;
}

.eg {
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: var(--white);
}

.eg__kopf {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.eg__paneele {
  display: flex;
  gap: 0.75rem;
  height: clamp(26rem, 64vh, 38rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.eg__paneel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--e-r);
  background: var(--e-platzhalter);
  color: var(--white);
  cursor: pointer;
  transition: flex-grow 900ms var(--e-kurve), clip-path 1300ms var(--e-kurve-io);
  transition-delay: 0ms, var(--v, 0ms);
}

.eg__paneel.ist-offen {
  flex-grow: 3.2;
}

.eg__paneel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eg__paneel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 33, 56, 0.05) 30%, rgba(11, 33, 56, 0.88) 100%);
}

.eg__inhalt {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

.eg__nr {
  display: block;
  margin-bottom: var(--s2);
  color: var(--orange-500);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.eg__inhalt h3 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.375rem, 2.4vw, 2.25rem);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.eg__inhalt p {
  max-width: 30rem;
  margin: var(--s3) 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--e-kurve), transform 700ms var(--e-kurve);
}

.eg__paneel.ist-offen .eg__inhalt p {
  opacity: 1;
  transform: none;
  transition-delay: 250ms;
}

@media (min-width: 62rem) {
  .eg__paneel:not(.ist-offen) .eg__inhalt h3 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 1.5rem;
  }
}

.eg__extras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.eg__extras li {
  display: flex;
  gap: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.eg__extras h3 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
}

.eg__extras p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.eg__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--orange-050);
  color: var(--orange-600);
}

.eg__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

@media (max-width: 61.999rem) {
  .eg__paneele {
    flex-direction: column;
    height: auto;
  }

  .eg__paneel,
  .eg__paneel.ist-offen {
    flex: none;
    height: 22rem;
    cursor: default;
  }

  .eg__inhalt p {
    opacity: 1;
    transform: none;
  }

  .eg__extras {
    grid-template-columns: 1fr;
  }
}

.ea {
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: var(--sand-100);
}

.ea__kopf {
  max-width: 40rem;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.ea__kopf .eyebrow {
  justify-content: center;
}

.ea__strecke {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
}

.ea__strasse {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2.25rem;
  margin-left: -1.125rem;
  border-radius: 1.125rem;
  background:
    linear-gradient(var(--white), var(--white)) 50% 0 / 2px 100% no-repeat,
    #d9dee4;
  background:
    repeating-linear-gradient(180deg, var(--white) 0 14px, transparent 14px 28px) 50% 0 / 2px 100% no-repeat,
    #d9dee4;
}

.ea__spur {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--orange-500);
  transform: scaleY(var(--p, 0));
  transform-origin: 50% 0;
  opacity: 0.9;
}

.ea__lkw {
  position: absolute;
  left: 50%;
  top: 0;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(11, 33, 56, 0.3);
  transform: translateY(var(--lkw-y, 0px)) rotate(90deg);
}

.ea__lkw svg {
  width: 1.75rem;
  height: 1.75rem;
  transform: rotate(-90deg);
}

.ea__etappen {
  position: relative;
  display: grid;
  gap: clamp(3rem, 8vh, 6rem);
  margin: 0;
  padding: 2rem 0;
  list-style: none;
}

.ea__etappe {
  position: relative;
  width: calc(50% - 3.5rem);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border-radius: var(--e-r);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(11, 33, 56, 0.05);
  transition: box-shadow 600ms var(--e-kurve), transform 600ms var(--e-kurve);
}

.ea__etappe:nth-child(even) {
  margin-left: auto;
}

.ea__punkt {
  position: absolute;
  top: 2rem;
  right: -3.5rem;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: -0.625rem;
  border: 3px solid #d9dee4;
  border-radius: 50%;
  background: var(--white);
  transition: border-color 400ms var(--e-kurve), transform 500ms var(--e-kurve);
}

.ea__etappe:nth-child(even) .ea__punkt {
  right: auto;
  left: -3.5rem;
  margin: 0 0 0 -0.625rem;
}

.ea__nr {
  display: block;
  margin-bottom: var(--s2);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 400ms var(--e-kurve);
}

.ea__etappe h3 {
  margin: 0 0 var(--s2);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.02em;
}

.ea__etappe p {
  margin: 0;
  color: var(--muted);
}

.ea__etappe.ist-erreicht {
  box-shadow: 0 24px 60px rgba(11, 33, 56, 0.1);
}

.ea__etappe.ist-erreicht .ea__punkt {
  border-color: var(--orange-500);
  transform: scale(1.25);
}

.ea__etappe.ist-erreicht .ea__nr {
  color: var(--orange-600);
}

html:not(.e-an) .ea__lkw,
html:not(.e-an) .ea__spur {
  display: none;
}

@media (max-width: 47.999rem) {
  .ea__kopf {
    text-align: left;
  }

  .ea__kopf .eyebrow {
    justify-content: flex-start;
  }

  .ea__strasse {
    left: 1.125rem;
  }

  .ea__etappe,
  .ea__etappe:nth-child(even) {
    width: auto;
    margin-left: 3.5rem;
  }

  .ea__punkt,
  .ea__etappe:nth-child(even) .ea__punkt {
    right: auto;
    left: -2.4rem;
    margin: 0 0 0 -0.625rem;
  }
}

.ep {
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: var(--white);
}

.ep__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.ep__kopf .lead {
  margin-bottom: var(--s6);
}

.ep__karte {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--e-r);
  background: var(--sand-100);
}

.ep__karte h3 {
  margin: 0 0 var(--s2);
  font-size: 1.25rem;
}

.ep__karte p {
  color: var(--muted);
}

.ep__faktoren {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ep__faktoren li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--s4);
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
}

.ep__faktoren li:last-child {
  border-bottom: 1px solid var(--line);
}

.ep__nr {
  color: var(--orange-600);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.ep__faktoren h3 {
  margin: 0 0 0.375rem;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  letter-spacing: -0.02em;
}

.ep__faktoren p {
  margin: 0;
  color: var(--muted);
}

@media (min-width: 62rem) {
  .ep__kopf {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 2rem);
  }
}

@media (max-width: 61.999rem) {
  .ep__raster {
    grid-template-columns: 1fr;
  }
}

.er {
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: linear-gradient(180deg, var(--white) 0%, var(--e-himmel) 100%);
}

.e-an .er__routen path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1100ms var(--e-kurve);
  transition-delay: calc(400ms + var(--i) * 140ms);
}

.e-an .er__orte > g,
.e-an .er__ringe circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(0.6);
  transition: opacity 700ms var(--e-kurve), transform 900ms var(--e-kurve);
  transition-delay: calc(900ms + var(--i) * 140ms);
}

.e-an .er__ringe circle {
  transform-box: view-box;
  transform-origin: 260px 250px;
  transform: scale(0.4);
  transition-delay: calc(var(--i) * 160ms);
}

.e-an .er__karte.ist-da .er__routen path {
  stroke-dashoffset: 0;
}

.e-an .er__karte.ist-da .er__orte > g,
.e-an .er__karte.ist-da .er__ringe circle {
  opacity: 1;
  transform: none;
}

.eu-karte .eu-halo {
  stroke: var(--eu-grund, #f4f7fb);
}

.sektion--sand .eu-karte {
  --eu-grund: #f6f3ee;
}

@media (max-width: 61.999rem) {
  .eu-karte {
    display: block;
    max-width: 34rem;
    margin-inline: auto;
  }

  .er__orte text {
    font-size: 21px;
  }

  .er__km text {
    font-size: 18px;
  }

  .er__brueck {
    font-size: 24px;
  }
}

@media (max-width: 29.999rem) {
  .er__orte text {
    font-size: 28px;
  }

  .er__km text {
    font-size: 25px;
  }

  .er__brueck {
    font-size: 30px;
  }
}

@media (min-width: 62rem) and (max-width: 79.999rem) {
  .er__orte text {
    font-size: 19px;
  }

  .er__km text {
    font-size: 19px;
  }

  .er__brueck {
    font-size: 23px;
  }
}

.er__puls {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: e-puls 2.6s var(--e-kurve) infinite;
}

@keyframes e-puls {
  0% { opacity: 0.6; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(2.4); }
}

.es {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(7rem, 16vw, 12rem) 0;
  color: var(--white);
  background: var(--navy-700);
}

.es__bild {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
  will-change: transform;
}

.es__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.es::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(15, 43, 70, 0.9) 0%, rgba(15, 43, 70, 0.7) 50%, rgba(15, 43, 70, 0.35) 100%);
}

.es .eyebrow {
  color: #ffb27a;
}

.es h2 {
  margin: 0 0 var(--s5);
  color: var(--white);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.es__lead {
  max-width: 34rem;
  margin: 0 0 var(--s6);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
}

.es__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s6);
}

.es__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.es__tel:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.es__tel svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--orange-500);
}

.e-an .seitenkopf .lead {
  animation: e-hoch 1000ms var(--e-kurve) 350ms both;
}

.e-an .seitenkopf .krumen {
  animation: e-ein 800ms var(--e-kurve) both;
}

.e-an .karte {
  transition: transform 500ms var(--e-kurve), box-shadow 500ms var(--e-kurve),
    border-color var(--tempo) var(--kurve);
}

.e-an a.karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(11, 33, 56, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .eh__weiter i::after,
  .er__puls {
    animation: none;
  }

  [data-magnet] {
    translate: none;
  }
}

.e-vorhang {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: var(--sand-100);
  pointer-events: none;
}

.e-vorhang::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--navy-800);
}

.e-vorhang__lkw {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3.5rem;
  height: 3.5rem;
  margin-top: -1.75rem;
  color: var(--navy-800);
}

.e-vorhang__lkw svg {
  display: block;
  width: 100%;
  height: 100%;
}

.e-an .e-vorhang.ist-zu {
  display: block;
  animation: e-vorhang-zu 420ms var(--e-kurve-io) both;
}

.e-an .e-vorhang.ist-zu .e-vorhang__lkw {
  animation: e-lkw-quer 900ms var(--e-kurve-io) both;
}

.e-an.e-wechsel .e-vorhang {
  display: block;
  animation: e-vorhang-auf 700ms var(--e-kurve-io) 120ms both;
}

.e-an.e-wechsel .e-vorhang__lkw {
  animation: e-lkw-quer 820ms var(--e-kurve-io) both;
}

@keyframes e-vorhang-zu {
  from { transform: translateY(101%); }
  to { transform: translateY(0); }
}

@keyframes e-vorhang-auf {
  from { transform: translateY(0); }
  to { transform: translateY(-101%); }
}

@keyframes e-lkw-quer {
  from { transform: translateX(-4rem); }
  to { transform: translateX(calc(100vw + 1rem)); }
}

@media print {
  .e-vorhang {
    display: none !important;
  }
}