/*
    Theme Name: lernnavi
    Theme URI: lernnavi.ch
    Description: lernnavi
    Version: 3.0
    Author: Felix Schlatter | Schlatter corporate
    Author URI: http://schlattercorporate.com
    Tags: no tags

    License:        All Rights Reserved
*/

/* COLORS */

:root {
  --gruen:     #0A9582;
  --mgruen: #004e64;
  --dgruen: #00222C;
  --gelb: #FFD64A;
  --hellblau: #004e64;
  --blau: #0A384E;
  --dblau: #00222C;
  --hellgrau: #eaeaea;
  --grau: rgba(219, 219, 219,1);
  --mgrau: rgb(176, 175, 175);
}

html {
    color: #fff;
}

::-moz-selection {
    background: #fff;
    color: rgba(1,25,31,1);
    text-shadow: none;
}

::selection {
    background: #FFD64A;
    color: rgba(1,25,31,1);
    text-shadow: none;
}



audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

html {
  scroll-behavior: smooth;
}


* {

  text-rendering:optimizeLegibility;
}
.noscroll {
  overflow:hidden;
}
a {outline: none; text-decoration: none; } a:active {outline: none; } a, a:active, a:focus {outline: none; } * {outline: none; }


/* ==========================================================================

   ========================================================================== */




@font-face {
  font-family:"BL";
  font-weight: 100;
  src:url("fonts/BrownPro-Light.otf");
}
@font-face {
  font-family:"BB";
  font-weight: 100;
  src:url("fonts/BrownPro-Bold.otf");
}
@font-face {
  font-family:"BR";
  font-weight: 100;
  src:url("fonts/BrownPro-Regular.otf");
}


h1,h2,h3, strong {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   outline: 0;
}

html,body{
  font-family:"BL";
    position:relative;

    font-size: 20px;
      line-height: 28px;



  color: var(--mgruen);
}
h1,h2,h3 {font-family:"BB";font-size: 42px;margin:0;margin-bottom: 25px;
line-height: 48px;color: var(--gruen);}

strong {
  font-size: 24px;
    line-height: 32px;
    font-family: "BB";
    color: var(--mgruen);
}

a {text-decoration: none; color: var(--mgruen);}

body {background-color: var(--hellgrau);}
.container {
  overflow: hidden;
  display: block;
  width: 100vw;
}

