:root {
  --k2022-black: #000a00;
  --k2022-green: #057a68;
  --k2022-lw: 2px;
}

/* BUTTON */

.np-btn--k2022 {
  position: relative;
  margin: auto;
  padding: 8px 20px;

  background: #e0e0e0;

  border-style: outset;
  border-width: 0.3em;
  border-color: #f5f5f5 #666 #666 #f5f5f5;

  text-transform: uppercase;
  color: var(--k2022-black) !important;

  box-shadow: none;
  white-space: nowrap;
}

.np-btn--k2022:hover {
  background: #bbb;
  color: var(--k2022-black);
}

.np-btn--k2022:active {
  background: #bbb;
  border-style: inset;
  border-color: #888 #eee #eee #888;

  color: var(--k2022-black);

  box-shadow: #000 -1px -1px;
}

/* BANNER */

#banner-k2022 {
  display: flex;
  flex-wrap: wrap;
  gap: 2vh 10vw;
  justify-content: space-between;

  width: 100%;
  height: auto;
  position: relative;
  cursor: default;
  animation: leiste-kampagne 1s 1 cubic-bezier(0.17, 0.67, 0.83, 0.67);
  z-index: 300;

  padding: 2vh 10vw 0 10vw;
  font-size: 20px;
  font-weight: bold;

  box-shadow: #000 0px 2px 30px;
}

.banner-k2022__progress-wrapper {
  /* min-width: 600px; */
  flex-grow: 1;
}

.banner-k2022__link {
  color: #eee;
  margin: auto 0;
}

.banner-k2022__progress-text-1 {
  font-size: 15px;
  text-align: right;
}

.banner-k2022__progress-text-2 {
  margin-top: -1ch;
  margin-left: 7px;
  line-height: 1.3;
}

@media only screen and (max-width: 1050px) {
  .banner-k2022__progress-text-2 {
    margin-top: 0;
  }
}

.banner-k2022__progress-bar-wrapper {
  height: 60px;
  border: 4px #eee solid;
  border-radius: 10px;
  padding: 3px;
}

.banner-k2022__progress-bar {
  width: 5%;
  background: linear-gradient(90deg, #05a189, #01f1cc);
  height: 100%;
  border-radius: 4px;
  padding: 0 10px;
  overflow: hidden;

  animation: show-progress 0.8s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes show-progress {
  from {
    width: 5%;
  }
  to {
    width: calc(100% - var(--progress-value-left) / 1000000 * 100%);
  }
}

.banner-k2022__progress-bar-text {
  line-height: 46px;
  line-break: anywhere;
  width: auto;

  opacity: 0;

  animation: blink-progress 1s;
  animation-delay: 1.3s;
  animation-fill-mode: forwards;
}

@keyframes blink-progress {
  0%,
  10%,
  30%,
  40%,
  60%,
  80% {
    opacity: 0;
    text-shadow: #fff 1px 1px 10px;
  }
  13%,
  43%,
  83%,
  100% {
    opacity: 1;
    text-shadow: none;
  }
}

@media only screen and (max-width: 650px) {
  .banner-k2022__progress-bar-text {
    line-height: 23px;
    line-break: normal;
    font-size: 16px;
    width: 120px;
  }
}

.banner-k2022__button-wrapper {
  display: flex;
  gap: 0 1em;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;

  margin: auto 0 auto 7px;
  align-self: end;
}

@media only screen and (max-width: 943px) {
  .banner-k2022__button-wrapper {
    flex-direction: row;
  }
  .site-main {
    margin-top: 140px;
  }
}

#twingle-widget-banner {
  width: 100%;
}

/* STOERER */

.stoerer--k2022 {
  border-bottom: none !important;
  border-top: none !important;
  filter: initial;
  box-shadow: none;
  background: none;
  position: relative;
}

.stoerer--k2022 * {
  position: relative;
  color: #fff;
}

.stoerer--article--k2022 {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 2em;
}

.stoerer--k2022 .stoerer--k2022__link {
  position: relative;
  grid-column-start: 2;
  display: inline;
  margin: auto;
  color: #eee;
}

.stoerer--k2022 a,
.stoerer--k2022 a:link {
  color: #efefef !important;
  text-decoration: underline;
  background: none;
  font-weight: bold;
}

.stoerer--k2022 a:hover {
  color: #fff;
  background: none;
  text-shadow: rgba(255, 255, 255, 0.5) 1px 1px 10px;
}

.stoerer--k2022::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
      0deg,
      var(--k2022-black),
      var(--k2022-black) var(--k2022-lw),
      var(--k2022-green) var(--k2022-lw),
      var(--k2022-green) calc(2 * var(--k2022-lw))
    ),
    url("data:image/svg+xml,<svg viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='6' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23noiseFilter)'/></svg>"),
    radial-gradient(ellipse, transparent 40%, var(--k2022-black) 100%);
  background-blend-mode: multiply;
  filter: blur(0.3px);
}

