:root {
  --galerie-rand: 2.4%;
  --leisten: 4.5rem;
}

:root[data-farbwelt='wechsel'] {
  --blau:       #0057ff;
  --blau-tief:  #0046d1;
  --blau-zart:  #e9f0ff;
  --blau-linie: #c2d6ff;
  --blau-auf-nacht: #7ea6ff;
  --nacht:      #0c1a3a;

  --titel:      #1b2946;

  --grund:      #f8f7f4;
  --karte:      #ffffff;
  --karte-zart: #fbfaf7;

  --tinte:      #2b3752;
  --leise:      #5f6b82;

  --linie:      #e8e5df;
  --linie-stark: #d8d4cc;
}

:root[data-farbwelt='wechsel'] .einstieg .titel-xl {
  color: var(--blau);
}
:root[data-farbwelt='wechsel'] .einstieg .marke {
  color: var(--titel);
}
:root[data-farbwelt='wechsel'] .vollbild:not(.vollbild--hell) .titel-xl { color: #fff; }
:root[data-farbwelt='wechsel'] .vollbild:not(.vollbild--hell) .marke { color: rgb(255 255 255 / .82); }

.vollbild {
  position: relative;
  min-height: calc(100svh - var(--leisten, 4.5rem));
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; isolation: isolate;
}

.vollbild > .vergleich {
  position: absolute; inset: 0; z-index: 0;
  border: 0; border-radius: 0;
}
.vollbild > .vergleich img { height: 100%; scale: 1.02; }
.vollbild > .vergleich .vergleich__schild { top: 1.25rem; }
.vollbild > .vergleich .vergleich__knauf { width: 3.25rem; height: 3.25rem; }

.vollbild > .vergleich::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgb(6 12 24 / .92) 0%, rgb(6 12 24 / .78) 34%, rgb(6 12 24 / .26) 66%, rgb(6 12 24 / .04) 92%),
    linear-gradient(to right, rgb(6 12 24 / .62), rgb(6 12 24 / 0) 62%);
}

