:root {

  --glanz-1: #6f9fd8;
  --glanz-2: #3f71ad;
  --glanz-3: #9db6db;
  --glanz-4: #5168aa;
  --schwung: cubic-bezier(0.22, 1, 0.36, 1);
}

body { overflow-x: clip; }
.nordlicht {
  position: absolute;
  top: -5rem; bottom: 0;
  left: 50%; width: 100vw; margin-left: -50vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(168deg, #d8e5f5 0%, #e7eff9 24%, #f4f7fc 50%, #ffffff 76%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 97%);
}
.nordlicht span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.nordlicht span:nth-child(1) {
  width: 54vw; height: 46vw; left: -14vw; top: -12vw;
  background: radial-gradient(circle, var(--glanz-1) 0%, transparent 64%);
  opacity: .8;
}
.nordlicht span:nth-child(2) {
  width: 48vw; height: 42vw; right: -12vw; top: -14vw;
  background: radial-gradient(circle, var(--glanz-3) 0%, transparent 64%);
  opacity: .85;
}
.nordlicht span:nth-child(3) {
  width: 44vw; height: 38vw; left: 22vw; top: 2vw;
  background: radial-gradient(circle, var(--glanz-4) 0%, transparent 68%);
  opacity: .34;
}
.nordlicht span:nth-child(4) {
  width: 36vw; height: 32vw; left: -4vw; top: 10vw;
  background: radial-gradient(circle, var(--glanz-2) 0%, transparent 68%);
  opacity: .4;
}
.held { position: relative; isolation: isolate; }
@media (prefers-reduced-motion: no-preference) {
  .nordlicht span:nth-child(1) { animation: treiben-a 26s var(--ease) infinite alternate; }
  .nordlicht span:nth-child(2) { animation: treiben-b 32s var(--ease) infinite alternate; }
  .nordlicht span:nth-child(3) { animation: treiben-c 38s var(--ease) infinite alternate; }
  .nordlicht span:nth-child(4) { animation: treiben-a 44s var(--ease) infinite alternate-reverse; }
}
@keyframes treiben-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 4vw, 0) scale(1.14); }
}
@keyframes treiben-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7vw, 5vw, 0) scale(1); }
}
@keyframes treiben-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4vw, -6vw, 0) scale(1.2); }
}
@media (prefers-reduced-motion: no-preference) {
  .held__text > *, .held__karten > .hkarte { animation: einsetzen .8s var(--schwung) both; }
  .held__text > h1        { animation-delay: .05s; }
  .held__text > .lead     { animation-delay: .16s; }
  .held__text > .held__knoepfe { animation-delay: .26s; }
  .held__text > .fussnotiz     { animation-delay: .34s; }
  .held__karten > .hkarte:nth-child(1) { animation-delay: .22s; }
  .held__karten > .hkarte:nth-child(2) { animation-delay: .32s; }
}
@keyframes einsetzen {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .raster,
    .ablauf > h2,
    .wechsel,
    .spurkopf,
    .buehne__text,
    .unterbau__kopf,
    .wenn__tafel,
    .termin__text,
    .termin__formular {
      animation: setzen linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
    .buehne .toastbild,
    .buehne .pop,
    .buehne .notiz,
    .buehne .punkte {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    .unterbau__raster li {
      animation: setzen linear both;
      animation-timeline: view();
    }
    .unterbau__raster li:nth-child(1) { animation-range: entry 6%  cover 26%; }
    .unterbau__raster li:nth-child(2) { animation-range: entry 10% cover 32%; }
    .unterbau__raster li:nth-child(3) { animation-range: entry 14% cover 38%; }
    .schritte li {
      animation: auftauchen linear both;
      animation-timeline: view();
    }
    .schritte li:nth-child(1) { animation-range: entry 6%  cover 26%; }
    .schritte li:nth-child(2) { animation-range: entry 10% cover 32%; }
    .schritte li:nth-child(3) { animation-range: entry 14% cover 38%; }
    .wechsel__bild img {
      animation: heranziehen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }
}
@keyframes auftauchen {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes setzen {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes heranziehen {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@supports (animation-timeline: scroll()) {
  .kopf {
    animation: kopf-absetzen linear both;
    animation-timeline: scroll();
    animation-range: 0 140px;
  }
}
@keyframes kopf-absetzen {
  from { box-shadow: 0 1px 0 rgba(23, 56, 95, 0); background-color: rgba(255, 255, 255, .72); }
  to   { box-shadow: 0 6px 20px -14px rgba(23, 56, 95, .5); background-color: rgba(255, 255, 255, .93); }
}

.knopf { position: relative; overflow: hidden; }
.knopf--voll::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.55em;
  transition: transform .32s var(--schwung);
}
.knopf--voll:hover::after { transform: translateX(3px); }
.knopf--voll::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .knopf--voll:hover::before { animation: schimmer .7s var(--ease) both; }
}
@keyframes schimmer {
  to { transform: translateX(120%); }
}
.knopf--rand { transition: border-color .25s, background-color .25s, transform .25s var(--schwung); }
.knopf--rand:hover { transform: translateY(-1px); }
.knopf--rand:active { transform: translateY(1px); }
.hkarte:active { transform: translateY(0); border-color: var(--blau); }

.schritte li {
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--rand-fein);
  border-top: 0;
  border-radius: 8px;
  padding: 1.6rem 1.5rem 1.7rem;
  box-shadow: 0 1px 2px rgba(23, 56, 95, .05);
  overflow: hidden;
  transition: transform .35s var(--schwung), box-shadow .35s var(--schwung);
}
.schritte li:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -22px rgba(23, 56, 95, .45), 0 2px 6px -3px rgba(23, 56, 95, .16);
}
.schritte li::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--rand);
}
.schritte li::after {
  content: "";
  position: absolute; left: 0; top: 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--blau-tief), var(--glanz-1));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--schwung);
}
.schritte li:hover::after { transform: scaleX(1); }
.schritte__zahl { font-weight: 700; }
.punkte li::before {
  border: 0;
  background: linear-gradient(135deg, var(--blau-tief), var(--glanz-1));
  box-shadow: 0 0 0 3px var(--blau-flaeche);
}
.wenn .punkte li::before, .termin .punkte li::before {
  background: linear-gradient(135deg, #fff, var(--glanz-3));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}

.raster h2, .ablauf h2, .wechsel__text h2,
.wenn h2, .termin h2, .koennen h2, .portal h2 { position: relative; }
.raster h2::before, .ablauf h2::before, .wechsel__text h2::before,
.wenn h2::before, .termin h2::before,
.koennen h2::before, .portal h2::before {
  content: "";
  display: block;
  width: 2.5rem; height: 3px;
  margin-bottom: 1.1rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blau-tief), var(--glanz-1));
}
.wenn h2::before, .termin h2::before {
  background: linear-gradient(90deg, #fff, var(--glanz-3));
}
.wechsel__bild { overflow: hidden; border-radius: 6px; }
.wechsel__bild img {
  display: block;
  transition: transform .9s var(--schwung);
}
.wechsel:hover .wechsel__bild img { transform: scale(1.025); }
.band--grund { position: relative; }
.band--grund::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 5rem;
  background: linear-gradient(180deg, var(--flaeche), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wenn__bild {
      animation: wandern linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes wandern {
  from { transform: scale(1.12) translate3d(1.5%, 0, 0); }
  to   { transform: scale(1) translate3d(-1.5%, 0, 0); }
}

.termin { position: relative; overflow: hidden; isolation: isolate; }
.termin::before {
  content: "";
  position: absolute; z-index: -1;
  width: 60rem; height: 60rem;
  left: -18rem; top: -26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 159, 216, .3) 0%, transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .termin::before { animation: treiben-b 34s var(--ease) infinite alternate; }
}
.termin input, .termin textarea {
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.termin input:hover, .termin textarea:hover { border-color: rgba(255, 255, 255, .72); }
.termin input:focus-visible, .termin textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
}
.marke img { transition: transform .5s var(--schwung); }
.marke:hover img { transform: rotate(-8deg) scale(1.06); }
.kopf__nav a, .kopf__still, .fuss a { position: relative; }
.kopf__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--schwung);
}
.kopf__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.raster__kopf { align-self: start; }
.telefon {
  display: block;
  width: min(100%, 19rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow: visible;
}
.t-korpus  { fill: var(--blau-tief); }
.t-tasten circle { fill: rgba(255, 255, 255, .42); }
.t-anzeige { fill: rgba(255, 255, 255, .16); }
.t-muschel { fill: var(--glanz-1); }
.t-buegel  { fill: var(--glanz-1); }
.t-schnur {
  fill: none; stroke: var(--glanz-2); stroke-width: 4; stroke-linecap: round;
}
@media (prefers-reduced-motion: no-preference) {
  .t-hoerer {
    transform-origin: 110px 70px;
    transform-box: view-box;
    animation: klingeln 2.6s ease-in-out infinite;
  }
}
@keyframes klingeln {
   0%,  62%, 100% { transform: rotate(0deg); }
  66%            { transform: rotate(-2.5deg) translateY(-1px); }
  70%            { transform: rotate(2.5deg); }
  74%            { transform: rotate(-2deg); }
  78%            { transform: rotate(1.5deg); }
  82%            { transform: rotate(0deg); }
}
.telefon__wellen path {
  fill: none;
  stroke: var(--glanz-2);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0;
  transform-origin: 182px 70px;
  transform-box: view-box;
}
@media (prefers-reduced-motion: no-preference) {
  .telefon__wellen path { animation: schallen 2.6s ease-out infinite; }
  .telefon__wellen path:nth-child(2) { animation-delay: .18s; }
  .telefon__wellen path:nth-child(3) { animation-delay: .36s; }
}
@media (prefers-reduced-motion: reduce) {
  .telefon__wellen path { opacity: .45; }
  .telefon__wellen path:nth-child(2) { opacity: .3; }
  .telefon__wellen path:nth-child(3) { opacity: .18; }
}
@keyframes schallen {
   0%  { opacity: 0;   transform: scale(.72); }
  14%  { opacity: .75; }
  46%  { opacity: 0;   transform: scale(1.06); }
 100%  { opacity: 0;   transform: scale(1.06); }
}

#sicherheit { position: relative; overflow: hidden; }
#sicherheit > .raster { position: relative; z-index: 1; }
.netz {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;

  mask-image: radial-gradient(54% 108% at 13% 74%, #000 0%, #000 30%, transparent 68%);
}
.netz__ruhe line {
  stroke: var(--blau); stroke-width: 1; opacity: .16;
}
.netz__puls line {
  stroke: var(--blau-text); stroke-width: 1.8; opacity: 0;
  stroke-dasharray: 7 100;
  stroke-dashoffset: 107;
}
.netz__knoten circle { fill: var(--blau); opacity: .32; }
@media (prefers-reduced-motion: no-preference) {
  .netz__puls line { animation: signal 12s linear infinite; }
  .netz__knoten circle {
    transform-origin: center;
    transform-box: fill-box;
    animation: knoten-pochen 6.6s ease-in-out infinite;
  }
}
@keyframes signal {
   0%  { opacity: 0;   stroke-dashoffset: 107; }
   3%  { opacity: .85; }
  17%  { opacity: .85; stroke-dashoffset: 0; }
  21%  { opacity: 0;   stroke-dashoffset: 0; }
 100%  { opacity: 0;   stroke-dashoffset: 0; }
}
@keyframes knoten-pochen {
  0%, 100% { opacity: .28; transform: scale(1); }
  50%      { opacity: .6;  transform: scale(1.45); }
}
.netz__puls line:nth-child(1) { animation-delay: 0.00s; }
.netz__puls line:nth-child(2) { animation-delay: 0.40s; }
.netz__puls line:nth-child(3) { animation-delay: 0.80s; }
.netz__puls line:nth-child(4) { animation-delay: 1.20s; }
.netz__puls line:nth-child(5) { animation-delay: 1.60s; }
.netz__puls line:nth-child(6) { animation-delay: 2.00s; }
.netz__puls line:nth-child(7) { animation-delay: 2.40s; }
.netz__puls line:nth-child(8) { animation-delay: 2.80s; }
.netz__puls line:nth-child(9) { animation-delay: 3.20s; }
.netz__puls line:nth-child(10) { animation-delay: 3.60s; }
.netz__puls line:nth-child(11) { animation-delay: 4.00s; }
.netz__puls line:nth-child(12) { animation-delay: 4.40s; }
.netz__puls line:nth-child(13) { animation-delay: 4.80s; }
.netz__puls line:nth-child(14) { animation-delay: 5.20s; }
.netz__puls line:nth-child(15) { animation-delay: 5.60s; }
.netz__puls line:nth-child(16) { animation-delay: 6.00s; }
.netz__puls line:nth-child(17) { animation-delay: 6.40s; }
.netz__puls line:nth-child(18) { animation-delay: 6.80s; }
.netz__puls line:nth-child(19) { animation-delay: 7.20s; }
.netz__puls line:nth-child(20) { animation-delay: 7.60s; }
.netz__puls line:nth-child(21) { animation-delay: 8.00s; }
.netz__puls line:nth-child(22) { animation-delay: 8.40s; }
.netz__puls line:nth-child(23) { animation-delay: 8.80s; }
.netz__puls line:nth-child(24) { animation-delay: 9.20s; }
.netz__puls line:nth-child(25) { animation-delay: 9.60s; }
.netz__puls line:nth-child(26) { animation-delay: 10.00s; }
.netz__puls line:nth-child(27) { animation-delay: 10.40s; }
.netz__puls line:nth-child(28) { animation-delay: 10.80s; }
.netz__puls line:nth-child(29) { animation-delay: 11.20s; }
.netz__puls line:nth-child(30) { animation-delay: 11.60s; }
.netz__knoten circle:nth-child(1) { animation-delay: 0.00s; }
.netz__knoten circle:nth-child(2) { animation-delay: 0.36s; }
.netz__knoten circle:nth-child(3) { animation-delay: 0.72s; }
.netz__knoten circle:nth-child(4) { animation-delay: 1.08s; }
.netz__knoten circle:nth-child(5) { animation-delay: 1.44s; }
.netz__knoten circle:nth-child(6) { animation-delay: 1.80s; }
.netz__knoten circle:nth-child(7) { animation-delay: 2.16s; }
.netz__knoten circle:nth-child(8) { animation-delay: 2.52s; }
.netz__knoten circle:nth-child(9) { animation-delay: 2.88s; }
.netz__knoten circle:nth-child(10) { animation-delay: 3.24s; }
.netz__knoten circle:nth-child(11) { animation-delay: 3.60s; }
.netz__knoten circle:nth-child(12) { animation-delay: 3.96s; }
.netz__knoten circle:nth-child(13) { animation-delay: 4.32s; }
.netz__knoten circle:nth-child(14) { animation-delay: 4.68s; }
.netz__knoten circle:nth-child(15) { animation-delay: 5.04s; }
.netz__knoten circle:nth-child(16) { animation-delay: 5.40s; }
.netz__knoten circle:nth-child(17) { animation-delay: 5.76s; }
.netz__knoten circle:nth-child(18) { animation-delay: 6.12s; }

.koennen__raster li {
  transition: transform .35s var(--schwung), box-shadow .35s var(--schwung),
              border-color .35s;
}
.koennen__raster li:hover {
  transform: translateY(-3px);
  border-color: var(--rand);
  box-shadow: 0 18px 34px -22px rgba(23, 56, 95, .45), 0 2px 6px -3px rgba(23, 56, 95, .16);
}
.koennen__zeichen { transition: color .35s, transform .35s var(--schwung); }
.koennen__raster li:hover .koennen__zeichen {
  color: var(--blau-tief);
  transform: scale(1.08);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .koennen__kopf, .portal__text, .portal__liste {
      animation: setzen linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
    .koennen__raster li {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 30%;
    }
  }
}