/*
  Code and Copyright © 2024+ by KRUG IT.
  You are not permitted to use this code or any part thereof without the express written consent of KRUG IT.
*/
:root {
  --WT: white;
  --back: url(../img/sback.webp);
  --cbck: url(../img/back.webp);
  --bord1: 2px solid rgba(255, 255, 255, 0.55);
  --dbback: #223039;
  --cntb: linear-gradient(to top, #223039, #324b5a);
  --fsky: skyblue;
  --KRSh: rgba(255, 255, 255, 0.55) 0px 0px 2px, rgba(255, 255, 255, 0.55) 0px 0px 2px, rgba(255, 255, 255, 0.55) 0px 0px 2px,
          rgba(255, 255, 255, 0.55) 0px 0px 2px, rgba(255, 255, 255, 0.55) 0px 0px 2px, rgba(255, 255, 255, 0.55) 0px 0px 2px,
          rgba(255, 255, 255, 0.55) 0px 0px 2px, rgba(255, 255, 255, 0.55) 0px 0px 2px, rgba(255, 255, 255, 0.55) 0px 0px 2px,
          rgba(255, 255, 255, 0.55) 0px 0px 2px;
  --KRFt: 34px;
  --ITSh: none;
  --ITFt: 40px;
  --CTSh: rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px,
          rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px,
          rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px,
          rgba(0, 0, 0, 0.55) 0px 0px 1.5px;
  --CTCr: skyblue;
  --MCol: white;
  --T2Cr: rgb(255, 235, 33);
  --Mfil: drop-shadow(0 0 10px skyblue) drop-shadow(0 0 20px skyblue);
  --Mfil: drop-shadow(0 0 10px white) drop-shadow(0 0 20px white);
  --CBSh: none;
  --TiSh: none;
  --perf: skyblue;
  --cfSh: skyblue 0 0 1px, skyblue 0 0 1px, skyblue 0 0 1px, skyblue 0 0 1px, skyblue 0 0 1px,
          skyblue 0 0 1px, skyblue 0 0 1px, skyblue 0 0 1px, skyblue 0 0 1px, skyblue 0 0 1px;
  --tids: none;
  --bscr: rgb(226, 224, 193);
  --setSh: none;
  --setShH: drop-shadow(0 0 2px rgba(255, 255, 255, 0.68)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.68));
  --numbro: opacity(1);
  --sb: skyblue;
}
.light {
  --cntb: linear-gradient(to top, #000, #555);
  --perf: #0d3c5a;
  --cfSh: rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px,
          rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px,
          rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px,
          rgba(0, 0, 0, 0.55) 0px 0px 1.5px;
  --TXTb: bold;
  --back: url(../img/sbackinv.webp);
  --cbck: url(../img/backinv.webp);
  --WT: black;
  --bord1: 2px solid silver;
  --Mfil: drop-shadow(0 0 10px white) drop-shadow(0 0 20px white);
  --tids: drop-shadow(0 0 5px rgba(23, 44, 59, 0.68));
  --T2Cr: rgb(255, 235, 33);
  --CBSh: 0 0 20px rgb(109, 109, 109), 0 0 20px rgb(104, 104, 104), 0 0 20px rgb(161, 161, 161);
  --TiSh: rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px,
          rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px,
          rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 0px 1.5px,
          rgba(0, 0, 0, 0.55) 0px 0px 1.5px;
  --numbr: invert(1) blur(.5px);
  --numbro: opacity(.95);
  --bscr: rgb(84, 118, 141);
  --setSh: drop-shadow(0 0 5px rgba(23, 44, 59, 0.68));
  --setShH: drop-shadow(0 0 2px rgba(135, 207, 235, 0.68)) drop-shadow(0 0 5px rgba(135, 207, 235, 0.68))
            drop-shadow(0 0 5px rgba(135, 207, 235, 0.68)) drop-shadow(0 0 5px rgba(135, 207, 235, 0.68));
  --sb: rgb(255, 115, 0);
}
@-moz-document url-prefix() {
  .light {
      --TXTb: normal;
  }
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
@font-face {
  font-family: "KIT3";
  src: url("../fnt/KIT3.ttf") format("truetype");
}
@font-face {
  font-family: "KIT5";
  src: url("../fnt/KIT5.ttf") format("truetype");
}
html {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  user-select: none;
  min-height: 100vh;
  height: 100vh;
  background: var(--back);
  background-position: center;
  background-size: cover;
  min-width: 315px;
  padding: 5px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: KIT3;
  background-color: #000;
  scroll-behavior: smooth;
  transition: background-image 1s ease;
  overflow-x: hidden;
}
.base {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 50px;
  align-items: center;
  margin-top: 133px;
}
.header {
  display: flex;
  overflow: hidden;
  font-family: KIT5;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--dbback);
  background: var(--cntb);
  padding-right: 10px;
  border-radius: 20px;
  border: var(--bord1);
  backdrop-filter: blur(8px);
  width: fit-content;
  min-width: 300px;
  z-index: 5;
  box-shadow: var(--CBSh);
  transition: all 1s;
  width: 558px;
  max-width: none;
}
.KITLOGO {
  z-index: 8;
}
.logo {
  transform: scale(0.8);
  margin: -10px;
  margin-bottom: -25px;
}
.KITTXT {
  margin-top: -3px;
  font-size: var(--KRFt);
  max-width: fit-content;
  text-wrap: nowrap;
}
.KT {
  text-wrap: nowrap;
  text-shadow: var(--KRSh);
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  font-weight: bold;
  align-items: center;
  margin-top: 20px;
  transition: all 1s;
}
.krg {
  transform: scale(1.02);
  margin-bottom: 2px;
}
KT2 {
  color: rgb(255, 235, 33);
  margin-right: 3px;
  text-shadow: var(--ITSh);
  font-size: var(--ITFt);
}
KT3 {
  color: skyblue;
  text-shadow: var(--ITSh);
  font-size: var(--ITFt);
}
.flx {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 15px;
  row-gap: 4px;
  width: fit-content;
  max-width: fit-content;
  letter-spacing: 0.5px;
}
.flxg {
  width: 440px;
  height: 18px;
  position: absolute;
}
.flxg div:nth-child(2) {
  position: absolute;
  left: 169px;
  bottom: 0px;
}
.flxg div:nth-child(3) {
  position: absolute;
  left: 316px;
  bottom: 0px;
}
.ger {
  opacity: 1;
  transition: all 1s;
}
.KITut {
  transition: ease 0.3s;
  font-size: 16px;
  font-weight: bold;
  color: white;
}
.flxe {
  width: 426px;
  height: 18px;
  position: absolute;
}
.flxe div:nth-child(2) {
  position: absolute;
  left: 185px;
  bottom: 0px;
}
.flxe div:nth-child(3) {
  position: absolute;
  left: 303px;
  bottom: 0px;
}
.eng {
  opacity: 0;
  transition: all 1s;
}
.menu {
  display: flex;
  justify-content: center;
  align-content: center;
}
.menu input {
  visibility: hidden;
  display: none;
}
.btns {
  position: relative;
  display: flex;
  gap: 60px;
  padding: 30px 36px;
  padding-top: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: var(--dbback);
  background: var(--cntb);
  backdrop-filter: blur(8px);
  overflow: hidden;
  border-radius: 20px;
  border: var(--bord1);
  justify-content: space-between;
  box-shadow: var(--CBSh);
  transition: all 1s;
}
.btns label {
  font-size: 2.2em;
  -webkit-text-stroke: 1px var(--MCol);
  color: transparent;
  opacity: 0.55;
  cursor: pointer;
  transition: 0.5s;
  margin-top: 8px;
  position: relative;
  flex: 1;
  text-align: center;
  width: 40px;
}
.btns label::before, .btns label::after {
  font-family: KIT3;
  font-size: 0.42em;
  transform: translateX(-50%);
  position: absolute;
  color: var(--MCol);
  margin-top: -30px;
  left: 50%;
  letter-spacing: 1px;
  -webkit-text-stroke: 0.5px var(--MCol);
  text-wrap: nowrap;
  transition: all 1s;
}
.btns label::before {
  opacity: 1;
}
.btns label::after {
  opacity: 0;
  font-size: 0.4em;
  top: 1px;
}
.btns label:nth-child(1)::before {
  content: "Start";
}
.btns label:nth-child(1)::after {
  content: "Start";
}
.btns label:nth-child(2)::before {
  content: "Leistungen";
}
.btns label:nth-child(2)::after {
  content: "Services";
}
.btns label:nth-child(3)::before {
  content: "Skills";
}
.btns label:nth-child(3)::after {
  content: "Skills";
}
.btns label:nth-child(4)::before {
  content: "Kontakt";
}
.btns label:nth-child(4)::after {
  content: "Contact";
}
.btns label:nth-child(5)::before {
  content: "Impressum";
}
.btns label:nth-child(5)::after {
  content: "Legal Notice";
}
.btns label.toggle::before {
  opacity: 0;
}
.btns label.toggle::after {
  opacity: 1;
}
.btns label:hover, .btns label:focus-visible {
  opacity: 1;
  filter: drop-shadow(0 0 10px var(--MCol)) drop-shadow(0 0 20px var(--MCol));
  filter: var(--Mfil);
  outline: none;
}
.menu input:nth-child(1):checked ~ .btns label:nth-child(1),
.menu input:nth-child(2):checked ~ .btns label:nth-child(2),
.menu input:nth-child(3):checked ~ .btns label:nth-child(3),
.menu input:nth-child(4):checked ~ .btns label:nth-child(4),
.menu input:nth-child(5):checked ~ .btns label:nth-child(5) {
  color: var(--MCol);
  opacity: 1;
  filter: drop-shadow(0 0 10px var(--MCol)) drop-shadow(0 0 20px var(--MCol));
  filter: var(--Mfil);
}
.ul {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20%;
  height: 5px;
  transition: 0.5s;
  width: calc(20%);
}
.ul::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 100%;
  background-color: var(--MCol);
  border-radius: 4px;
  filter: drop-shadow(0 0 10px var(--MCol)) drop-shadow(0 0 20px var(--MCol));
  filter: var(--Mfil);
}
.ul::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 100%;
  background-color: var(--MCol);
  border-radius: 4px;
  filter: drop-shadow(0 0 10px var(--MCol)) drop-shadow(0 0 20px var(--MCol)) blur(8px);
  filter: var(--Mfil) blur(8px);
}
.menu input:nth-child(1):checked ~ .btns .ul {
  left: calc(0% + 3px);
}
.menu input:nth-child(2):checked ~ .btns .ul {
  left: calc(20% + 1px);
}
.menu input:nth-child(3):checked ~ .btns .ul {
  left: calc(40% - 1px);
}
.menu input:nth-child(4):checked ~ .btns .ul {
  left: calc(60% - 4px);
}
.menu input:nth-child(5):checked ~ .btns .ul {
  left: calc(80% - 6px);
}
.port {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 55px;
  row-gap: 35px;
  margin-bottom: 68px;
  position: relative;
}
.cards {
  position: absolute;
  width: 300px;
  height: 453px;
  min-height: 453px;
  max-height: fit-content;
  border-radius: 15px;
  display: block;
  opacity: 0;
  justify-content: center;
  border: var(--bord1);
  backdrop-filter: blur(18px);
  overflow: hidden;
  text-align: center;
  transition: all 1s;
  box-shadow: var(--CBSh);
  background-image: var(--cbck);
}
.cards:not(.nv) {
  visibility: hidden;
}
.cards *:focus-visible {
  outline: 2px solid orange;
}
.ctit {
  color: var(--CTCr);
  font-size: 2.5em;
  font-weight: bold;
  pointer-events: none;
  border-radius: 10px;
  height: 55px;
  padding: 3px 0 3px 0;
  background-color: var(--dbback);
  border-bottom: var(--bord1);
  backdrop-filter: blur(8px);
  font-family: KIT5;
  text-shadow: var(--CTSh);
  text-wrap: nowrap;
  background: var(--cntb);
  transition: all 1s;
}
.ft {
  padding-top: 2px;
}
.cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  height: calc(100% - 61px);
  margin-top: 6px;
}
.cont::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  border-radius: 20px;
}
.cont::-webkit-scrollbar-track {
  border-radius: 20px;
  background-color: rgb(202, 202, 202, 0.85);
  backdrop-filter: blur(8px);
  margin-bottom: 4px;
}
.cont::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, 0.85);
  border-radius: 20px;
  backdrop-filter: blur(8px);
}
.title2 {
  color: var(--T2Cr);
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-shadow: var(--TiSh);
  margin: 0 0 10px 0;
  width: 100%;
  filter: var(--tids);
  transition: all 1s;
}
.txt {
  padding: 0 5px 8px 5px;
  color: var(--WT);
  font-size: 1em;
  text-align: center;
  font-weight: var(--TXTb);
  letter-spacing: 0.7px;
  width: 100%;
  transition: all 1s;
}
.bs {
  font-size: 0.9em;
  line-height: 1.3em;
  color: var(--bscr);
  transition: all 1s;
}
.perf {
  color: var(--perf);
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 1.1px;
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  margin-left: -4.5px;
  width: 100%;
  text-wrap: nowrap;
  transition: all 0.5s;
  filter: var(--tids);
}
.perf:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 5px rgba(23, 44, 59, 0.68)) drop-shadow(0 0 10px rgba(23, 44, 59, 0.68));
}
.Leistungen {
  position: absolute;
  transition: all 1s;
}
.apt {
  height: fit-content;
  width: fit-content;
  margin: 0;
  color: var(--WT);
  transition: all 1s;
}
.cta {
  font-weight: bold;
  position: relative;
  background: linear-gradient(120deg, white 0%, white 45%, gold 50%, white 55%, white 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 10s linear infinite reverse;
  background-size: 300%;
  text-decoration: none;
  transition: opacity .5s;
  opacity: 1;
}
.cta.fadeOut {
  opacity: 0;
}
.ctb {
  font-weight: bold;
  position: relative;
  background: linear-gradient(120deg, black 0%, black 45%, gold 50%, black 55%, black 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 10s linear infinite reverse;
  background-size: 300%;
  text-decoration: none;
  transition: opacity .5s;
  opacity: 0;
}
.ctb.fadeIn {
  opacity: 1;
}
.cta:hover, .ctb:hover {
  color: var(--sb);
  text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}
@keyframes shine {
  0% {
    background-position: -100%;
  }
  100% {
    background-position: 200%;
  }
}
.mb {
  margin-bottom: 8px;
}
.Lbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 35px;
  position: relative;
  width: 95vw;
  max-width: 700px;
  min-width: 615px;
  transition: opacity 1s;
  opacity: 0;
}
.L1 {
  left: 0px;
  margin-right: 15px;
}
.fcont {
  height: calc(100% - 86px);
}
.more {
  position: relative;
  background-color: #8f8f8f;
  color: white;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  padding: 2px 0 2px 0;
  border-top: var(--bord1);
  backdrop-filter: blur(8px);
  text-shadow: rgba(0, 0, 0, 0.55) 0px 0px 1px, rgba(0, 0, 0, 0.55) 0px 0px 1px,
               rgba(0, 0, 0, 0.55) 0px 0px 1px, rgba(0, 0, 0, 0.55) 0px 0px 1px,
               rgba(0, 0, 0, 0.55) 0px 0px 1px, rgba(0, 0, 0, 0.55) 0px 0px 1px,
               rgba(0, 0, 0, 0.55) 0px 0px 1px, rgba(0, 0, 0, 0.55) 0px 0px 1px,
               rgba(0, 0, 0, 0.55) 0px 0px 1px, rgba(0, 0, 0, 0.55) 0px 0px 1px;
  transition: 0.5s;
  height: 25px;
  background: var(--cntb);
  letter-spacing: 1px;
  transition: all 0.2;
}
.more:hover {
  color: skyblue;
}
.more::before {
  position: absolute;
  left: 15px;
  content: var(--before-content, "\2193");
}
.more::after {
  position: absolute;
  right: 15px;
  content: var(--after-content, "\2193");
}
.more div {
  user-select: none;
  pointer-events: none;
}
.mcntgc, .mcntec, .mcntge, .mcntee {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  transition: all 1s;
}
.mcntgc {
  opacity: 1;
}
.mcntec {
  opacity: 0;
}
.mcntge {
  opacity: 0;
}
.mcntee {
  opacity: 0;
}
.L2 {
  right: 0px;
  margin-left: 15px;
}
.icons {
  margin-top: 35px;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}
.ico {
  display: flex;
  justify-content: space-evenly;
  gap: 28px;
}
.ic {
  position: relative;
}
.ctxt {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translate(-50%);
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
}
.gap {
  display: flex;
  justify-content: center;
  gap: 38px;
}
.Kontakt .cont {
  overflow: hidden;
}
.Kontakt, .Kontakt .cont, .Kontakt .call {
  height: auto;
}
.ct {
  position: relative;
}
.ct .ctg, .ct .cte {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.ct .ctg {
  opacity: 1;
}
.ct .cte {
  opacity: 0;
}
.intr {
  height: 110px;
  position: relative;
  width: 100%;
  transition: all 1s;
}
.blk {
  position: absolute;
  text-align: justify;
  padding: 0 15px 0 15px;
  margin: 5px 0 10px 0;
  transition: all 1s;
}
.blk.ig {
  opacity: 1;
}
.blk.ie {
  opacity: 0;
}
.call {
  width: calc(100% - 10px);
  padding: 0 8px;
}
.call hr {
  margin-top: -2px;
  margin-bottom: 9px;
}
.contfrm {
  position: relative;
}
.form {
  user-select: none;
  pointer-events: none;
  display: none;
  border: 1px solid white;
}
.fit {
  width: 100%;
  padding: 6px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 9px;
  font-family: KIT3;
  font-size: 1em;
  margin-bottom: 10px;
}
.ftxt {
  position: relative;
  width: 100%;
  height: 20px;
  text-wrap: nowrap;
}
.frmtxt {
  margin-top: 8px;
  color: var(--WT);
}
.ftxt .ftg, .ftxt .fte {
  position: absolute;
  top: -8px;
  left: -3px;
  text-align: left;
  transition: all 1s;
}
.ftxt .ftg {
  opacity: 1;
}
.ftxt .fte {
  opacity: 0;
}
.frmel {
  position: relative;
  margin-bottom: 10px;
  font-family: KIT3;
  font-size: 1em;
  letter-spacing: 0.3px;
}
input[type="text"] {
  position: relative;
}
.rad {
  display: block;
  text-align: left;
  color: var(--WT);
  margin-top: 8px;
  margin-bottom: 9px;
  position: relative;
  width: 100%;
  height: 22px;
}
.rad input, .rad div {
  position: absolute;
  top: 0;
}
.rad div {
  user-select: none;
  pointer-events: none;
}
input[type="radio"][name="type"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.68), inset 0 0 3px rgba(0, 0, 0, 0.68);
  margin-top: -1.5px;
  margin-bottom: 0;
  position: relative;
}
input[type="radio"][name="type"]:checked {
  background-color: #0075ff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.68);
}
input[type="radio"][name="type"]:checked::after {
  content: "\2714";
  font-size: 14px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#comp {
  left: 0;
}
#priv {
  left: 95px;
  transition: all 1s;
}
.typcg, .typpg, .typce, .typpe {
  text-align: left;
  margin-top: 1px;
}
.typcg, .typpg {
  opacity: 1;
}
.typcg, .typce {
  left: 29px;
}
.typpg {
  left: 150px;
}
.typpe {
  left: 178px;
}
.typce, .typpe {
  opacity: 0;
}
.Xmsg {
  color: rgb(0, 48, 255);
  font-size: 0.75rem;
  position: relative;
  bottom: -3px;
  left: 8px;
  display: none;
  background: white;
  border-radius: 9px;
  padding: 1px 10px 1px 10px;
  border: 1px solid rgb(0, 48, 255);
  justify-content: space-between;
  margin-left: -8px;
  width: 100%;
}
#Xtype {
  margin-top: -10px;
}
.Xg {
  display: block;
}
.Xe {
  display: none;
}
.frmfld {
  width: 100%;
  padding: 6px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 9px;
  font-family: KIT3;
  font-size: 1em;
  transition: 0.2s;
}
.fields {
  border: none;
  outline: none;
  background-color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.68), inset 0 0 3px rgba(0, 0, 0, 0.68);
}
#compname {
  display: none;
}
.compnamelab {
  display: none;
}
.mldtpar {
  position: relative;
  height: 19px;
  margin-bottom: -2px;
  display: none;
  pointer-events: none;
}
.mldt {
  color: rgb(0, 48, 255);
  font-size: 0.75rem;
  background: white;
  border-radius: 9px;
  padding: 1px 10px 1px 10px;
  border: 1px solid rgb(0, 48, 255);
  width: 100%;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  bottom: -2px;
}
.frmlab {
  position: absolute;
  top: 5px;
  left: 3px;
  background: white;
  border-radius: 9px;
  padding: 1px 6px 1px 6px;
  transition: all 1s;
  color: #999;
  user-select: none;
  pointer-events: none;
}
.frmlab.lg {
  opacity: 1;
}
.frmlab.le {
  opacity: 0;
}
#compcont {
  display: none;
}
.compcontlab {
  display: none;
}
.frmfld:focus ~ .frmlab, .frmfld:not(:placeholder-shown) ~ .frmlab {
  left: 8px;
  font-size: 0.75rem;
  color: #333;
  top: -1px;
  border: 1px solid grey;
}
.frmfld:focus, .frmfld:not(:placeholder-shown) {
  margin-top: 8px;
  padding: 10px;
}
.fr.error:focus ~ .frmlab {
  margin-top: 1px;
}
.fr.error:not(:focus):not(:placeholder-shown) ~ .frmlab {
  margin-top: 1px;
}
.fr.error:not(:focus) ~ .frmlab {
  margin-top: 2px;
}
.SPMPRTCT {
  display: none;
}
#msg {
  resize: vertical;
  min-height: 69px;
}
#Xmsg {
  margin-top: -4px;
  margin-bottom: 15px;
}
.required {
  visibility: hidden;
  height: 0px;
}
.reqd {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translate(-50%);
}
.req {
  height: 0px;
  color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  border: none;
  outline: none;
  margin-top: -10px;
}
.req input[type="text"] {
  color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  border: none;
  outline: none;
}
.NoSpmChk {
  display: block;
  font-family: KIT3;
  color: var(--WT);
  position: relative;
  text-align: left;
  margin-top: -7px;
  height: 40px;
}
.NoSpmChk div {
  position: absolute;
  top: 0;
  transition: all 1s;
  left: 15px;
  pointer-events: none;
}
.hum {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.68), inset 0 0 3px rgba(0, 0, 0, 0.68);
  margin-top: 9px;
  margin-bottom: 0;
  position: relative;
  margin-left: 27px;
}
.hum:checked {
  background-color: #0075ff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.68);
}
.hum:checked::after {
  content: "\2714";
  font-size: 14px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.humg {
  opacity: 1;
}
.hume {
  opacity: 0;
}
#Xhum {
  width: 78%;
  margin-left: 18px;
  margin-top: -3px;
}
.cntbtns {
  display: block;
  position: relative;
  margin-top: 12px;
  margin-bottom: 14px;
  height: 31px;
}
.butl, .butr {
  position: absolute;
  line-height: 1rem;
  color: white;
  padding: 5px;
  background: #223039;
  width: 100px;
  border: 2px solid silver;
  border-radius: 10px;
  transition: 0.5s;
  font-size: 1em;
  height: 31px;
  top: 0;
  font-family: KIT3;
}
.cntdse {
  display: block;
  position: relative;
  margin-top: -5px;
  margin-bottom: -5px;
  height: 22px;
}
.fnlnk {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  text-wrap: nowrap;
  cursor: pointer;
  color: rgb(255, 230, 88);
  text-shadow: 0 0 2.5px black, 0 0 2.5px black, 0 0 2.5px black, 0 0 2.5px black, 0 0 2.5px black;
  letter-spacing: 1px;
  transition: 0.5s;
}
.fnlnk:hover, .fnlnk:focus-visible {
  color: rgb(0, 255, 21);
}
#statusMessage {
  margin-bottom: 5px;
  color: white;
  letter-spacing: 1.2px;
}
.butl {
  left: 0;
}
.butr {
  right: 0;
}
.butl:hover, .butr:hover {
  background: black;
}
.butl:hover {
  color: greenyellow;
  border: 2px solid green;
  filter: drop-shadow(0 0 5px rgba(0, 255, 55, 0.68));
}
.butr:hover {
  color: rgb(255, 87, 87);
  border: 2px solid red;
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.68));
}
.bsg, .brg, .dseg {
  opacity: 1;
  pointer-events: all;
}
.bse, .bre, .dsee {
  opacity: 0;
  pointer-events: none;
}
#mlval {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  position: absolute;
}
.error {
  border: 2px solid rgb(255, 125, 0);
}
#impe {
  font-size: 2.3em;
}
.Impressum {
  transition: all 1s;
}
.Impressum .cont {
  overflow-x: hidden;
}
.imp {
  color: var(--WT);
  display: flex;
  flex-direction: column;
  padding: 0 8px;
  row-gap: 20px;
  margin-top: 10px;
}
.icat {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  transition: color 1s;
}
.ng {
  row-gap: 3px;
}
.ng > div:nth-child(2) {
  margin-top: 5px;
}
.itit {
  color: rgb(255, 235, 33);
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: var(--TiSh);
  filter: var(--tids);
  transition: all 1s;
}
.bd {
  font-weight: bold;
}
cf {
  cursor: pointer;
}
cf:hover {
  color: skyblue;
  text-shadow: var(--cfSh);
}
/* .nutm {
  margin-top: 1px;
  width: 132px;
  height: 14px;
  position: relative;
  align-self: center;
}
.nusm {
  width: 113px;
  height: 14px;
  position: relative;
  align-self: center;
}
.nutm img, .nusm img {
  position: absolute;
  top: 0;
  left: 0;
  filter: var(--numbr);
  opacity: var(--numbro);
  transition: all 1s;
} */
.frmmsg {
  display: none;
  height: fit-content;
  width: fit-content;
  max-width: 95vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to top, black, rgb(65, 65, 65));
  letter-spacing: 1px;
  color: white;
  padding: 6px 10px 10px 10px;
  border: 2px solid green;
  border-radius: 20px;
  font-size: 1.1em;
  font-weight: bold;
  z-index: 8;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 255, 55, 0.68), inset 0 0 3px rgba(0, 255, 55, 0.68);
}
.ss {
  display: flex;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  bottom: 12px;
  width: 300px;
  height: 50px;
  min-width: 300px;
  border: var(--bord1);
  background-color: #223039;
  flex-direction: row;
  align-items: center;
  border-radius: 50px;
  transition: all 1s;
  bottom: -50px;
}
.DM {
  position: absolute;
  left: 8px;
  display: inline-block;
  width: 125px;
  height: 34px;
  z-index: 6;
}
.DM input {
  opacity: 0;
  width: 0;
  height: 0;
}
.DMbar {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1b1b1b;
  transition: 0.5s;
  border-radius: 36px;
  box-shadow: 0px 1px 3px 1px #1b1b1b;
}
.DMbar:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 86px;
  left: 4px;
  bottom: 2px;
  background-color: black;
  transition: 0.5s;
  border-radius: 18px;
  z-index: 1;
  background: linear-gradient(to top, #000, #555);
  box-shadow: 0 0 0 1px #232323;
}
.DMcnt {
  position: absolute;
  width: 100%;
  top: 8px;
  left: 16px;
  color: rgb(218, 218, 218);
  font-weight: bold;
  transition: 0.5s;
  z-index: 2;
  user-select: none;
}
.DMbar div:nth-child(2) {
  position: absolute;
  left: 7px;
  opacity: 0;
  filter: none;
  transition: 0.5s;
  color: white;
  font-size: 2em;
}
.DMbar div:nth-child(3) {
  position: absolute;
  right: 4px;
  opacity: 1;
  filter: drop-shadow(0 0 5px gold) drop-shadow(0 0 10px gold);
  transition: 0.5s;
  color: yellow;
  font-size: 1.9em;
}
#DM:checked + .DMbar {
  background-color: #1b1b1b;
}
#DM:checked + .DMbar:before {
  transform: translateX(30px);
}
#DM:checked + .DMbar .DMcnt {
  transform: translateX(30px);
}
.DMcnt DE {
  transition: 0.5s;
}
.DMcnt EN {
  transition: 0.5s;
}
#DM:checked + .DMbar .DMcnt DK {
  color: skyblue;
}
#DM:checked + .DMbar .DMcnt LT {
  color: rgb(218, 218, 218);
}
#DM:checked + .DMbar .DMcnt DK::before {
  opacity: 1;
}
#DM:checked + .DMbar .DMcnt LT::before {
  opacity: 0;
}
#DM + .DMbar .DMcnt DK {
  color: rgb(218, 218, 218);
}
#DM + .DMbar .DMcnt LT {
  color: skyblue;
}
#DM:checked + .DMbar div:nth-child(2) {
  opacity: 1;
  filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px white);
}
#DM:checked + .DMbar div:nth-child(3) {
  opacity: 0;
  filter: none;
}
dk {
  position: relative;
}
dk::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 29px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: skyblue;
  opacity: 0;
  transition: 0.5s;
}
lt {
  position: relative;
}
lt::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 25px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: skyblue;
  opacity: 1;
  transition: 0.5s;
}
.lang {
  position: absolute;
  right: 8px;
  display: inline-block;
  width: 125px;
  height: 34px;
  z-index: 6;
}
.lang input {
  opacity: 0;
  width: 0;
  height: 0;
}
.langbar {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1b1b1b;
  transition: 0.5s;
  border-radius: 36px;
  box-shadow: 0px 1px 3px 1px #1b1b1b;
}
.langbar:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 86px;
  left: 4px;
  bottom: 2px;
  background-color: black;
  transition: 0.5s;
  border-radius: 18px;
  z-index: 1;
  background: linear-gradient(to top, #000, #555);
  box-shadow: 0 0 0 1px #232323;
}
.langbar img:nth-child(2) {
  position: absolute;
  top: 4px;
  left: 5px;
  opacity: 0;
  transition: 0.5s;
}
.langbar img:nth-child(3) {
  position: absolute;
  top: 4px;
  right: 6px;
  opacity: 1;
  transition: 0.5s;
}
.langcnt {
  position: absolute;
  width: 100%;
  top: 8px;
  left: 14px;
  color: rgb(218, 218, 218);
  font-weight: bold;
  transition: 0.5s;
  z-index: 2;
  user-select: none;
}
#lang:checked + .langbar {
  background-color: #1b1b1b;
}
#lang:checked + .langbar:before {
  transform: translateX(30px);
}
#lang:checked + .langbar .langcnt {
  transform: translateX(30px);
}
.langcnt DE {
  transition: 0.5s;
}
.langcnt EN {
  transition: 0.5s;
}
#lang:checked + .langbar .langcnt DE {
  color: skyblue;
}
#lang:checked + .langbar .langcnt EN {
  color: rgb(218, 218, 218);
}
#lang:checked + .langbar .langcnt DE::before {
  opacity: 1;
}
#lang:checked + .langbar .langcnt EN::before {
  opacity: 0;
}
#lang + .langbar .langcnt DE {
  color: rgb(218, 218, 218);
}
#lang + .langbar .langcnt EN {
  color: skyblue;
}
#lang:checked + .langbar img:nth-child(2) {
  opacity: 1;
}
#lang:checked + .langbar img:nth-child(3) {
  opacity: 0;
}
DE {
  position: relative;
}
DE::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 28px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: skyblue;
  opacity: 0;
  transition: 0.5s;
}
EN {
  position: relative;
}
EN::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 28px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: skyblue;
  opacity: 1;
  transition: 0.5s;
}
.set {
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  cursor: pointer;
  animation: fall 2s ease-in, bounce 2s ease-out 2s forwards;
  animation-iteration-count: 1;
  z-index: 9;
  color: white;
  font-size: 1.9em;
  filter: var(--setSh);
  transition: all 0.5s;
  bottom: 18px;
}
.set:hover {
  filter: var(--setShH);
}