header {position: fixed;top:0;left:0;right:0;z-index: 999;
  transition: all 0.25s ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
header.scrolled {}
header .logo {width: 100%;
  float: left;
  max-width: 75px;
    opacity: 0;
  background:rgba(255,255,255,0);
  padding: 25px;
  margin-left: 0px;
  padding-top: 30px;
  transition: all 0.25s ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
header.scrolled .logo, header.nothome .logo  {
  opacity: 1;
  max-width: 75px;
  padding:0;
  padding-top: 30px;
  background:rgba(255,255,255,0);
}
.logo svg, .biglogo svg {width: 100%;height: auto;}
.logo .st0, .biglogo .st0 {fill:none;}
.logo .st1{fill:var(--blau);  transition: all 0.25s ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);}

.logo.white svg path.st1 {
  fill:#fff;
}

 .biglogo .st1{fill:var(--blau);}
header.scrolled .logo .st1{}
.welcome_logo {float: right;width: 100px;height: auto;}

.logosvg {
  position: relative;
  z-index: 1;
  transform: scale(0.8);
}
header .logosvg {transform: scale(1);}
.biglogo {
  position: relative;
  width: 300px;
  height: 300px;
  float: right;
  border-radius: 100%;
  background: var(--blau);
  padding: 100px;
  display: flex;
  align-items: center;
  justify-content: center;

  outline: 5px solid rgb(238,238,238);
  box-shadow: -6px -6px 17px 10px #fff, 6px 6px 17px 1px #424242, inset 6px 6px 17px 1px #333;
  transition: all 0.15s ease-in-out;
  backdrop-filter: blur(3px);
  transform-origin: center;
  transition: all 0.15s ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation: dotxxxx 5s infinite cubic-bezier(0.900, 0.000, 0.175, 1.000);
}
@keyframes dotxxxx {
 0% {
  outline: 5px solid rgb(238,238,238);
   background: rgba(255,255,255, 0.1);
   box-shadow: -6px -6px 17px 10px #fff, 6px 6px 17px 1px #424242, inset 6px 6px 17px 1px #ccc;
 }
 80% {
  outline: 15px solid rgb(255,255,255);
  background: rgba(255,255,255, 0.1);
  box-shadow: -6px -6px 17px 10px #fff, 6px 6px 17px 1px #424242, inset 6px 6px 17px 1px #ccc;
 }
 100% {
outline: 5px solid rgb(238,238,238);
  background: rgba(255,255,255, 0.1);
   box-shadow: -6px -6px 17px 10px #fff, 6px 6px 17px 1px #424242, inset 6px 6px 17px 1px #ccc;
 }
}

.no-touch .biglogo:hover {
  background: var(--gruen) !important;
  animation: none;
}
.biglogo svg.logosvg {
  transition: all 0.15s ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.no-touch .biglogo:hover svg.logosvg {
  transform: scale(0.9);
}
.no-touch .biglogo:hover svg .st1 {
  fill:#fff;
}
.progress-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.progress-ring__circle {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  r: 48;
  cx: 50;
  cy: 50;
  stroke-dasharray: 301.59;
  stroke-dashoffset: 301.59;
  animation: progress 6s cubic-bezier(0.900, 0.000, 0.175, 1.000) infinite;
}

@keyframes progress {
  0%  {stroke-dashoffset: 301.59;     stroke-width: 1;    stroke:var(--gelb); }
  50%  { stroke-dashoffset: 0;     stroke-width: 3.5;    stroke:var(--gruen); }
  100%  {stroke-dashoffset: -301.59;  stroke-width: 1;    stroke:var(--mgruen);}
}

.progress-ring2 {
  position: absolute;
  inset: 0px;
  transform: rotate(-90deg);
}

.progress-ring__circle2 {
  display: none;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  r: 48;
  cx: 50;
  cy: 50;
  transform: scale(0.95);
  transform-origin: center;
  stroke-dasharray: 301.59;
  stroke-dashoffset: 301.59;
  animation: progresstwo 9s cubic-bezier(0.900, 0.000, 0.175, 1.000) infinite;
}

@keyframes progresstwo {
  0%  {stroke-dashoffset: 301.59;     stroke-width: 1;    stroke:#fff; }
  60%  { stroke-dashoffset: 0;        stroke-width: 1;    stroke:#fff;}
  100%  {stroke-dashoffset: -301.59;  stroke-width: 1;  stroke:#fff; }
}
.nadel {
  width:273px;
  position: absolute;
  top:50%;
  left:50%;
  height: 5px;
  background: linear-gradient(275deg,var(--gruen) 0%, rgba(255, 255, 255, 0) 50%);
  z-index: 1;
  margin-top: -3px;
  transform-origin: left center;
  animation: nadel 6s cubic-bezier(0.900, 0.000, 0.175, 1.000) infinite;
}
@keyframes nadel {
  0%    {transform: rotate(-90deg);}
  60%   {transform: rotate(-44.5deg);}
  100%  {transform: rotate(-90deg);}
}
.spitze {
  position: absolute;
    right: -5px;
    width: 55px;
    height: 5px;
    background: var(--blau);
    top: 0px;
}
.plineholder {
  z-index: 1;
  position: absolute;
  top:0px;right:0px;bottom:0px;left:0px;
  transform-origin: center;
  transform: rotate(-45deg);
  /* animation: liney 3s cubic-bezier(0.900, 0.000, 0.175, 1.000) infinite; */
}
.pline {background:var(--blau);position: absolute;z-index: 10;}
#l1 {height:  35px;width:   1px;top:-10px;left:50%;     }
#l3 {height:  35px;width:   1px;bottom:-10px;left:50%;  }
#l2 {width:   35px;height:  1px;top:50%;right:-10px;    }
#l4 {width:   35px;height:  1px;top:50%;left:-10px;     }

@keyframes liney {
  0%    {transform: rotate(0deg)    scale(1.1);}
  60%   {transform: rotate(65deg)  scale(1);}
  100%  {transform: rotate(0deg) scale(1.1);}
}

.biglogo svg {
  width: 100%;
    height: auto;
    display: block;
}







.navholder {float: right;transition: all 0.15s ease-in-out;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);}
.scrolled .navholder, .nothome .navholder {padding-top: 28px;}
nav {font-family: "BB";display: block;
font-size: 16px;
line-height: 22px;

}
nav.first {float: right;
  clear: both;
padding-top: 9px;
}
nav.second {text-align: right;font-size: 12px;line-height: 16px;}
nav a {color: #fff;}
nav.second a {color: #fff;float: left;}
nav ul {padding:0;margin:0;}

nav.second ul li {float: left;padding:0;margin:0;display: inline;
margin-left: 10px;
padding:6px;
padding-left: 15px;
padding-right: 15px;
background: var(--gruen);
border-radius: 5px;
transition: all 0.15s ease-in-out;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
/*
header.scrolled nav.second ul li , header.nothome nav.second ul li{
  padding:2px;
  padding-top: 2.5px;
  padding-left: 10px;
  padding-right: 10px;
}
*/
.no-touch nav.second ul li:hover {
  background: var(--gelb);
}
.no-touch nav.second ul li.chds:hover  {
  background: none;
}
.no-touch nav.second ul a:hover li {color: var(--dgruen);}

a {transition: all 0.15s ease-in-out;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);}
nav.first ul li {float: left;padding:0;margin:0;display: inline;
padding:6px;
padding-left: 15px;
padding-right: 15px;
background: var(--mgruen);
border-radius: 5px;
margin-left: 10px;
transition: all 0.15s ease-in-out;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.no-touch nav.first ul li:hover {
  background: var(--gelb);
}
 nav.first ul li.current,  nav.second ul li.current {
  background: var(--gelb);
  color: var(--dgruen);
}
nav.first ul li.current a, nav.second ul li.current a {color: var(--dgruen);}
.no-touch nav.first ul a:hover li  {color: var(--dgruen);}
/*
header.scrolled nav.first ul li, header.nothome nav.first ul li  {
  padding:2px;
  padding-top: 2.5px;
  padding-left: 10px;
  padding-right: 10px;
}
*/
nav.second {float: right;
  clear: both;padding-top: 9px;}
.max1740 {
  display: table;
  margin: 0 auto;
  width: calc(100vw - 200px);
  max-width: 1540px;
  padding-left: 100px;
  padding-right: 100px;
}
.max1740_unset {
  max-width: unset;
  width: calc(100vw - 100px);
  padding-left: 50px;
  padding-right: 50px;
}
section {
  display: block;
  position: relative;
  z-index: 50;
}
article p {
  margin-left: 55px;
  display: block;
}
.wp-video {width: 100% !important; display: block;margin-top: 50px;margin-bottom: 100px;}
video {display: block;
  width: calc(100% - 10px);
  height: auto;
border-radius: 10px;
border:5px solid #fff;
margin-top: 50px;

}
.page video {
  margin-top: 25px;
  margin-bottom: 50px;
}
.landing {


  padding-top: 100px;
  position: relative;
  min-height: calc(100vh - 100px);
}
.landing .over {
    display: block;
  position: relative;
  z-index: 10;
  transform: translateY(calc(48% - 100px));
}
.landing .welcome {
  display: block;
  margin-top: 100px;
  margin-bottom: 100px;
  font-size: 24px;
  line-height: 32px;
  font-family:"BB";
  color: var(--mgruen);
}
.landing .welcome span.dsahk {
  margin-left: 55px;
    max-width: 600px;
    display: block;
}
.landing .welcome h1{
    max-width: 600px;
}
.landing .welcome h1 {
  color:var(--gruen);
  text-align: left;
    font-size: 78px;
    line-height: 80px;
  margin-bottom: 50px;
}




#iconContainer {
  position: fixed;
    z-index: 1;
    display: block;
    overflow: hidden;
    left: 50vw;
    top: 0px;
    right: 0;
    bottom: 0;
    opacity: 0.5;
}


.cell {
  width: 5vh;
  height: 5vh;
  float: left;
  position: relative;

}
.bgcell {
  z-index: 1;
  position: absolute;
  top:0;
  left:0;right:0;bottom:0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(0.25);
}

.cell .overlay {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  background-color:  rgba(235, 235, 235, 1);
}
.cell .overlay .question {
  display: none;
  position: absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 30px;
  user-select: none;

    opacity: 0.8;
    font-family: "BB";

}
.a-aos {display:block;}


/* Button als Link (inline-block macht es wie ein Button) */
.button {
  display: inline-block;
  position: relative;
  padding: 25px 60px 25px 30px;
  font-family: "BB", sans-serif;
  font-size: 16px;
  line-height: 22px;

  background: var(--gruen);
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;

  outline-offset: 0px;
  box-shadow: -6px -6px 17px 10px #fff, 6px 6px 17px 1px #424242, inset 6px 6px 17px 1px #077364;
  transition: all 0.15s cubic-bezier(0.42, 0, 0.58, 1);
}

.button .lin {
  z-index: 2;
    border-radius: 10px;
  position: absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
    outline: 5px solid var(--hellgrau);
}
.button .spckl {
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 35px;
  background-image: url("img/arrowright_.svg");
  background-size: 75px auto;
  background-repeat: no-repeat;

  background-position: center;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  transition: all 0.15s cubic-bezier(0.42, 0, 0.58, 1);
  pointer-events: none;

}
.no-touch .button.hover:hover  {
  padding-left: 50px;
  padding-right:90px;
  background: var(--blau);
  box-shadow:  -6px -6px 17px 10px #FFF, 6px 6px 17px 1px #424242, inset 6px 6px 17px 1px #052331;
}
.no-touch .button.hover:hover .spckl {
  width: 55px;
}

footer .button {
  margin-left: 0;
  margin-top: 175px;
  float: left;
  box-shadow: -6px -6px 17px 10px #164154, 6px 6px 17px 1px #0D0D0D, inset 6px 6px 17px 1px #077364;
}
.no-touch footer .button.hover:hover {
  box-shadow:  -6px -6px 17px 10px #164154, 6px 6px 17px 1px #424242, inset 6px 6px 17px 1px #052331;
}

.landing .button {
  margin-top: 100px;
}
nav.second ul li.chds {position: relative;
  padding: 0;
  background: none;
}

.sidebutton {
  position: relative;
  display: block;
  width: 140px;
    z-index: 99;
    padding-top:0px;
    padding-bottom: 0px;
    padding-left: 0;
    padding-right: 0;
    border: none;
  border-radius: 0px;
  box-shadow: none;
  height: 30px;
  background: none;
}

.sidebutton span {
  font-size: 12px;
    line-height: 16px;
    position: absolute;

    right: 0px;
    padding-top: 6px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 6px;
    padding-right: 35px;
    top: 0px;

    background-color: var(--mgruen);

    text-align: right;
    color: #fff;
    border-radius:5px;
    animation: bg 2s cubic-bezier(0.900, 0.000, 0.175, 1.000) infinite;
  }

  @keyframes bg {
      0% {    background-color: var(--mgruen); }
    50% {     background-color: var(--gruen); }
    100% {    background-color: var(--mgruen); }
  }

.no-touch .sidebutton:hover span  {
background-color: var(--gelb) !important;
color: var(--mgruen) !important;
}
.sidebutton .spckl {
  top: 0px;
  right: 0px;
  width: 25px;
    height: 28px;
    background-position: center 2px;
    background-size: 6px auto;
  background-position: 7px center;
    background-image: url("img/arrowright_2.svg");
    background-color: var(--gelb);
    border-radius: 0;
    border-bottom-right-radius:5px;
    border-top-right-radius:5px;
    animation: spkl 2s cubic-bezier(0.900, 0.000, 0.175, 1.000) infinite;
  }

  @keyframes spkl {
    0% {background-position: 5px center;}
    50% {background-position: 13px center;}
    100% {background-position: 5px center;}
  }
.further {
  display: block;
  padding-top: 200px;

}
.fifty_holder {
  display: block;
  padding-bottom: 100px;
}
.fifty {

}
.fifty_1 {
    border:5px solid #fff;
    width: calc(50% - 10px);
    background: none;
    border-radius: 10px;
    padding-bottom: 55px;
      padding-top: 50px;
    position: relative;
    backdrop-filter: blur(4px);
}

.fifty_2 {
width: 50%;
}
.fifty:nth-child(1) {
    float: left;
}
.fifty:nth-child(2) {
    float: right;
}
.fifty:nth-child(1) h1 {
  padding-left: 50px;
  padding-top: 55px;
}

.aktuelles_holder {
  display: block;
  position: relative;
}
.aktuelles_holder img.icon {
  position: absolute;
    height: 34px;
    width: auto;
    top: 7px;
    left: 17px;
}
h1.nicetitle {display: block;margin-bottom: 50px;}
h1.contenttitle {color: var(--mgruen);}
#ueberuns h1.contenttitle {color: var(--gruen);}
h2.pagetitle {
  color: var(--mgrau);
    text-align: left;
    font-size: 78px;
    line-height: 80px;
    margin-bottom: 125px;
    margin-top: 50px;
}

.anitext span {
  filter:blur(10px);
   opacity: 0;
   transition:
   opacity 0.15s cubic-bezier(0.42, 0, 0.58, 1),
   filter 0.25s cubic-bezier(0.42, 0, 0.58, 1)
   ;

 }
 .anitext span.visible {
   opacity: 1;
filter:blur(0px);
 }

 .aktuelles_holder {
  border-bottom: 1px solid #fff;
  padding-left: 50px;
  padding-right: 50px;
}
.aktuelles_holder.first {
  border-bottom:none;
  padding-left: 0;
  padding-right: 0;
}
.fifty .aktuelles_holder:nth-child(1), .textholder .aktuelles_holder:nth-child(1) {
  border-top: 1px solid #fff;
}
.aktuelles_content {display: none;max-width: 1150px;  }
.aktuelles_holder.first .aktuelles_content {display: block;max-width: unset;}
.aktuelles_holder h1.toggler {position: relative;display: inline-block;cursor: pointer;margin:0;
  font-size: 24px;
  line-height: 32px;
  color: var(--mgruen);
  padding-top: 10px;
  padding-bottom: 10px;
}
#features .aktuelles_holder {
padding-left: 70px;
}
#features .aktuelles_holder p {margin-top: 0;}
#features img.leftimg {
  width: 100%;
  display: block;
  max-width: 300px;
  height: auto;
  margin-bottom: 50px;
  float: left;
  margin-right: 50px;
}
.no-touch .aktuelles_holder h1.toggler:hover {
  color: var(--gruen);
}
.aktuelles_holder h1.toggler span {
  white-space:nowrap;
  display: inline-block;
    height: 18px;
    width: 12px;
  background-image: url("img/arrowright_2.svg");
  background-size: 9px auto;
  background-repeat: no-repeat;
  background-position: 0px 2px;
  transition: all 0.15s ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.aktuelles_holder h1.toggler.active span {
  transform: rotate(90deg);
}
.aktuelles_holder p {margin-left: 0;}
.aktuelles_holder.first p {margin-left: 50px;}
section.plain  {
  padding-top: 100px;
  padding-bottom: 150px;
  /*
  background:  var(--hellgrau);
 background: linear-gradient(-270deg, rgba(234, 234, 234, 1) 45%, rgba(234, 234, 234, 1) 100%);
 */
}
section.page {
  padding-top: 150px;
  padding-bottom: 150px;
  display: block;
}
section#ueberuns.page {
  padding-bottom: 0;
}
.checkyo {
  display: block;
  position: relative;z-index: 2;
}
footer {
  position: relative;
  z-index: 100;
  color: #fff;
  display: block;
  background:var(--dblau);
  background: linear-gradient(45deg, rgb(0, 34, 44) 0%, rgba(10, 56, 78, 1) 100%);
  padding-top: 200px;
  padding-bottom: 50px;
  min-height: calc(100vh - 250px);
}
footer.ueber-uns {
  padding-top: 100px;
}
footer h1.sectiontitle {
  display: block;
  margin:0;padding-bottom: 200px;
}
footer.ueber-uns h1.sectiontitle {
  padding-bottom: 50px;
}
.kontaktholder {
  font-size: 20px;
  line-height: 28px;
}
.kontakt-row{
  display: flex;
  align-items: center;
  gap: 0;
}
.kontaktholder:nth-child(2){
  margin: 0 auto;
}

.kontakte {float: right;
width: 66.66%;
}
.adr {
  float: left;
  font-size: 24px;
  line-height: 32px;
  font-family: "BB";

  margin-top: 125px;
  width: calc(33.33% - 55px);
  margin-left: 55px;
color: var(--gruen);
}
.kontaktholder .thumb {display:block;width: 200px;overflow: hidden;height: 200px;border-radius: 10px;margin-bottom: 25px;
  filter: grayscale(0.3);


}
.kontaktholder a {font-family: "BB";color: var(--gruen);}
.kontaktholder .thumb img {display: block;width: 100%;height: auto;}
.kontaktholder h1 {
  font-size: 24px;
  line-height: 32px;
  font-family: "BB";
  color: var(--gelb);
  margin-bottom: 25px;

}
.impr {font-size: 16px;
  line-height: 22px;
padding-top: 50px;display: block;color:var(--gruen);
} .impr a {color:var(--gruen);}

ul {
  list-style-image:url("img/arrowright_2.svg");
  padding-left: 15px;
}
.text {max-width: 1080px;}
.text a {
background: #fff;
border-radius: 5px;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-family: "BB";

    padding-left: 5px;
    padding-right: 3px;

    color: var(--blau);
    display: inline-block;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.text a::after {
  position: relative;
    background-image: url("img/arrowright_2.svg");
    background-size: auto 13px;
    display: inline-block;
    width: 15px;
    height: 20px;
    content: "";
    background-position: 6px 7px;
    background-repeat: no-repeat;
    transition: all 0.15s ease-in-out;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.no-touch .text a:hover {
  background: var(--gruen);

}
.no-touch .text a:hover::after {
  background-position: 8px 7px;
}
.textholder {display: block;margin-left: 55px;}
#faq .textholder, #features .textholder {
  border: 5px solid #fff;
  background: none;
  border-radius: 10px;
  padding-bottom: 55px;
  padding-top: 50px;
  position: relative;
  backdrop-filter: blur(4px);
}
.text img {max-width: 100%;display: block;height: auto;}
#ueberuns .textholder {
  margin-left: 0;
}

#ueberuns .text {
  background: none;
  padding-bottom: 55px;
  position: relative;
  backdrop-filter: blur(4px);
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 50px;
  float: left;
  width: calc(33.33% - 50px);
}
#ueberuns .text:nth-child(1) {

}
#ueberuns .text:nth-child(2) {

}
#ueberuns .text:nth-child(3) {

}
#ueberuns .text p {
  margin-left: 0;

}
#ueberuns strong {

}
#normalpage .text {

  background: none;

  position: relative;
  backdrop-filter: blur(4px);

  max-width: 955px;
}


