.hero__zeile { display: grid; justify-items: center; }
.hero__zeile > * { grid-area: 1 / 1; }
.hero__zeile > :not(.ist-an) { visibility: hidden; }
.hero__genre {
  margin: clamp(16px, 2vw, 28px) 0 0;
  font-size: clamp(19px, 1.95vw, 30px);
  line-height: 0;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.85));
}
.genre__svg { display: block; height: 1.08em; width: auto; overflow: visible; }

.explore {
  position: absolute;
  z-index: 12;

  right: calc(clamp(30px, 6.5vw, 140px) + clamp(20px, 3vw, 60px));

  top: 22vh;
  --k: clamp(230px, min(32vh, 23vw), 380px);
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2vh, 22px);

  animation: fadeIn 1.4s 2.2s ease both;
}
.explore__knopf {
  position: relative;
  display: block;
  width: var(--k);
  height: var(--k);
  border-radius: 50%;
  color: #E5C48A;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.explore__teilchen {
  position: absolute;
  left: -40%; top: -40%;
  width: 180%; height: 180%;
  pointer-events: none;
  opacity: .8;
}
.explore__rad {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;

  filter: drop-shadow(0 0 3px rgba(0,0,0,.85)) drop-shadow(0 0 12px rgba(0,0,0,.45));
}
.explore__linie { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .9; }
.explore__linie--fein { opacity: .62; }

.explore__ebene { will-change: transform; transform-origin: 50% 50%; }

.explore__kessel { animation: kessel 22s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes kessel {
  0%   { transform: rotate(0deg); }
  24%  { transform: rotate(118deg); }
  32%  { transform: rotate(123deg); }
  36%  { transform: rotate(120deg); }
  64%  { transform: rotate(262deg); }
  72%  { transform: rotate(266deg); }
  100% { transform: rotate(360deg); }
}
.explore__kugelbahn { animation: kugel 9s cubic-bezier(.3,.1,.25,1) infinite; }
@keyframes kugel {
  0%   { transform: rotate(0deg); }
  70%  { transform: rotate(-322deg); }
  100% { transform: rotate(-360deg); }
}
.explore__kugel { fill: #F2DDB0; }

.explore__schrift { position: absolute; inset: 0; pointer-events: none; }
.explore__buchstabe {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--display);
  font-size: calc(22px * var(--s, 1));
  line-height: 1;
  color: #F2DDB0;
  white-space: pre;
  text-shadow: 0 0 3px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.45);

  transform-origin: 0 0;
  will-change: transform;
}
.explore__punkt { color: #C9A16A; }
.explore__mitte { fill: rgba(8, 8, 10, .35); stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; transition: transform .6s cubic-bezier(.2,.9,.25,1); }
.explore__play  { fill: none; stroke: #F2DDB0; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .5s ease, transform .6s cubic-bezier(.2,.9,.25,1); }
.explore__knopf:hover .explore__mitte,
.explore__knopf:focus-visible .explore__mitte { transform: scale(1.08); }
.explore__knopf:hover .explore__play,
.explore__knopf:focus-visible .explore__play { fill: #F2DDB0; }
.explore__knopf:focus-visible { box-shadow: 0 0 0 2px var(--logo); }

.explore__knopf.is-gewaehlt :is(.explore__rad, .explore__schrift) {
  scale: .86; opacity: 0;
  transition: scale .6s cubic-bezier(.6,0,.4,1), opacity .6s cubic-bezier(.6,0,.4,1);
}

.explore__dienste { display: flex; gap: 14px; align-items: center; }
.dienst { display: block; line-height: 0; border-radius: 8px; }
.dienst img { height: 44px; width: auto; display: block; }
.dienst:focus-visible { outline: 2px solid var(--logo); outline-offset: 3px; }

.schleier {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: -webkit-backdrop-filter .95s cubic-bezier(.4,0,.2,1), backdrop-filter .95s cubic-bezier(.4,0,.2,1);
}
.schleier::before, .schleier::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .95s cubic-bezier(.4,0,.2,1); }
.schleier::before { background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(242,221,176,.38) 0%, rgba(229,196,138,.16) 32%, rgba(8,8,10,0) 70%); }
.schleier::after  { background: #0A0A0C; transition-delay: .35s; }
.schleier.is-an { -webkit-backdrop-filter: blur(26px) saturate(1.15); backdrop-filter: blur(26px) saturate(1.15); }
.schleier.is-an::before { opacity: 1; }
.schleier.is-an::after { opacity: .92; }

.schleier--auf { -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }
.schleier--auf::after { opacity: .92; transition-delay: 0s; }
.schleier--auf.is-an { -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); transition-duration: 1.2s; }
.schleier--auf.is-an::before { opacity: 0; }
.schleier--auf.is-an::after { opacity: 0; transition-duration: 1s; }

@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .hero .hero__center { padding-top: clamp(70px, 8vh, 110px); align-content: start; }
  .explore {
    left: 0; right: 0; margin: 0 auto; width: max-content;
    top: 40vh;
    --k: clamp(260px, 36vw, 360px);
  }
}

@media (max-width: 760px), (max-height: 560px) {
  .explore {
    position: relative; right: auto; bottom: auto; left: auto; top: auto; transform: none;
    margin: 2px auto 34px;
    --k: min(78vw, 320px);
  }
  .dienst img { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .explore, .explore__kessel, .explore__kugelbahn { animation: none !important; }
  .explore__buchstabe { will-change: auto; }
}

.wegpunkte { display: grid; justify-items: center; gap: 9px; width: 12px; pointer-events: none; }
.wegpunkte i {
  display: block; width: 3px; height: 3px; border-radius: 50%;
  background: #E5C48A; opacity: .18;
  animation: wegpunkt 2.8s ease-in-out infinite;
}
.wegpunkte i:nth-child(2) { animation-delay: .18s; width: 3.5px; height: 3.5px; }
.wegpunkte i:nth-child(3) { animation-delay: .36s; width: 4px; height: 4px; }
.wegpunkte i:nth-child(4) { animation-delay: .54s; width: 4.5px; height: 4.5px; }
.wegpunkte i:nth-child(5) { animation-delay: .72s; width: 5px; height: 5px; }
@keyframes wegpunkt { 0%, 100% { opacity: .18; } 30% { opacity: .95; } 60% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .wegpunkte i { animation: none; opacity: .5; } }

.hero .hero__cue.wegpunkte { animation: none; font-size: 0; letter-spacing: 0; bottom: 26px; }

.wegpunkte--start { position: absolute; left: 50%; top: calc(100vh - 7vh - 125px); top: calc(100svh - 7vh - 125px); transform: translateX(-50%); z-index: 45; }

.wegpunkte--zwischen { display: none; }
@media (max-width: 1100px) {
  .wegpunkte--zwischen { display: grid; position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 45; }
}
@media (max-width: 1100px) {
  .wegpunkte--start { top: calc(100svh - 150px - 60px); }
}
@media (max-width: 760px) {
  .wegpunkte--zwischen { bottom: 165px; z-index: 45; }
  .wegpunkte--start { top: calc(100svh - 165px - 60px); }
}