:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

@font-face {
  font-family: "Ubuntu";
  font-weight: 300;
  src: url(_fonts/Ubuntu-Light.ttf);
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 400;
  src: url(_fonts/Ubuntu-Regular.ttf);
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 500;
  src: url(_fonts/Ubuntu-Medium.ttf);
}
@font-face {
  font-family: "Ubuntu";
  font-weight: bold;
  src: url(_fonts/Ubuntu-Bold.ttf);
}
:root {
  --fs-root: clamp(.75rem, calc(2vmax + .1rem), 1.3rem);
  --letter-spacing: clamp(0em, 0.02vw, 0.05em);
  /* --fs-00: .7rem;
  --fs-01: 1rem;
  --fs-02: 1.2rem;
  --fs-03: 1.3rem;
  --fs-04: 1.6rem;
  --fs-05: 1.9rem;
  --fs-xl: 3rem; */
  --fs-00: calc((var(--fs-01)/10) * 7);
  --fs-01: 1rem;
  --fs-02: calc(var(--fs-01) * 1.2);
  --fs-03: calc(var(--fs-01) * 1.4);
  --fs-04: calc(var(--fs-01) * 1.7);
  --fs-05: calc(var(--fs-01) * 2.2);
  --fs-xl: calc(var(--fs-01) * 2.5);
}

html {
  font-size: var(--fs-root);
  letter-spacing: var(--letter-spacing);
  hyphenate-limit-chars: 10 3 3;
}

body {
  font-family: "Ubuntu", sans-serif;
  line-height: 1.4;
}

h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin-bottom: 0.5em;
  line-height: 1.1;
}

p, li {
  -webkit-hyphens: auto;
          hyphens: auto;
}

h1 {
  font-size: var(--fs-05);
}

h2 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--fs-04);
  color: var(--col-blau);
}

h3 {
  font-size: var(--fs-03);
}

p, ul, li, h4, h5, h6, input, button {
  font-size: var(--fs-01);
  margin-bottom: 1ch;
}

ul li strong {
  color: var(--col-blau);
}

@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    /*         --fs-00: .9rem;
            --fs-01: 1rem;
            --fs-02: 1.25rem;
            --fs-03: 1.5rem;
            --fs-04: 1.8rem;
            --fs-05: 2.5rem; */
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    /*         --fs-00: 1rem;
            --fs-01: 1.1rem;
            --fs-02: 1.3rem;
            --fs-03: 1.7rem;
            --fs-04: 2rem;
            --fs-05: 2.7rem; */
  }
}
a:-moz-any-link {
  color: unset;
  text-decoration: none;
}
a:any-link {
  color: unset;
  text-decoration: none;
}

.main-home h3 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--fs-04);
  color: var(--col-blau);
}

.intro {
  font-size: var(--fs-02);
  margin-bottom: 2rem;
  color: var(--col-grau);
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

.c2a {
  cursor: pointer;
}

ul {
  list-style: none;
  position: relative;
  padding-left: 3rem;
}

li {
  position: relative;
  max-width: 70ch;
}

ul li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: -1.5em;
  height: 1.2em;
  width: 1.2em;
  background: url(_bm/ame-bullet-arrow-blau.svg), no-repeat;
}

html, body {
  width: 100%;
  padding: 0px;
  margin: 0px;
  scroll-behavior: smooth;
  /*     &::before {
              content:'';
              position:fixed;
              width:200%;
              height:100%;
              left:-50%;
              background:url(_bm/ui-stripes-pattern.png);
              background-size:.25rem;
              z-index:0;

              transform:skew(-24.3deg);

              mix-blend-mode:multiply;
      }
   */
}
html *, body * {
  box-sizing: border-box;
}

header, footer {
  display: grid;
  grid-template-columns: var(--grid-base);
  gap: var(--gr-gap);
}

main {
  display: grid;
  grid-template-columns: var(--grid-base);
  gap: var(--gr-gap);
  position: relative;
  width: 100%;
}

article {
  display: grid;
  grid-template-columns: var(--grid-base);
  gap: var(--gr-gap);
  grid-column: 1/-1;
  position: relative;
  width: 100%;
}
article section, article .content-element {
  grid-column: 2/3;
  margin: 10rem 0;
}
article > *:not(.grid-full-width, .hero-slider) {
  grid-column: 2/5;
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: unset;
  z-index: 1000;
}

