:root {
    --kame-s-bp: 0px;
    --kame-sm-bp: 576px;
    --kame-md-bp: 768px;
    --kame-l-bp: 992px;
    --kame-xl-bp: 1200px;
    --kame-xxl-bp: 1400px;
  }
  
  .t-light {
    color: var(--loc-text-light);
  }
  
  :root {
    --loc-orange-col: hsl(39, 80%, 50%);
    --loc-orange-col-d-30: hsl(39, 80%, 20%);
    --loc-text-light: hsl(0, 0%, 63%);
    --loc-text-light-l-5: hsl(0, 0%, 68%);
    --loc-text-light-l-10: hsl(0, 0%, 73%);
    --loc-text-light-d-20: hsl(0, 0%, 43%);
    --loc-text-light-d-40: hsl(0, 0%, 23%);
    --loc-text-light-d-50: hsl(0, 0%, 13%);
  }
  
  @font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-ThinItalic.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-LightItalic.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-Italic.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-MediumItalic.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-BoldItalic.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-BlackItalic.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-Thin.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-Light.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-Regular.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-Medium.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-Bold.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/roboto/Roboto-Black.ttf") format("ttf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Teko Light 300";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/teko/teko_light_300.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  h1, h2, h3 {
    font-family: "Teko Light 300", "Arial", sans-serif;
  }
  
  h1 {
    font-size: var(--h1-fs);
  }
  h1:not(.landing-hl) {
    font-weight: 300;
  }
  
  h2 {
    font-size: var(--h2-fs);
  }
  
  h3 {
    font-size: var(--h3-fs);
  }
  
  p, button, li, a {
    font-family: "Roboto";
    font-style: normal;
    font-weight: normal;
  }
  
  p {
    font-size: var(--p-fs);
    line-height: 2;
  }
  
  a {
    text-decoration: none;
  }
  
  ul, ol {
    list-style-type: none;
  }
  
  footer a li,
  footer aside span {
    font-size: var(--foot-li-fs);
  }
  footer aside .click-for-datapolicy,
  footer aside .click-for-impressum {
    cursor: pointer;
  }
  
  .nav-backdrop {
    width: 100%;
    height: 100vh;
    inset: 0;
    gap: var(--nav-bdr-gap);
    background-color: rgba(0, 0, 0, 0.7);
    pointer-events: none;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 5;
  }
  .nav-backdrop a {
    width: var(--nav-a-w);
    border: min(2.5vmin, 2px) solid var(--sec-col);
    border-radius: var(--nav-a-br);
    color: var(--sec-col);
    font-size: var(--nav-a-fs);
    padding: var(--nav-a-p);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--prim-col)), to(var(--prim-col-d-20)));
    background: -o-linear-gradient(top, var(--prim-col), var(--prim-col-d-20));
    background: linear-gradient(to bottom, var(--prim-col), var(--prim-col-d-20));
  }
  .nav-backdrop a i {
    width: 30%;
    font-size: var(--nav-a-fs);
    text-align: center;
  }
  .nav-backdrop a p {
    width: 50%;
  }
  .nav-backdrop.active {
    pointer-events: auto;
    opacity: 1;
  }
  
  footer {
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--prim-col)), to(var(--prim-col-d-20)));
    background-image: -o-linear-gradient(top, var(--prim-col), var(--prim-col-d-20));
    background-image: linear-gradient(to bottom, var(--prim-col), var(--prim-col-d-20));
    padding: var(--foot-py) var(--glob-px) var(--foot-py);
  }
  footer nav ul {
    gap: min(5vmin, 20px);
  }
  footer nav ul li {
    color: var(--loc-text-light-d-20);
  }
  footer hr {
    background-color: var(--loc-text-light-d-50);
  }
  footer aside {
    color: var(--loc-text-light-d-20);
  }
  
  #nav-btn {
    width: var(--nav-b-w);
    aspect-ratio: 1;
    top: var(--nav-b-t);
    right: var(--nav-b-r);
    border: 2px solid var(--loc-text-light-d-50);
    border-radius: 50%;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 6;
    cursor: pointer;
  }
  #nav-btn .bar-holder {
    height: 100%;
    border-radius: inherit;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  #nav-btn .bar-holder .bar {
    height: 6%;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    background-color: var(--loc-text-light-d-40);
    -webkit-transition: background 0.3s ease, -webkit-transform 0.5s linear;
    transition: background 0.3s ease, -webkit-transform 0.5s linear;
    -o-transition: background 0.3s ease, transform 0.5s linear;
    transition: background 0.3s ease, transform 0.5s linear;
    transition: background 0.3s ease, transform 0.5s linear, -webkit-transform 0.5s linear;
  }
  #nav-btn .bar-holder .bar.top {
    -webkit-transform: translate(-50%, -250%);
        -ms-transform: translate(-50%, -250%);
            transform: translate(-50%, -250%);
  }
  #nav-btn .bar-holder .bar.mid {
    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  #nav-btn .bar-holder .bar.bot {
    -webkit-transform: translate(-50%, 250%);
        -ms-transform: translate(-50%, 250%);
            transform: translate(-50%, 250%);
  }
  #nav-btn.active {
    border: 2px solid var(--loc-text-light);
  }
  #nav-btn.active .bar-holder {
    background-color: var(--loc-text-light-d-40);
  }
  #nav-btn.active .bar-holder .bar {
    background-color: black;
  }
  #nav-btn.active .bar-holder .bar.top {
    -webkit-animation: topbarActive 0.5s 1 linear forwards;
            animation: topbarActive 0.5s 1 linear forwards;
  }
  #nav-btn.active .bar-holder .bar.mid {
    -webkit-transform: translate(-250%, 0);
        -ms-transform: translate(-250%, 0);
            transform: translate(-250%, 0);
  }
  #nav-btn.active .bar-holder .bar.bot {
    -webkit-animation: botbarActive 0.5s 1 linear forwards;
            animation: botbarActive 0.5s 1 linear forwards;
  }
  #nav-btn:not(.active) .bar-holder .bar.top {
    -webkit-animation: topbarUnactive 0.5s 1 linear forwards;
            animation: topbarUnactive 0.5s 1 linear forwards;
  }
  #nav-btn:not(.active) .bar-holder .bar.bot {
    -webkit-animation: botbarUnactive 0.5s 1 linear forwards;
            animation: botbarUnactive 0.5s 1 linear forwards;
  }
  
  .text-holder-border {
    background-image: -o-repeating-radial-gradient(center, closest-side, var(--tert-col-l-10), var(--tert-col) 20%, var(--tert-col-l-5) 20%, var(--tert-col-l-10) 20%);
    background-image: repeating-radial-gradient(closest-side at center, var(--tert-col-l-10), var(--tert-col) 20%, var(--tert-col-l-5) 20%, var(--tert-col-l-10) 20%);
    padding: min(1vmin, 5px);
    border-radius: 5px;
  }
  .text-holder-border .text-holder {
    height: 100%;
    border-radius: inherit;
    -webkit-box-shadow: 0 0 5px 2px black;
            box-shadow: 0 0 5px 2px black;
    padding: min(1vmin, 10px);
  }
  .text-holder-border .text-holder p {
    color: var(--prim-col);
  }
  
  @media screen and (min-width: 0px) {
    :root {
      --glob-px: 4vmin;
    }
    body {
        --nav-b-w: min(15vmin, 75px);
        --nav-b-t: 15px;
        --nav-b-r: 15px;
        --nav-b-trans: translate(0, 0);
        --nav-bdr-gap: 5vmin;
        --nav-a-w: min(70%, 500px);
        --nav-a-br: 50px;
        --nav-a-fs: min(6vmin, 48px);
        --nav-a-p: min(2vmin, 16px) min(4vmin, 32px);
        --h1-fs: min(8vmin, 70px);
        --h2-fs: min(6vmin, 55px);
        --h3-fs: min(4vmin, 40px);
        --p-fs: min(3.5vmin, 18px);
        --foot-li-fs: min(3vmin, 16px);
        --foot-py: min(3vmin, 20px);
    }
  }
  @media screen and (min-width: 0px) and (min-aspect-ratio: 1) {
    body {
      --nav-b-w: min(12.5vmin, 75px);
      --nav-a-w: min(50%, 600px);
      --nav-a-fs: 5vmin;
    }
  }
  @media screen and (min-width: 576px) and (min-aspect-ratio: 1) {
    :root {
      --glob-px: 6vmin;
    }
  }
  @media screen and (min-width: 768px) {
    body {
        --p-fs: min(3.5vmin, 22px);
    }
  }
  @media screen and (min-width: 768px) and (min-aspect-ratio: 1) {
    :root {
      --glob-px: 10vmin;
    }
  }
  @media screen and (min-width: 992px) {
    body {
      --p-fs: min(3.5vmin, 26px);
      --nav-b-t: 25px;
      --nav-b-r: 25px;
    }
  }
  @media screen and (min-width: 1200px) {
    body {
        --p-fs: min(3.5vmin, 28px);
    }
  }
  @-webkit-keyframes topbarActive {
    0% {
      -webkit-transform: translate(-50%, -250%);
              transform: translate(-50%, -250%);
    }
    25% {
      -webkit-transform: translate(100%, -950%) rotate(-40deg);
              transform: translate(100%, -950%) rotate(-40deg);
    }
    50% {
      -webkit-transform: translate(-50%, -950%) rotate(-80deg);
              transform: translate(-50%, -950%) rotate(-80deg);
    }
    75% {
      -webkit-transform: translate(-150%, -750%) rotate(-120deg);
              transform: translate(-150%, -750%) rotate(-120deg);
    }
    100% {
      -webkit-transform: translate(-50%, 0) rotate(-315deg);
              transform: translate(-50%, 0) rotate(-315deg);
    }
  }
  @keyframes topbarActive {
    0% {
      -webkit-transform: translate(-50%, -250%);
              transform: translate(-50%, -250%);
    }
    25% {
      -webkit-transform: translate(100%, -950%) rotate(-40deg);
              transform: translate(100%, -950%) rotate(-40deg);
    }
    50% {
      -webkit-transform: translate(-50%, -950%) rotate(-80deg);
              transform: translate(-50%, -950%) rotate(-80deg);
    }
    75% {
      -webkit-transform: translate(-150%, -750%) rotate(-120deg);
              transform: translate(-150%, -750%) rotate(-120deg);
    }
    100% {
      -webkit-transform: translate(-50%, 0) rotate(-315deg);
              transform: translate(-50%, 0) rotate(-315deg);
    }
  }
  @-webkit-keyframes botbarActive {
    0% {
      -webkit-transform: translate(-50%, 250%);
              transform: translate(-50%, 250%);
    }
    25% {
      -webkit-transform: translate(-150%, 950%) rotate(40deg);
              transform: translate(-150%, 950%) rotate(40deg);
    }
    50% {
      -webkit-transform: translate(-50%, 950%) rotate(80deg);
              transform: translate(-50%, 950%) rotate(80deg);
    }
    75% {
      -webkit-transform: translate(100%, 750%) rotate(120deg);
              transform: translate(100%, 750%) rotate(120deg);
    }
    100% {
      -webkit-transform: translate(-50%, 0) rotate(315deg);
              transform: translate(-50%, 0) rotate(315deg);
    }
  }
  @keyframes botbarActive {
    0% {
      -webkit-transform: translate(-50%, 250%);
              transform: translate(-50%, 250%);
    }
    25% {
      -webkit-transform: translate(-150%, 950%) rotate(40deg);
              transform: translate(-150%, 950%) rotate(40deg);
    }
    50% {
      -webkit-transform: translate(-50%, 950%) rotate(80deg);
              transform: translate(-50%, 950%) rotate(80deg);
    }
    75% {
      -webkit-transform: translate(100%, 750%) rotate(120deg);
              transform: translate(100%, 750%) rotate(120deg);
    }
    100% {
      -webkit-transform: translate(-50%, 0) rotate(315deg);
              transform: translate(-50%, 0) rotate(315deg);
    }
  }
  @-webkit-keyframes topbarUnactive {
    0% {
      -webkit-transform: translate(-50%, 0) rotate(-315deg);
              transform: translate(-50%, 0) rotate(-315deg);
    }
    25% {
      -webkit-transform: translate(-150%, -750%) rotate(-120deg);
              transform: translate(-150%, -750%) rotate(-120deg);
    }
    50% {
      -webkit-transform: translate(-50%, -950%) rotate(-80deg);
              transform: translate(-50%, -950%) rotate(-80deg);
    }
    75% {
      -webkit-transform: translate(100%, -950%) rotate(-40deg);
              transform: translate(100%, -950%) rotate(-40deg);
    }
    100% {
      -webkit-transform: translate(-50%, -250%);
              transform: translate(-50%, -250%);
    }
  }
  @keyframes topbarUnactive {
    0% {
      -webkit-transform: translate(-50%, 0) rotate(-315deg);
              transform: translate(-50%, 0) rotate(-315deg);
    }
    25% {
      -webkit-transform: translate(-150%, -750%) rotate(-120deg);
              transform: translate(-150%, -750%) rotate(-120deg);
    }
    50% {
      -webkit-transform: translate(-50%, -950%) rotate(-80deg);
              transform: translate(-50%, -950%) rotate(-80deg);
    }
    75% {
      -webkit-transform: translate(100%, -950%) rotate(-40deg);
              transform: translate(100%, -950%) rotate(-40deg);
    }
    100% {
      -webkit-transform: translate(-50%, -250%);
              transform: translate(-50%, -250%);
    }
  }
  @-webkit-keyframes botbarUnactive {
    0% {
      -webkit-transform: translate(-50%, 0) rotate(315deg);
              transform: translate(-50%, 0) rotate(315deg);
    }
    25% {
      -webkit-transform: translate(100%, 750%) rotate(120deg);
              transform: translate(100%, 750%) rotate(120deg);
    }
    50% {
      -webkit-transform: translate(-50%, 950%) rotate(80deg);
              transform: translate(-50%, 950%) rotate(80deg);
    }
    75% {
      -webkit-transform: translate(-150%, 950%) rotate(40deg);
              transform: translate(-150%, 950%) rotate(40deg);
    }
    100% {
      -webkit-transform: translate(-50%, 250%);
              transform: translate(-50%, 250%);
    }
  }
  @keyframes botbarUnactive {
    0% {
      -webkit-transform: translate(-50%, 0) rotate(315deg);
              transform: translate(-50%, 0) rotate(315deg);
    }
    25% {
      -webkit-transform: translate(100%, 750%) rotate(120deg);
              transform: translate(100%, 750%) rotate(120deg);
    }
    50% {
      -webkit-transform: translate(-50%, 950%) rotate(80deg);
              transform: translate(-50%, 950%) rotate(80deg);
    }
    75% {
      -webkit-transform: translate(-150%, 950%) rotate(40deg);
              transform: translate(-150%, 950%) rotate(40deg);
    }
    100% {
      -webkit-transform: translate(-50%, 250%);
              transform: translate(-50%, 250%);
    }
  }