/* KONTUR CMS 0.6.0.11 – weiche, wandernde Nordlichtflächen im Footer
   Keine harte Leuchtkante am unteren Rand: fünf getrennte Lichtfelder driften
   hinter dem Footer-Inhalt und verändern dabei Position, Form und Helligkeit. */

.footer[data-kontur-footer="1"]{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  background:var(--footer-bg,#030b18)!important;
}

.footer[data-kontur-footer="1"] > .wrap{
  position:relative;
  z-index:4;
}

.footer[data-kontur-footer="1"] .footer-bottom{
  position:relative!important;
  z-index:4!important;
  background:transparent!important;
  box-shadow:none!important;
}

.kontur-footer-aurora{
  position:absolute;
  inset:-8% -5% -5%;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:var(--kontur-aurora-intensity,.58);
  transform:translateZ(0);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 15%,#000 34%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 15%,#000 34%,#000 100%);
}

/* Sehr weiche, wandernde Lichtschleier im Hintergrund. */
.kontur-footer-aurora::before{
  content:"";
  position:absolute;
  inset:-28% -24% -22%;
  z-index:0;
  background:
    linear-gradient(112deg,
      transparent 8%,
      color-mix(in srgb,var(--aurora-1) 12%,transparent) 24%,
      transparent 39%,
      color-mix(in srgb,var(--aurora-3) 14%,transparent) 55%,
      transparent 69%,
      color-mix(in srgb,var(--aurora-5) 10%,transparent) 84%,
      transparent 96%),
    linear-gradient(72deg,
      transparent 18%,
      color-mix(in srgb,var(--aurora-2) 10%,transparent) 36%,
      transparent 50%,
      color-mix(in srgb,var(--aurora-4) 12%,transparent) 68%,
      transparent 84%);
  filter:blur(38px) saturate(1.08);
  opacity:.72;
  animation:kontur-aurora-curtain var(--aurora-curtain-duration,13.5s) ease-in-out infinite alternate;
  will-change:transform,opacity;
}

/* Leichte Abdunklung oben hält Logo/Text ruhig und gut lesbar. */
.kontur-footer-aurora::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--footer-bg) 92%,transparent) 0%,
    color-mix(in srgb,var(--footer-bg) 58%,transparent) 28%,
    color-mix(in srgb,var(--footer-bg) 18%,transparent) 58%,
    transparent 88%);
}

.kontur-aurora-layer{
  position:absolute;
  z-index:1;
  display:block;
  left:var(--aurora-left,0%);
  bottom:var(--aurora-bottom,-48%);
  width:var(--aurora-width,64%);
  height:var(--aurora-height,92%);
  border-radius:50%;
  color:var(--aurora-1);
  opacity:var(--aurora-opacity,.78);
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb,currentColor 92%,transparent) 0%,
    color-mix(in srgb,currentColor 66%,transparent) 18%,
    color-mix(in srgb,currentColor 30%,transparent) 42%,
    transparent 72%);
  filter:blur(var(--aurora-blur,40px)) saturate(1.16);
  mix-blend-mode:screen;
  transform-origin:50% 68%;
  will-change:transform,opacity;
}

/* Jede Fläche bekommt einen nach oben auslaufenden, weichen Lichtvorhang. */
.kontur-aurora-layer::before{
  content:"";
  position:absolute;
  left:19%;
  top:-92%;
  width:58%;
  height:162%;
  border-radius:48% 52% 44% 56% / 68% 58% 42% 32%;
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb,currentColor 7%,transparent) 26%,
    color-mix(in srgb,currentColor 22%,transparent) 60%,
    color-mix(in srgb,currentColor 40%,transparent) 86%,
    transparent 100%);
  filter:blur(28px);
  opacity:.68;
  transform:rotate(var(--aurora-wisp-rotate,-8deg));
}

.aurora-one{
  --aurora-left:-24%;--aurora-bottom:-52%;--aurora-width:78%;--aurora-height:104%;
  --aurora-opacity:.84;--aurora-blur:46px;--aurora-wisp-rotate:-10deg;
  color:var(--aurora-1);
  animation:kontur-aurora-one var(--aurora-d1,10.7s) ease-in-out infinite alternate;
}
.aurora-two{
  --aurora-left:2%;--aurora-bottom:-56%;--aurora-width:70%;--aurora-height:100%;
  --aurora-opacity:.80;--aurora-blur:44px;--aurora-wisp-rotate:8deg;
  color:var(--aurora-2);
  animation:kontur-aurora-two var(--aurora-d2,8.8s) ease-in-out infinite alternate;
}
.aurora-three{
  --aurora-left:34%;--aurora-bottom:-49%;--aurora-width:58%;--aurora-height:91%;
  --aurora-opacity:.76;--aurora-blur:40px;--aurora-wisp-rotate:-6deg;
  color:var(--aurora-3);
  animation:kontur-aurora-three var(--aurora-d3,7.8s) ease-in-out infinite alternate;
}
.aurora-four{
  --aurora-left:61%;--aurora-bottom:-60%;--aurora-width:49%;--aurora-height:100%;
  --aurora-opacity:.72;--aurora-blur:42px;--aurora-wisp-rotate:10deg;
  color:var(--aurora-4);
  animation:kontur-aurora-four var(--aurora-d4,6.8s) ease-in-out infinite alternate;
}
.aurora-five{
  --aurora-left:18%;--aurora-bottom:-66%;--aurora-width:43%;--aurora-height:95%;
  --aurora-opacity:.68;--aurora-blur:36px;--aurora-wisp-rotate:-12deg;
  color:var(--aurora-5);
  animation:kontur-aurora-five var(--aurora-d5,6s) ease-in-out infinite alternate;
}