.logo {
  grid-column: 4/5;
  justify-self: start;
  align-self: start;
  position: relative;
  background: white;
  padding: 3rem 0.5rem 0rem 0.5rem;
  width: clamp(6rem, 100%, 10rem);
  left: 0;
}
.logo img.custom-logo {
  width: 100%;
  height: unset;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .logo {
    grid-column: 5/6;
    padding: 3rem 1rem 0rem 1rem;
  }
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

nav.nav-main {
  display: grid;
  grid-template-columns: var(--grid-base);
  gap: var(--gr-gap);
  position: absolute;
  width: 100%;
  top: 0;
  grid-column: 1/-1;
  background: var(--col-blau);
  background: var(--col-grad-blau-blau-dunkel);
  background: linear-gradient(180deg, var(--col-blau), var(--col-blau-dunkel));
  height: var(--grid-nav-main);
  border-bottom: 2px solid white;
  z-index: -1;
}
nav.nav-main .nav-main-wrapper {
  grid-column: 2/5;
  display: flex;
  align-items: end;
  gap: 2em;
}
nav.nav-main .nav-main-wrapper p {
  color: var(--col-tuerkis);
  text-transform: uppercase;
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

footer {
  grid-column: 1/-1;
  position: relative;
  height: calc(100dvh - var(--header-height));
  height: var(--footer-height);
  padding: 30vh 0;
  background: url(_bm/ame-inst-Illu-demo.webp) no-repeat;
  background-position: bottom left;
  background-size: contain;
  overflow-x: hidden;
  /* border-top:1rem solid var(--col-tuerkis);
  border-top:1rem solid var(--col-grad-blau-tuerkis); */
}
footer * {
  color: var(--col-grau);
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  footer {
    padding: 3.7rem 0;
  }
}
footer:before {
  content: "";
  position: absolute;
  height: 1rem;
  width: 100%;
  top: 0;
  background: var(--col-tuerkis);
}
footer:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 100%;
  left: -50%;
  background: url(_bm/ui-stripes-pattern.png);
  background-size: 0.25rem;
  z-index: -1;
  transform: skew(-24.3deg);
  mix-blend-mode: multiply;
}
footer section {
  grid-column: 2/5;
  align-self: start;
  text-align: left;
  padding: 1em;
  background: white;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  footer section {
    grid-column: 3/5;
    text-align: right;
  }
}
footer h2, footer h3 {
  line-height: 1;
  margin-bottom: 1em;
  font-size: var(--fs-01);
  text-transform: none;
  color: var(--col-blau);
  font-weight: 400;
}
footer h2 strong, footer h3 strong {
  color: var(--col-blau);
  font-size: var(--fs-02);
}
footer p {
  font-size: var(--fs-01);
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  footer p {
    font-size: var(--fs-00);
  }
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

.c2a {
  cursor: pointer;
}

ul {
  list-style: none;
  position: relative;
  padding-left: 3rem;
}

li {
  position: relative;
  max-width: 70ch;
}

ul li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: -1.5em;
  height: 1.2em;
  width: 1.2em;
  background: url(_bm/ame-bullet-arrow-blau.svg), no-repeat;
}

.hero-slider {
  grid-column: 1/-1;
  position: relative;
  height: calc(100dvh - var(--grid-nav-main));
}

.slide-item {
  display: grid;
  grid-template-columns: var(--grid-base);
  gap: var(--gr-gap);
  height: calc(100dvh - var(--grid-nav-main));
}
.slide-item picture {
  grid-column: 1/-1;
}
.slide-item .hero-slide-content {
  grid-column: 1/5;
}
.slide-item picture::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 100%;
  left: -50%;
  background: url(_bm/ui-stripes-pattern.png);
  background-size: 0.25rem;
  z-index: 1;
  transform: skew(-24.3deg);
  mix-blend-mode: multiply;
}

.hero-slide-content {
  position: absolute;
  width: unset;
  bottom: -1px;
  left: 0;
  padding-left: calc((100% - var(--content-main)) / 2);
  padding-right: 2em;
  padding-bottom: 1em;
  background-color: var(--col-tuerkis);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), white);
}
.hero-slide-content .slide-heading {
  text-transform: uppercase;
  font-weight: 400;
  font-size: var(--fs-05);
  color: var(--col-blau);
}
.hero-slide-content .subline {
  font-size: var(--fs-02);
  color: var(--col-grau);
  margin-bottom: 0;
}