.vollbild__innen {
  position: relative; z-index: 2;
  width: calc(100% - 2 * var(--galerie-rand)); max-width: 2400px;
  margin: 0 auto; padding-block: clamp(2rem, 5vw, 4rem) 0;
  pointer-events: none;
}
.vollbild__innen a, .vollbild__innen button { pointer-events: auto; }
.vollbild__text > * { max-width: 46rem; }
.vollbild__text .titel-xl { max-width: 34ch; }
.vollbild--hell .vollbild__text .titel-xl { max-width: 30ch; }
.vollbild .marke { color: rgb(255 255 255 / .82); }
.vollbild .titel-xl { color: #fff; }
.vollbild .vorspann { color: rgb(255 255 255 / .92); }
.vollbild .knopf--rand { border-color: rgb(255 255 255 / .55); color: #fff; }
.vollbild .knopf--rand:hover { background: #fff; border-color: #fff; color: var(--tinte); }

.vollbild__leiste {
  position: relative; z-index: 2;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid rgb(255 255 255 / .22);
  background: rgb(6 12 24 / .55);
  backdrop-filter: blur(6px);
}
.vollbild__leiste .leisteninhalt {
  width: calc(100% - 2 * var(--galerie-rand)); max-width: 2400px;
  margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
}
@media (max-width: 72rem) { .vollbild__leiste .leisteninhalt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 52rem) {
  .vollbild__leiste .leisteninhalt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vollbild__leiste .preispille { grid-column: 1 / -1; }
}
.vollbild__leiste .streifen__punkt { border-right-color: rgb(255 255 255 / .2); color: #fff; }
.vollbild__leiste .streifen__nr { color: #fff; opacity: .75; }
.vollbild__leiste .preispille {
  background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .3);
}
.vollbild__leiste .preispille__wort { color: rgb(255 255 255 / .8); }
.vollbild__leiste .preispille__zahl { color: #fff; }
@media (max-width: 52rem) {
  .vollbild__leiste .streifen__punkt { border-bottom: 1px solid rgb(255 255 255 / .2); }
  .vollbild__leiste .streifen__punkt:nth-child(2n) { border-right: 0; }
}

@media (max-height: 46rem) {
  .vollbild { min-height: auto; padding-top: clamp(1.5rem, 5vh, 3rem); }
  .vollbild__innen { padding-block: clamp(1.25rem, 4vh, 2.5rem) 0; }
  .vollbild .titel-xl { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
  .vollbild__leiste { margin-top: clamp(1.25rem, 4vh, 2rem); }
}

.galerieblock .vergleich { border-radius: var(--radius-karte) var(--radius-karte) 0 0; border-bottom: 0; }

.vollbild--hell { justify-content: flex-start; }
.vollbild--hell .vollbild__leiste { margin-top: auto; }

.vollbild--hell { --hell-luft: clamp(3rem, 8vh, 7rem); }
.vollbild--hell .vollbild__innen { padding-block: var(--hell-luft) 0; }
.vollbild--hell .vollbild__leiste { margin-bottom: var(--hell-luft); }

.vollbild--hell > .vergleich::after { content: none; }

.vollbild--hell .vergleich__davor::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right,
    rgb(255 255 255 / .78) 0,
    rgb(255 255 255 / .66) calc(var(--galerie-rand) + 24rem),
    rgb(255 255 255 / .4) calc(var(--galerie-rand) + 42rem),
    rgb(255 255 255 / 0) calc(var(--galerie-rand) + 58rem));
}

.vollbild--hell .marke { color: var(--tinte); }
.vollbild--hell .titel-xl { color: var(--blau); }
.vollbild--hell .vorspann { color: var(--tinte); }
.vollbild--hell .knopf--rand {
  border-color: rgb(27 41 70 / .5); color: var(--tinte);
  background: rgb(255 255 255 / .55);
}
.vollbild--hell .knopf--rand:hover { background: #fff; border-color: var(--blau); color: var(--blau); }

.vollbild--hell > .vergleich .vergleich__schild { display: none; }

.vollbild--hell .vollbild__leiste {
  border-top: 0; background: transparent; backdrop-filter: none;
}
.vollbild--hell .vollbild__leiste .leisteninhalt { gap: 1rem; align-items: stretch; }
.vollbild--hell .vollbild__leiste .streifen__punkt {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: 1.125rem 1.5rem;
  box-shadow: 0 14px 36px rgb(8 14 26 / .22);
  color: var(--tinte);
}
.vollbild--hell .vollbild__leiste .streifen__nr {
  font-family: 'Archivo', 'Archivo Ersatz', sans-serif;
  font-weight: 800; letter-spacing: -.01em;
  color: var(--blau); opacity: 1;
}
.vollbild--hell .vollbild__leiste .streifen__wort { margin-top: .3rem; }

.vollbild--hell .streifen__zeichen { flex: none; display: block; color: var(--blau); width: 2rem; height: 2rem; }
.vollbild--hell .streifen__zeichen svg { width: 100%; height: 100%; display: block; }
.vollbild--hell .streifen__stapel { display: flex; flex-direction: column; gap: .125rem; }
.vollbild--hell .vollbild__leiste .streifen__wort { margin: 0; }

.vollbild--hell .vollbild__leiste .preispille {
  margin: -.625rem 0; padding: 1.375rem 2rem;
  align-items: center; justify-content: flex-start; gap: 1.125rem;
  background: var(--blau); border-color: var(--blau);
  border-radius: var(--radius-karte);
  box-shadow: 0 16px 40px rgb(8 14 26 / .32);
}
.vollbild--hell .vollbild__leiste .preispille .streifen__zeichen { color: #fff; width: 2.75rem; height: 2.75rem; }
.vollbild--hell .vollbild__leiste .preispille__wort {
  color: rgb(255 255 255 / .85);
  font-size: 1.0625rem; letter-spacing: .04em;
}
.vollbild--hell .vollbild__leiste .preispille__zahl { color: #fff; font-size: 2.5rem; line-height: 1.05; }
@media (max-width: 52rem) {
  .vollbild--hell .vollbild__leiste .streifen__punkt,
  .vollbild--hell .vollbild__leiste .streifen__punkt:nth-child(2n) {
    border: 1px solid var(--linie);
  }
}

.vollbild--kompakt .vollbild__leiste .leisteninhalt {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem;
}

.vollbild--kompakt .schrittfeld {
  display: flex; align-items: center;
  background: rgb(255 255 255 / .7);
  backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / .75);
  border-radius: var(--radius-karte);
  padding: .375rem;
  box-shadow: 0 14px 36px rgb(8 14 26 / .16);
}
.vollbild--kompakt .schrittfeld .streifen__punkt {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: .625rem 1.25rem;
}
.vollbild--kompakt .schrittfeld .streifen__punkt + .streifen__punkt {
  border-left: 1px solid rgb(27 41 70 / .18);
}

@media (max-width: 64rem) {
  .vollbild--stapel {
    min-height: auto;
    display: flex; flex-direction: column; justify-content: flex-start;
    background: var(--grund);
    --hell-luft: clamp(1.5rem, 4vh, 3rem);
  }
  .vollbild--stapel > .vergleich {
    position: relative; inset: auto; order: 2;
    width: calc(100% - 2 * var(--galerie-rand));
    margin-inline: auto;
    border-radius: var(--radius-karte);
  }
  .vollbild--stapel > .vergleich img { height: auto; aspect-ratio: 16 / 9; }
  .vollbild--stapel .vergleich__davor::after { content: none; }
  .vollbild--stapel .vollbild__innen { order: 1; padding-block: var(--hell-luft); }
  .vollbild--stapel .vollbild__leiste { order: 3; margin-block: 1.25rem var(--hell-luft); }
}
@media (max-width: 40rem) {
  .vollbild--stapel .schrittfeld { flex-direction: column; align-items: stretch; width: 100%; }
  .vollbild--stapel .schrittfeld .streifen__punkt + .streifen__punkt {
    border-left: 0; border-top: 1px solid rgb(27 41 70 / .18);
  }
  .vollbild--stapel .vollbild__leiste .preispille {
    width: 100%; justify-content: center;
    white-space: normal; text-align: left;
  }
}