@keyframes kontur-aurora-curtain{
  0%{transform:translate3d(-5%,2%,0) scale(1.03);opacity:.50}
  48%{transform:translate3d(1%,-3%,0) scale(1.08);opacity:.82}
  100%{transform:translate3d(6%,1%,0) scale(1.04);opacity:.60}
}

@keyframes kontur-aurora-one{
  0%{transform:translate3d(-7vw,22px,0) scale(.92,1.03) rotate(-2deg);opacity:.72}
  35%{transform:translate3d(2vw,-9px,0) scale(1.08,.95) rotate(1deg);opacity:.94}
  70%{transform:translate3d(9vw,7px,0) scale(.98,1.09) rotate(-1deg);opacity:.80}
  100%{transform:translate3d(4vw,-17px,0) scale(1.12,.98) rotate(2deg);opacity:.96}
}
@keyframes kontur-aurora-two{
  0%{transform:translate3d(8vw,-8px,0) scale(1.06,.94) rotate(2deg);opacity:.78}
  34%{transform:translate3d(-3vw,16px,0) scale(.94,1.08) rotate(-2deg);opacity:.96}
  69%{transform:translate3d(-10vw,-13px,0) scale(1.10,.96) rotate(1deg);opacity:.82}
  100%{transform:translate3d(1vw,4px,0) scale(.98,1.04) rotate(-1deg);opacity:.92}
}
@keyframes kontur-aurora-three{
  0%{transform:translate3d(-4vw,12px,0) scale(.96,1.10) rotate(-1deg);opacity:.76}
  31%{transform:translate3d(7vw,-19px,0) scale(1.12,.92) rotate(2deg);opacity:.95}
  66%{transform:translate3d(12vw,8px,0) scale(.92,1.06) rotate(-2deg);opacity:.80}
  100%{transform:translate3d(-1vw,-10px,0) scale(1.06,.98) rotate(1deg);opacity:.92}
}
@keyframes kontur-aurora-four{
  0%{transform:translate3d(7vw,-16px,0) scale(1.08,.96) rotate(1deg);opacity:.72}
  37%{transform:translate3d(-4vw,10px,0) scale(.93,1.08) rotate(-2deg);opacity:.94}
  73%{transform:translate3d(-11vw,-5px,0) scale(1.06,.94) rotate(2deg);opacity:.76}
  100%{transform:translate3d(2vw,-21px,0) scale(.98,1.05) rotate(-1deg);opacity:.90}
}
@keyframes kontur-aurora-five{
  0%{transform:translate3d(-8vw,-6px,0) scale(.92,1.08) rotate(-2deg);opacity:.68}
  35%{transform:translate3d(3vw,-23px,0) scale(1.12,.90) rotate(2deg);opacity:.90}
  70%{transform:translate3d(11vw,10px,0) scale(.96,1.10) rotate(-1deg);opacity:.74}
  100%{transform:translate3d(-2vw,-15px,0) scale(1.06,.96) rotate(1deg);opacity:.86}
}

/* Sobald JS/WAAPI übernimmt, bleiben die CSS-Keyframes nur als Fallback erhalten. */
.kontur-footer-aurora.is-waapi .kontur-aurora-layer{animation:none!important}

@media(max-width:900px){
  .kontur-footer-aurora{inset:-4% -14% -4%;opacity:var(--kontur-aurora-intensity,.58)}
  .kontur-aurora-layer{filter:blur(34px) saturate(1.12)}
  .aurora-one{--aurora-width:104%;--aurora-left:-44%}
  .aurora-two{--aurora-width:92%;--aurora-left:-8%}
  .aurora-three{--aurora-width:82%;--aurora-left:34%}
  .aurora-four{--aurora-width:72%;--aurora-left:66%}
  .aurora-five{--aurora-width:64%;--aurora-left:12%}
}

/* Bei reduzierten Bewegungen bleibt der Effekt sichtbar, läuft aber deutlich ruhiger. */
@media(prefers-reduced-motion:reduce){
  .kontur-footer-aurora::before{animation-duration:28s!important}
  .kontur-aurora-layer{animation-duration:24s!important}
}