.hero-skip-next, .hero-skip-prev {
  display: none;
}

.hero-slider-content {
  grid-column: 2/5;
  height: 70vh;
  aspect-ratio: 1/1;
}
.hero-slider-content .hero-slider-wrapper {
  height: 100%;
}
.hero-slider-content .slide-item {
  height: 100%;
  display: block;
}
.hero-slider-content .slide-item picture {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  width: 100%;
}
.hero-slider-content .hero-slide-content {
  box-shadow: 0px 0px 5px black;
  width: 90%;
  left: 5%;
  bottom: 1rem;
  padding: 1rem;
  background: var(--col-blau-trans);
}
.hero-slider-content .hero-slide-content h2, .hero-slider-content .hero-slide-content h3, .hero-slider-content .hero-slide-content h4, .hero-slider-content .hero-slide-content .subline, .hero-slider-content .hero-slide-content p {
  color: white;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .hero-slider-content .hero-slide-content {
    width: 50%;
    right: 0;
    left: unset;
    bottom: unset;
    top: 0rem;
    bottom: 0rem;
  }
}
.hero-slider-content h2.slide-heading {
  color: var(--col-tuerkis-hell);
  font-size: var(--fs-04);
  line-height: 1.2;
}
.hero-slider-content p.subline {
  font-size: var(--fs-02);
  margin-bottom: 1rem;
}
.hero-slider-content a {
  display: inline-block;
  margin-top: 0.5em;
  background: var(--col-tuerkis);
  padding: 0.25em;
  text-shadow: 1px 1px 1px black;
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

@font-face {
  font-family: "Ubuntu";
  font-weight: 300;
  src: url(_fonts/Ubuntu-Light.ttf);
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 400;
  src: url(_fonts/Ubuntu-Regular.ttf);
}
@font-face {
  font-family: "Ubuntu";
  font-weight: 500;
  src: url(_fonts/Ubuntu-Medium.ttf);
}
@font-face {
  font-family: "Ubuntu";
  font-weight: bold;
  src: url(_fonts/Ubuntu-Bold.ttf);
}
:root {
  --fs-root: clamp(.75rem, calc(2vmax + .1rem), 1.3rem);
  --letter-spacing: clamp(0em, 0.02vw, 0.05em);
  /* --fs-00: .7rem;
  --fs-01: 1rem;
  --fs-02: 1.2rem;
  --fs-03: 1.3rem;
  --fs-04: 1.6rem;
  --fs-05: 1.9rem;
  --fs-xl: 3rem; */
  --fs-00: calc((var(--fs-01)/10) * 7);
  --fs-01: 1rem;
  --fs-02: calc(var(--fs-01) * 1.2);
  --fs-03: calc(var(--fs-01) * 1.4);
  --fs-04: calc(var(--fs-01) * 1.7);
  --fs-05: calc(var(--fs-01) * 2.2);
  --fs-xl: calc(var(--fs-01) * 2.5);
}

html {
  font-size: var(--fs-root);
  letter-spacing: var(--letter-spacing);
  hyphenate-limit-chars: 10 3 3;
}

body {
  font-family: "Ubuntu", sans-serif;
  line-height: 1.4;
}

h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin-bottom: 0.5em;
  line-height: 1.1;
}

p, li {
  -webkit-hyphens: auto;
          hyphens: auto;
}

h1 {
  font-size: var(--fs-05);
}

h2 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--fs-04);
  color: var(--col-blau);
}

h3 {
  font-size: var(--fs-03);
}

p, ul, li, h4, h5, h6, input, button {
  font-size: var(--fs-01);
  margin-bottom: 1ch;
}

ul li strong {
  color: var(--col-blau);
}

@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    /*         --fs-00: .9rem;
            --fs-01: 1rem;
            --fs-02: 1.25rem;
            --fs-03: 1.5rem;
            --fs-04: 1.8rem;
            --fs-05: 2.5rem; */
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    /*         --fs-00: 1rem;
            --fs-01: 1.1rem;
            --fs-02: 1.3rem;
            --fs-03: 1.7rem;
            --fs-04: 2rem;
            --fs-05: 2.7rem; */
  }
}
a:-moz-any-link {
  color: unset;
  text-decoration: none;
}
a:any-link {
  color: unset;
  text-decoration: none;
}