.stoerer--k2022 h3,
.stoerer--k2022 h4 {
  color: #fff;
  font-family: "AlapCondensed";
  letter-spacing: -0.01em;
  overflow: hidden;
  line-height: 1;
  animation: 12s linear 0.4s infinite alternate glitchFront;
  filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="turbulence"><feTurbulence type="turbulence" baseFrequency="0 0.02" numOctaves="2" result="noise"></feTurbulence><feDisplacementMap in="SourceGraphic" in2="noise" scale="8"></feDisplacementMap></filter></svg>#turbulence');
}

.stoerer--k2022 h3 {
  font-size: 1.8em !important;
  word-spacing: 0.1em;
}

.stoerer--k2022 h4 {
  font-size: 1.3em !important;
  word-spacing: 0.2em;
  margin-bottom: 1em;
  font-style: italic;
  font-weight: 800 !important;
}

.stoerer--k2022 h3:before,
.stoerer--k2022 h4:before {
  content: attr(title);
  position: absolute;
  animation: 12s linear 0s infinite alternate glitchBefore;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
  text-shadow: -0.2px -0.2px 0px #a00;
}

.stoerer--k2022 h3:after,
.stoerer--k2022 h4:after {
  left: 0;
  content: attr(title);
  position: absolute;
  animation: 12s linear 6s infinite alternate glitchAfter;
  clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  text-shadow: 0.7px 0.3px 0px #06b;
}

@keyframes glitchBefore {
  0%,
  41.8%,
  42.8%,
  79.8%,
  80.8%,
  81.8%,
  82.8%,
  89.9%,
  90.9% {
    transform: translate(0px, 0px) skew(0deg) scaleX(100%);
    text-shadow: -0.2px -0.2px 0px #a00;
    filter: none;
  }
  42%,
  90% {
    transform: translate(-2px, -1px) skew(-5deg) scaleX(100.5%) rotate(-0.5deg);
    text-shadow: -3px -1px 1px #a00;
    filter: blur(1px);
  }
  80%,
  82% {
    transform: translate(2px, 1px) skew(5deg) scaleX(100.5%) rotate(0.5deg);
    text-shadow: 2px 1px 1px #06b;
    filter: blur(0.8px);
  }
}

@keyframes glitchAfter {
  0%,
  41.8%,
  42.8%,
  79.8%,
  80.8%,
  81.8%,
  82.8%,
  89.9%,
  90.9% {
    transform: translate(0px, 0px) skew(0deg) scaleX(100%);
    text-shadow: 0.7px 0.3px 0px #06b;
    filter: none;
  }
  42%,
  90% {
    transform: translate(-2px, -1px) skew(-5deg) scaleX(100.5%) rotate(-0.5deg);
    text-shadow: -3px -1px 1px #a00;
    filter: blur(1px);
  }
  80%,
  82% {
    transform: translate(2px, 1px) skew(5deg) scaleX(100.5%) rotate(0.5deg);
    text-shadow: 2px 1px 1px #06b;
    filter: blur(0.8px);
  }
}

@keyframes glitchFront {
  0%,
  41.8%,
  42.8%,
  81.8%,
  82.8% {
    transform: translate(0px, 0px) skew(0deg) scaleX(100%);
    text-shadow: 0px 0px 0px transparent;
    filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="turbulence"><feTurbulence type="turbulence" baseFrequency="0 0.02" numOctaves="2" result="noise"></feTurbulence><feDisplacementMap in="SourceGraphic" in2="noise" scale="8"></feDisplacementMap></filter></svg>#turbulence');
  }
  42% {
    transform: translate(-2px, 0px) skew(-3deg);
    text-shadow: -3px -1px 1px #d00;
    filter: blur(1px);
  }
  82% {
    transform: translate(2px, 0px) skew(3deg);
    text-shadow: 2px 1px 1px #08d;
    filter: blur(0.8px);
  }
}

#twingle-widget-stoerer {
  grid-column-start: span 2;
}

.stoerer--k2022 #hs {
  margin: 0;
  width: 100%;
  grid-row-start: span 2;
  line-height: 1;
}

@media only screen and (max-width: 959px) {
  .stoerer--k2022 {
    grid-template-columns: min-content auto;
    gap: 0 2em;
  }

  .stoerer--k2022 #hs {
    grid-column-start: span 2;
    grid-row-start: unset;
  }

  .stoerer--k2022 .stoerer--k2022__link {
    margin: auto 0;
  }
}

.stoerer--k2022 p {
  margin-left: 0.25em;
}