.sro {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
  user-select: none;
  pointer-events: none;
}

.sch {
  display: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  max-width: 90vw;
  background: #222;
  font-size: clamp(16px, 2vw, 20px);
  color: #fff;
  padding: .5em;
  border-radius: 5px;
  z-index: 1000;
  outline: 2px solid #fff;
}
.kbd {
  color: gold;
}
.wt {
  color: white;
}
.mt {
  margin-top: 8px;
}
address {
  margin-top: 5px;
}
address a {
  color: #14a8a9;
}
address .bl {
  color: white;
  text-shadow: 0 0 1px orange, 0 0 1px orange, 0 0 1px orange, 0 0 1px orange, 0 0 1px orange;
  margin-bottom: 3px;
}
.bl {
  color: #14a8a9;
}
.hdn {
  display: none;
}
@keyframes fall {
  0% {
    top: -50px;
  }
  100% {
    top: calc(100vh - 30px);
  }
}
@keyframes bounce {
  0% {
    top: calc(100vh - 25px);
  }
  50% {
    top: calc(100vh - 15vh);
  }
  58% {
    top: calc(100vh - 14vh);
  }
  100% {
    top: calc(100vh - 54px);
  }
}
@media screen and (min-width: 661px) and (max-width: 750px) {
  .port {
    gap: 25px;
    row-gap: 25px;
  }
}
@media screen and (min-width: 638px) and (max-width: 660px) {
  .port {
    gap: 10px;
    row-gap: 25px;
  }
}
@media screen and (min-width: 616px) and (max-width: 637px) {
  .port {
    gap: 5px;
    row-gap: 25px;
  }
}
@media (max-width: 615px) {
  .port {
    row-gap: 25px;
  }
  .base {
    row-gap: 25px;
    margin-top: 120px;
  }
  .flx {
    flex-wrap: wrap;
    row-gap: 2px;
    margin-top: -2px;
  }
  .header {
    gap: 5px;
    width: 300px;
  }
  .KITTXT {
    font-size: 32px;
  }
  .KT {
    margin-top: 5px;
  }
  .flxg {
    display: block;
  }
  .flxg div:nth-child(2) {
    position: absolute;
    left: 0px;
    top: 20px;
  }
  .flxg div:nth-child(3) {
    position: absolute;
    left: 0px;
    top: 40px;
  }
  .flxe {
    display: block;
    margin-top: 1px;
  }
  .flxe div:nth-child(2) {
    position: absolute;
    left: 0px;
    top: 20px;
  }
  .flxe div:nth-child(3) {
    position: absolute;
    left: 0px;
    top: 40px;
  }
  KT2 {
    font-size: 36px;
  }
  KT3 {
    font-size: 36px;
  }
  .KITut {
    font-size: 15px;
  }
  .btns {
    gap: 17px;
    padding: 5px 14px 10px 14px;
  }
  .btns label::before {
    display: none;
  }
  .ul {
    display: none;
  }
  .L1 {
    margin-right: 0;
    left: 50%;
    transform: translate(-50%);
  }
  .L2 {
    margin-left: 0;
    left: 50%;
    transform: translate(-50%);
  }
  .Lbox {
    min-width: 0px;
  }
}