.hamb {
  top: 28px;
    right: 25px;
    position: fixed;
    z-index: 999;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: none;
}
.hamb .hambline {
  position: absolute;
  left:0;height: 5px;
  background: var(--dgruen);
  width: 30px;
  transform-origin: center;
  border-radius: 5px;

  transition: all 0.15s ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.hamb .hambline:nth-child(1) {top:0px;}
.hamb .hambline:nth-child(2) {top:12.5px;}
.hamb .hambline:nth-child(3) {bottom:0px;}

.hamb.active .hambline {background: var(--gruen);}
.hamb.active .hambline:nth-child(1){top: 12.5px; transform: rotate(-45deg);}
.hamb.active .hambline:nth-child(2){transform: scaleY(0);}
.hamb.active .hambline:nth-child(3){bottom: 12.5px; transform: rotate(45deg);}

@media (max-width:1340px) {
  .biglogo {width: 200px;height: 200px;margin-left: 50px;margin-right: 25px;}
  .nadel { width: calc(50% + 10px);}
  .max1740 { width: calc(100vw - 50px); max-width: unset; padding-left: 25px; padding-right: 25px; }
  #faq .textholder, #features .textholder {margin-left: 0;}
  .text { max-width: unset; }
  .landing .welcome h1, h2.pagetitle {font-size: 56px; line-height: 56px;}
  h2.pagetitle {margin-bottom: 50px;}
  .aktuelles_holder {padding-left: 25px;padding-right: 25px;}

  footer {min-height: unset;padding-top: 50px;}
  article p, .textholder {margin-left: 0;}
  #ueberuns .text { float: none;display: block; padding:0; width: unset; max-width: unset; }
  .max1740_unset { max-width: unset;padding-left: 25px;padding-right: 25px; }
  #normalpage .text {max-width: unset;}
  .adr {margin-left: 0;}
}

@media (max-width:1160px) {
  footer h1.sectiontitle {padding-bottom: 100px;}
  .adr {float: none;margin-top: 0;margin-bottom: 50px;width: unset;}
  .kontakt-row {display: block;align-items:unset;}
  .kontakte {float: none;width: unset;}
  .kontaktholder, .kontaktholder:nth-child(2), .kontaktholder:nth-child(3), .kontaktholder:nth-child(1) { margin-bottom: 25px; }
  .kontaktholder .thumb {float: left;margin-right: 50px;}
  .kontaktholder h1 {margin-bottom: 0px;}
  .kontaktholder p {margin-top: 0;}
  footer .button {margin-top: 25px;}

  .fifty_2, .fifty_1, .fifty, .fifty:nth-child(1), .fifty:nth-child(2) {float: none;width: unset;display: block;}
  .fifty:nth-child(1) h1 {padding-left: 0;padding-top: 0;}
  .fifty_1, .fifty_2 {padding-top: 0;padding-bottom: 0;}
  #faq .textholder, #features .textholder {padding-top: 5px;padding-bottom: 5px;}
  #features .aktuelles_holder:last-child {border-bottom: 0;}
  .fifty .aktuelles_holder:nth-child(1), .textholder .aktuelles_holder:nth-child(1) { border-top: none; }
  .fifty_holder {padding-bottom: 50px;}
  section.plain {padding-top: 50px;padding-bottom: 50px;}
  footer h1.sectiontitle {padding-bottom: 50px;}

  .further {padding-bottom: 25px;padding-top: 50px;}

  .landing .welcome span.dsahk, .aktuelles_holder.first p {max-width: unset;margin-left: 0;}

  .landing .welcome h1, h2.pagetitle {font-size: 34px;line-height: 38px;}
  h1, h2, h3 {font-size: 28px;line-height: 30px;}
  .adr, html, body, .kontaktholder, .aktuelles_holder h1.toggler, .landing .welcome, .button, nav, .kontaktholder h1, strong {font-size: 16px;line-height: 22px;}
  .aktuelles_holder h1.toggler span { background-size: 6px auto; background-position: 0px 7px;}
  .aktuelles_holder h1.toggler.active span {background-position: 5px 6px;}
  .aktuelles_holder:last-child {border-bottom: none;}

  .landing {min-height: unset;padding-bottom: 50px;}
  .button {padding: 10px 47px 10px 15px;}
  .no-touch .button.hover:hover  { padding: 10px 47px 10px 15px; background: var(--blau); }
  .no-touch .button.hover:hover .spckl { width: 35px; }

  .text a::after {
    background-size: auto 10px;
    background-position: 6px 10px;
  }
}





@media (max-width:860px) {
  body {hyphens: auto;}
  body a {hyphens: none;}
  .biglogo {width: 100px;height: 100px;}

  .landing .welcome h1, h2.pagetitle {font-size: 24px;line-height: 28px;}
  h1, h2, h3 {font-size: 20px;line-height: 22px;}
  h2.pagetitle {margin-top: 25px;margin-bottom: 25px;}

  section.page {padding-bottom: 50px;}
  .landing .over {transform: none;}
  .landing .welcome {margin-top: 25px;margin-bottom: 0;}
  .biglogo {margin-left: 0;margin-right: 0;float: none;margin:0 auto;margin-bottom: 50px;}
  .landing .button {margin-top: 50px;}
  .kontaktholder .thumb {float: none;margin-right: 0;}
  header.scrolled .logo, header.nothome .logo {max-width: 50px;padding-top: 25px;}

  .logo.active  svg path.st1 {
  fill: var(--gruen);
}

  .hamb {display: block;}
  .navholder {position: fixed;top:0;left:150vw;right:0;bottom:0;background: var(--dgruen);padding: 25px;float: none;display: block;    padding-top: 85px !important;
    display: flex;
    flex-flow: column;
  }

  .navholder.active {left:0;}
  nav.second, nav.first {float: right;padding-top: 0;
  clear: both;
  }
  nav.second ul li, nav.first ul li, nav.second a {float: none;display: table;text-align: right;margin-left: 0;
    text-align: right;
  float: right;
  clear: both;
  }
  nav.second {order:2;}
  nav.first {order:1;}
  nav a, nav.first ul li {margin-bottom: 10px;}
  #features .aktuelles_content.text {
    margin-left: -50px;
  }
}