.main-home h3 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--fs-04);
  color: var(--col-blau);
}

.intro {
  font-size: var(--fs-02);
  margin-bottom: 2rem;
  color: var(--col-grau);
}

:root {
  --col-blau: hsl(197, 100%, 31%);
  --col-blau-trans: hsla(197, 100%, 31%, .95);
  --col-blau-dunkel: hsl(197, 100%, 20%);
  --col-tuerkis: hsl(175, 40%, 66%);
  --col-tuerkis-hell: hsl(175, 40%, 80%);
  --col-grau: hsl(49, 1%, 33%);
  --col-pink: hsl(327, 100%, 45%);
  --col-green: hsl(175, 16%, 67%);
  --col-green-light: hsl(175, 40%, 88%);
  --col-grad-blau-tuerkis: linear-gradient(90deg, var(--col-blau), var(--col-tuerkis));
  --col-grad-blau-blau-dunkel: linear-gradient(90deg, var(--col-blau), var(--col-blau-dunkel));
}

:root {
  --header-height: 15dvh;
  --grid-nav-main: 2rem;
  --content-main: 90%;
  --grid-base: 1fr var(--content-main) 1fr;
  --footer-height: calc(100dvh - var(--grid-nav-main));
  --gr-content-col: 25%;
  --gr-gap: 1rem;
  --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main: 80%;
    --gr-content-col: 14rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  :root {
    --content-main: 70%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main: 60%;
    --gr-content-col: 16rem;
    --grid-base: 1fr var(--gr-content-col) var(--gr-content-col) var(--gr-content-col) 3fr;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main: 50%;
  }
}
:root {
  --spacer-side: 1rem;
}

:root {
  --border-reg: 1rem;
}

.c2a {
  cursor: pointer;
}

ul {
  list-style: none;
  position: relative;
  padding-left: 3rem;
}

li {
  position: relative;
  max-width: 70ch;
}

ul li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: -1.5em;
  height: 1.2em;
  width: 1.2em;
  background: url(_bm/ame-bullet-arrow-blau.svg), no-repeat;
}

.typo-hl {
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--fs-04);
}

.hidden {
  display: none !important;
}

.grid-full-width {
  grid-column: 2/-1;
  position: relative;
  height: var(--typo-xl);
  margin: 4rem 0;
}
.grid-full-width h2 {
  font-size: var(--fs-03);
  font-weight: bold;
  color: var(--col-blau);
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .grid-full-width h2 {
    font-size: var(--fs-05);
  }
}
.grid-full-width > * {
  grid-column: 2/3;
}

.grid-full-width::before {
  --spalte-links: calc((100vw - var(--content-main))/2);
  content: "";
  position: absolute;
  background: url(_bm/ame-stripes-long.svg) no-repeat;
  background-size: auto 100%;
  background-position: right;
  height: 100%;
  width: 5rem;
  width: calc((100% - var(--content-main)) / 2);
  width: var(--spalte-links);
  left: calc(-1 * var(--spalte-links));
}

.content-wrapper > div {
  display: grid;
  grid-template-columns: repeat(3, var(--gr-content-col));
  gap: var(--gr-gap);
}
.content-wrapper > div h2, .content-wrapper > div h3 {
  grid-column: 1/-1;
}
.content-wrapper > div figure {
  grid-column: 1/-1;
}
.content-wrapper > div p, .content-wrapper > div ul {
  grid-column: 1/-1;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .content-wrapper > div h2, .content-wrapper > div h3 {
    grid-column: 2/-1;
  }
  .content-wrapper > div figure {
    grid-column: 1/-1;
  }
  .content-wrapper > div p, .content-wrapper > div ul {
    grid-column: 2/-1;
  }
}

.content-multi-column > div {
  grid-auto-flow: row;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .content-multi-column > div {
    display: grid;
    grid-template-columns: repeat(3, var(--gr-content-col));
    gap: var(--gr-gap);
    grid-auto-flow: column;
  }
}
.content-multi-column h3 {
  font-size: var(--fs-01);
  text-transform: none;
  line-height: 1;
  -webkit-hyphens: auto;
          hyphens: auto;
  margin-bottom: 1rem;
}/*# sourceMappingURL=base.css.map */