/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/css/fonts/roboto-v48-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/css/fonts/roboto-v48-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('/css/fonts/roboto-v48-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/css/fonts/roboto-v48-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-condensed-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('/css/fonts/roboto-condensed-v30-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/css/fonts/roboto-condensed-v30-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

:root {
      --primary: #0377C2;
      --secondary: #4eb677;
      --lightgreen:#19f78c;
      --darblue:#003f84;
      --lightsec: #f6f6f6;
      --light: #f9f9f9;
      --lightcyan: #f4f8f7;
      --text: #283645;
    }

html{height:100%}

*{margin:0px; padding:0px}
:focus{outline:0}
img{border:none;max-width: 100%;height: auto;}
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

body{font-family: 'Roboto', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:16px;line-height:1.5em;margin:0px;padding:0;color:#283645;background:#fff;
  overflow-x: hidden;
height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-direction:column}

strong, b{font-weight: 600;}

    

    
    .tabs {
      display: flex;
      justify-content: center;
      margin-bottom: 2rem;
      margin-top: 4rem;
    }

    .tab-button {
      all: unset;
      padding: 0.25rem 1rem;
      border: 1px solid var(--primary);
      background: none;
      color: var(--primary) !important;
      cursor: pointer;
      transition: background 0.3s;
      font-size: 0.9rem;
    }
    .tab-button:hover {
      background: var(--light);
    }

    .tab-button.active {
      background: var(--primary);
      color: #fff !important;
    }

    .tab-content {
      display: none;
      animation: fadeIn 0.4s ease-in-out;
    }

    .tab-content.active {
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 4rem;
    }

    .plan {
      border-radius: 12px;
      padding: 2rem;
      flex: 1 1 300px;
      max-width: 374px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      margin: 0;
      background: #FFF;
    }

    .plan h2 {
      margin-top: 0;
      font-size: 26px;
      margin-bottom: 1em;
    }

    .plan .price {
      font-size: 40px;
      font-weight: 600;
      
    }
    .plan .price span {
      font-size: 1rem;
    }

    .plan ul {
      list-style: none;
      padding: 0;
      margin: 1rem 0 3rem;
    }

    .plan ul li {
      padding: 0.4rem 0 0.4rem 20px;
      position: relative;
      border-bottom: 1px solid #e9e9e9;
    }

    .plan ul li::before {
      content: "✓";
      color: var(--secondary);
      font-weight: 600;
      position: absolute;
      left: 0;
    }
    .plan ul li span{
      display: inline-block;
  background: #939aa2;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-style: italic;
  font-weight: 600;
  font-family: serif;
  position: absolute;
  right: 0;
    }
    .tooltip {
      position: relative;
      cursor: help;
      transition: background-color 0.2s ease;
    }

    .tooltip::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 1.5rem;
      background: #333;
      color: #fff;
      padding: 0.5rem;
      border-radius: 4px;
      font-size: 0.75rem;
      display: none;
      z-index: 10;
      font-family: 'Roboto', sans-serif;
      font-style: normal;
      font-weight: 400;
      transform: translateX(-100%) translateY(-8px);
      width: 280px;
    }

    .tooltip:hover::after {
      display: block;
    }
    .tooltip:hover {
      background: var(--primary);
    }

    /* @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    } */

    .plan .btn {
  display: inline-block;
  margin-top: auto;
  padding: 12px 24px;
  background-color: #0056AF;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease;
  text-align: center;
  letter-spacing: 3%;
  line-height: 1em;
}
.plan .btn:hover {
  background-color: #003f84;
}


.ulcontent{margin:0 0 1em 40px}
.ulcontent li{margin-bottom:0.5em}

a{color:#0056af;text-decoration:underline}
a:hover{text-decoration:none}
.external{position:relative;display: inline-block;padding-right: 22px;}
.external::after{
content: '';
width: 20px;
height: 20px;
background-image: url("/images/link.png");
display: inline-block;
position: absolute;
right: 0px;
top: 1px;
text-decoration: none;
border: 0;
}


.outnav{background: #fff;
  box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.07);
  position: relative;z-index: 3;}
.nav{margin: 0px auto;width: 100%;padding: 0px 10px 0px 10px; color: #283645;list-style:none; max-width:1200px}
#mobilenav li{margin:0px;padding: 17px 0; line-height: 2em;list-style:none;font-size:16px;float:left}
.nav .logo {line-height: 1;}
.nav .logo img{border:0; margin:8px 64px 8px -7px; float: left;}
 #mobilenav li a{text-decoration:none;display:block;font-weight:normal;color: var(--primary);margin-right:32px;transition: 0.3s;}
.nav:after {
 content:"";
 display:table;
 clear:both
}
#mobilenav li.last a{margin-right: 0;}
 #mobilenav li a:hover{color:#00AA72}

 #mobilenav li.dropdown{position:relative; float:right; width:120px}
 #mobilenav li a.language {
    background-image: url(/images/earth2.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 24px;
	margin-right:0;
	text-align:right;
}
 #mobilenav .sub-menu li a{margin-right:0}
/* sub navigation */
 #mobilenav .sub-menu {   
	position:absolute;
	float:none;
    left:0;
    top:60px; /* make this equal to the line-height of the links (specified below) */
	z-index:1000;
	background-color:#fff;
	border-radius: 4px;
	padding-bottom:2px;
	display:none;
	width:auto;
	min-width:100%;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}
 #mobilenav .sub-menu li {
    position:relative;
	float:none;
    margin:0;
    display:block;
	padding:0px 5px;
	white-space: nowrap;
	width:100%
}
 #mobilenav .sub-menu li:last-child { padding:0px 5px; }

/* style sub level links */
 #mobilenav .sub-menu a {
  padding-right:22px; padding-left:3px;
	border-bottom:1px dotted #ccc;
}

 #mobilenav .sub-menu li:last-child a {
    border-bottom:none;
}
.de {background-image:url(/images/de.gif); background-position:right center; background-repeat:no-repeat;}
.en {background-image:url(/images/gb.gif); background-position:right center; background-repeat:no-repeat;}
.es {background-image:url(/images/es.gif); background-position:right center; background-repeat:no-repeat;}
.ru {background-image:url(/images/ru.gif); background-position:right center; background-repeat:no-repeat;}




.outwrapper{-ms-flex:1 1 auto;flex:1 1 auto;
background: radial-gradient(at 50% 12%, #fff, #f0f4f2);
background-attachment: fixed;
}
/* index */
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-slide-in {
            animation: slideInUp 0.8s ease-out forwards;
            opacity: 0;
            width: 66%;
        }



        .hero {
            position: relative;
            z-index: 1;
            padding: 44px 20px;
            background-color: #fff;
            width: 1220px;
            max-width: 100%;
            margin: 20px auto 20px;
            border-radius: 20px;
            overflow: hidden;
        }
        .herobg{
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-position-x: right;
            background-repeat: no-repeat, no-repeat;
            border-radius: 20px;
            background-size: 40%;
            background-position-y: center;
            background-image: linear-gradient(to left, rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 100%), url(/images/canaritis.png);
        }
        .hero h1 {
            font-size: 64px;
            margin-top: 0;
            border: none;
            line-height: 1.0;
            letter-spacing: -1px;
        }
        .hero h1 span {color: var(--text);}

        .hero p {
            font-size: 1.4rem;
            line-height: 1.3;
            margin-bottom: 30px;
            font-weight: normal;
        }

                .hero ul {
                  list-style: none;
                  padding-left: 0;
                  padding-bottom: 1rem;
                }
        
                .hero li {
                  margin-bottom: 0.5rem;
                  display: flex;
                }
        
                .hero li::before {
                  content: "✔";
                  margin-right: 8px;
                  color: var(--secondary);
                  font-weight: 600;
                }

        .herobadge{
          background: #fff; padding: 2px 12px; border-radius: 999px; margin-bottom: 12px; display: inline-block; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); font-size: 0.8rem; text-transform: uppercase; letter-spacing: +2%;
        }

        .hero a.cta {
            display: inline-block;
            padding: 12px 24px;
            background-color: var(--primary);
            color: white;
            font-weight: 600;
            border-radius: 12px;
            text-decoration: none;
            transition: background-color 0.2s ease;
            letter-spacing: +3%;
            line-height: 1em;
        }

        .hero a.cta:hover {
            background-color: #003f84;
        }



        .cta-box {
            background: var(--primary);
            background: linear-gradient(135deg,#003f84,var(--primary));
            color: white;
            padding: 2rem;
            border-radius: 16px;
            text-align: center;
            margin-top: 40px;
        }

        .cta-box .cta-title {
            font-size: 26px;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .cta-box a {
            display: inline-block;
            margin-top: 15px;
            background: white;
            color: var(--primary);
            padding: 16px 24px;
            text-decoration: none;
            font-weight: 600;
            border-radius: 24px;
            transition: background 0.3s;
            letter-spacing: +3%;
            line-height: 1em;
        }

        .cta-box a:hover {
            background: #f0f0f0;
        }

        .trust-box {
            background-color: #FFFFFF;
            border-radius: 16px;
            padding: 2rem;
            margin: 40px 0;
            text-align: left;
            border: 4px dotted #00aa7240;
        }

        .trust-box h2 {
            margin-bottom: 1rem;
            margin-top: 0;
        }

        .trust-box p {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .trust-box ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .trust-box li {
            margin-bottom: 0.75rem;
            font-size: 1rem;
            color: #283645;
            display: flex;
        }

        .checkmark {
            color: var(--secondary);
            margin-right: 0.5rem;
            font-weight: 600;
            font-size: 1.2rem;
        }
/* warum */
    .founder-section {
      display: flex;
      margin-bottom: 32px;
      align-items: center;
    }

    .founder-section .text {
      flex-basis: 66.6%;
      padding: 0 10px 0 0;
    }

    .founder-section .picture {
      text-align: center;
      flex-basis: 33.3%;
      padding: 0 0 0 10px;
      align-self: flex-start;
      overflow: hidden;
    }

    .founder-section img {
      width: 200px;
      height: auto;
      border-radius: 50%;
      background: #fcfcfc;
      transform: rotate(20deg);
    }

    .highlight {
      text-align: center;
      background: #fff;
      padding: 2rem;
      border-radius: 16px;
      margin-bottom: 40px;
      border: 4px dotted #00aa7240;
      /* box-shadow: 0 4px 12px #0001; */
    }

    .highlight .slogan {
      font-size: 1.3em;
      font-weight: 600;
      margin-bottom: 10px;
      text-align: center;
      color: #00AA72;
    }

    .bullet_left {
      padding-left: 0px;
      list-style: none;
    }

    .bullet_left li {
      margin-bottom: 4px;
      margin-left: 2rem;
    }
    .bullet_left li::before {
      content: "●";
      margin-right: 8px;
    }

/* funktionen */
    .three-column {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 0 20px;
    }
    .feature ul{
      list-style: none;
      padding-left: 0;
      padding-bottom: 1rem;
    }

    .feature li::before {
      content: "✔";
      margin-right: 8px;
      color: var(--secondary);
      font-weight: 600;
    }


    .feature li{
      margin-bottom: 0.5rem;
      display: flex;
    }


    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin: 40px 0;
    }

    .feature {
      background: #FFF;
      border-radius: 12px;
      padding: 2rem;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
      position: relative;
      background-repeat: no-repeat;
      background-position: 2rem 2rem;
      background-size: 40px;
      transition: transform 0.2s ease;
    }
    .feature:hover{
      transform: translateY(-5px);
    }
/* funktionen ende */

#wrapper{margin:0px auto 100px;width:100%;padding: 0px 10px 0 10px;max-width: 1200px;}
#wrapper:after{
 content:"";
 display:table;
 clear:both
}

.main{margin-top: 32px;display: grid;grid-template-columns: 1fr;gap: 32px;}
.kontaktinfo{ padding: 0; align-self: flex-start; }
@media (min-width:801px){
      .main{grid-template-columns: calc(66.666666666% - 16px) auto;}
      .kontaktinfo{ padding: 20px 0 0; }
    }

h1{font-size:42px; color:var(--secondary); line-height:1.2;margin:1em 0 .5em 0; padding:0;font-weight:600; border-bottom: 1px dotted #00AA72; position:relative; font-family: 'Roboto Condensed';letter-spacing: -1%;}
h1.extra{font-size:40px; text-align: left; margin-top: 0}
.anker{position: absolute;top: -30px;}

h2{font-size: 26px;line-height: 1.2;margin: 40px 0 1rem;
  padding: 0;font-weight: 600;text-align: left; font-family: 'Roboto Condensed';}

h3{font-size: 20px;margin: 1em 0 0.5em;padding:0;font-weight: 600;text-align: left;font-family: 'Roboto Condensed';}

.featurelist{margin: 32px 0 40px 0; display: flex; gap: 20px;}

p{margin:0px 0px 1em 0px;padding:0px;}

.center{text-align:center}
.preis{font-size: 62px;line-height: 62px;font-weight: 600;color:#00AA72;}
.euro{font-size: 42px;}
.big{font-size: 24px; font-weight: 600;color: #00AA72;}

.outfooter{background:#003f84;}
.footer{margin:0px auto;width:100%;padding: 0px 10px; color:#fff; max-width:1200px}
.gridfooter{display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 30px;}
.footer1, .footer2, .footer3{padding: 1rem 0;}
.footer a, .footer a:hover{color:#fff; text-decoration:none}

.clear0px{clear:both;line-height:0px;height:0px;font-size:0px;margin:0; padding:0;}
.copyright{text-align:center; padding:32px 0; margin: 0; border-top: 1px dotted #aaa;}

/* FORM */
#contactform{width: calc(66.66% - 10px); float:left; margin:0 20px 1em 0}

input,select,textarea{line-height:18px;font-size:14px;font-family:'Roboto',sans-serif}

input[type=text],input[type=email],select,textarea{-moz-appearance:none;-webkit-appearance:none;-o-appearance:none;-ms-appearance:none;appearance:none;background:rgba(144,144,144,.075);border-radius:4px;border:none;border:1px solid rgba(144,144,144,.25);color:#000;display:inline-block;outline:0;padding:0 1em;text-decoration:none;width:100%;margin-bottom:8px}

select{background:rgba(144,144,144,.075) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center; background-size: 8px 10px;}

input[type=text]:invalid,input[type=email]:invalid,select:invalid,textarea:invalid{box-shadow:none}

input[type=text]:focus,input[type=email]:focus,input[type=checkbox]:focus+label:before,select:focus,textarea:focus{border-color:#49bf9d;box-shadow:0 0 0 1px #49bf9d}

input[type=text],input[type=email],select{height:2.75em}

textarea{padding:.75em 1em}

input[type=checkbox]{-moz-appearance:none;-webkit-appearance:none;-o-appearance:none;-ms-appearance:none;appearance:none;display:block;float:left;margin-right:-2em;opacity:0;width:1em;z-index:-1}

input[type=checkbox]+label{text-decoration:none; cursor:pointer;display:inline-block;font-size:.9em;font-weight:400;padding-left:2.4em;padding-right:.75em;position:relative}

input[type=checkbox]+label:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:400;text-transform:none!important;background:rgba(144,144,144,.075);border:1px solid rgba(144,144,144,.25);content:'';display:inline-block;height:1.65em;left:0;line-height:1.58125em;position:absolute;text-align:center;top:0;width:1.65em;border-radius:4px}

input[type=checkbox]:checked+label:before{background:#666;border-color:#666;color:#fff;content:'✓'}

::-webkit-input-placeholder{color:#bbb!important;opacity:1}

:-moz-placeholder{color:#bbb!important;opacity:1}

::-moz-placeholder{color:#bbb!important;opacity:1}

:-ms-input-placeholder{color:#bbb!important;opacity:1}

.formerize-placeholder{color:#bbb!important;opacity:1}

input[type=submit], button{-moz-appearance:none;-webkit-appearance:none;-o-appearance:none;-ms-appearance:none;appearance:none;-moz-transition:background-color .2s ease-in-out,color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out,color .2s ease-in-out;-o-transition:background-color .2s ease-in-out,color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out,color .2s ease-in-out;transition:background-color .2s ease-in-out,color .2s ease-in-out;background-color:#0056af;border-radius:4px;border:0;color:#fff!important;cursor:pointer;display:inline-block;font-weight:600;height:2.75em;line-height:2.75em;padding:0 1.5em;text-align:center;text-decoration:none;white-space:nowrap}

input[type=submit]:hover, button:hover{background-color:#003f84}
input[type="submit"]:active, button:active {background-color: #003f84;}

input[type=submit]{width:25%}
#anrede{width:25%; padding-right:35px}

/* FORM ENDE */
.error{background:#fddfdf;padding: 10px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

.ok{ background:#00AA72; color:#fff; padding:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

/*POPUP*/
#popup{cursor:pointer}
#popup-element{
display:none;
	background-color:#fff;
    padding:20px;
    width:800px;
    overflow-y: auto;
    margin-top: 50px;
	height: calc(100% - 100px);
}
.b-close{
    cursor:pointer;
    position:absolute;
    right:10px;
    top:5px;
	text-decoration:none;
	color:#212121;
	display: inline-block;
	border: 1px solid #ccc;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 1;
	padding-top: 7px;
	border-radius: 15px;
	padding-bottom: 7px;
}


/* SCROLL */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
  border: none;
  outline: none;
  background-color: var(--secondary);
  color: white;
  cursor: pointer;
  border-radius: 50%;
  font-size: 18px;
  line-height:45px;
  text-align:center; 
  height: 45px;
  width:45px;
  padding:0
}
#myBtn::after {

    display: block;
    position: absolute;
    content: "";
    width: 18px;
    height: 18px;
    right: 13px;
    z-index: 10;
    top: 17px;
    border-top: 2px solid #FFF;
    border-left: 2px solid #FFF;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

}
#myBtn:hover {
  background-color: var(--lightgreen); 
}

.mobileicon{display:none}

/* Preisbox */


a.bestellen {
  display: inline-block;
  padding: 12px 24px;
  background-color: #0056af;
  color: white;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  letter-spacing: 3%;
  line-height: 1;
}

a.bestellen:hover {
  background-color: #003f84;
}




/* SLIDER */

.flex-direction-nav li {
 position:absolute;
 height:100%;
 width:50px;
 top:0
}
.flex-direction-nav li:first-child {
 left:0
}
.flex-direction-nav li:last-child {
 right:0
}
.flex-direction-nav li a {
 display:block;
 height:100%;
 width:100%;
 overflow:hidden;
 text-indent:100%;
 white-space:nowrap;
 -webkit-transition:background-color .2s;
 -moz-transition:background-color .2s;
 transition:background-color .2s
}
.no-touch .flex-direction-nav li a:hover {
 background-color:#323234
}
.flex-direction-nav li a::before,
.flex-direction-nav li a::after {
 content:'';
 position:absolute;
 left:50%;
 top:50%;
 width:2px;
 height:13px;
 background-color:#bbb;
 margin-top:25px;
}
.flex-direction-nav li a::before {
 -webkit-transform:translateY(-35px) rotate(45deg);
 -moz-transform:translateY(-35px) rotate(45deg);
 -ms-transform:translateY(-35px) rotate(45deg);
 -o-transform:translateY(-35px) rotate(45deg);
 transform:translateY(-35px) rotate(45deg)
}
.flex-direction-nav li a::after {
 -webkit-transform:translateY(-27px) rotate(-45deg);
 -moz-transform:translateY(-27px) rotate(-45deg);
 -ms-transform:translateY(-27px) rotate(-45deg);
 -o-transform:translateY(-27px) rotate(-45deg);
 transform:translateY(-27px) rotate(-45deg)
}
.flex-direction-nav li:last-child a::before {
 -webkit-transform:translateY(-35px) rotate(-45deg);
 -moz-transform:translateY(-35px) rotate(-45deg);
 -ms-transform:translateY(-35px) rotate(-45deg);
 -o-transform:translateY(-35px) rotate(-45deg);
 transform:translateY(-35px) rotate(-45deg)
}
.flex-direction-nav li:last-child a::after {
 -webkit-transform:translateY(-27px) rotate(45deg);
 -moz-transform:translateY(-27px) rotate(45deg);
 -ms-transform:translateY(-27px) rotate(45deg);
 -o-transform:translateY(-27px) rotate(45deg);
 transform:translateY(-27px) rotate(45deg)
}

 .flex-direction-nav li a::before,
 .flex-direction-nav li a::after {
  background-color:#bbb;
  -webkit-transition:background-color .2s;
  -moz-transition:background-color .2s;
  transition:background-color .2s
 }
 .flex-direction-nav li a:hover::before,
 .flex-direction-nav li a:hover::after {
  background-color:#444
 }

.slider-wrapper {
 position:relative;
 width:1280px;
 max-width:100%;
 background-color:#fff;
 margin:1em auto 4em;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 padding:0px 50px 0px;
 z-index:1;
}
.slider-wrapper li{ list-style:none; margin:0; padding:0}

.slider {
 text-align:center;margin:0; padding:0
}
.slider:after {
 content:"";
 display:table;
 clear:both
}
.slider>li {
 position:absolute;
 opacity:0
}
.slider>li:first-child {
 position:relative;
 opacity:1
}

.slider p {
 padding:0;
 font-size:24px;
 font-weight: 600;
 font-family: 'Roboto Condensed';
}
.slider p.small{font-size:16px;font-weight: 400;font-family: 'Roboto';}

.slider img{width: 100%;height: auto;}

.flex{display: flex;align-items: center; justify-content: center;}
.sliderimg{width: 50%; line-height: 0; order:2;}
.sliderdesc{width: 50%; order:1;}

.flex-control-nav {
  width: calc(100% - 100px);
  position: absolute;
  text-align: center;
  margin:10px 0 0 0;
  padding:0;
}
.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}
/* ANIM SLIDER */
.anim-slider{
  position: relative;
  width: 1280px; max-width: 100%;
  margin: 1em auto 4em;
  padding: 0 50px; padding-bottom: min(28.82%, 369px);
}
.anim-wrapper{
    width: 1180px; max-width: 100%;
    position: relative;
}
.page {
    display: none;
    width: 1180px;  max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    text-align: center;
}

.page.active {
    display: flex;
}


.description{
    width: 50%;
    text-align: center;
    background-color: #fff;
    padding: 20px 0;
}

.description span {
    display: block;
    font-weight: 400;
    opacity: 0;
    transform: translateY(16px);
    animation: slideIn 0.8s ease forwards;
}
.description span:nth-of-type(1){animation-delay: 0.4s;}
.description span:nth-of-type(2){animation-delay: 0.6s;}
.description span:nth-of-type(3){animation-delay: 0.8s;}

.page .description h3{
    padding: 0;
    font-size: 0.3em;
    font-weight: 600;
    margin: 0 0 1em 0;
    text-align: center;
    font-family: 'Roboto Condensed';
    transform: translateY(-50px);
    opacity: 0;
    animation: fadeSlideLeft 0.6s ease forwards;
}



.image{
    width:50%;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}


@keyframes fadeIn {
    to   { opacity: 1; }
}

@keyframes slideIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeSlideLeft {
    to {
        opacity: 1;
        transform: translateY(0);
        font-size: 24px;
    }
}

#prev, #next{
  position: absolute;
  height: 100%;
  width: 50px;
  top: 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: background-color .2s;
  -moz-transition: background-color .2s;
  transition: background-color .2s;
  cursor: pointer;
}
#prev{
    left: 0;
}
#next{
    right: 0;
}
#prev::before, #prev::after, #next::before, #next::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 13px;
  background-color: #2836454D;
  margin-top: 25px;
  -webkit-transition: background-color .2s;
  -moz-transition: background-color .2s;
  transition: background-color .2s;
}
#prev::before {
  -webkit-transform: translateY(-35px) rotate(45deg);
  -moz-transform: translateY(-35px) rotate(45deg);
  -ms-transform: translateY(-35px) rotate(45deg);
  -o-transform: translateY(-35px) rotate(45deg);
  transform: translateY(-35px) rotate(45deg);
}
#prev::after {
  -webkit-transform: translateY(-27px) rotate(-45deg);
  -moz-transform: translateY(-27px) rotate(-45deg);
  -ms-transform: translateY(-27px) rotate(-45deg);
  -o-transform: translateY(-27px) rotate(-45deg);
  transform: translateY(-27px) rotate(-45deg);
}
#next::before {
  -webkit-transform: translateY(-35px) rotate(-45deg);
  -moz-transform: translateY(-35px) rotate(-45deg);
  -ms-transform: translateY(-35px) rotate(-45deg);
  -o-transform: translateY(-35px) rotate(-45deg);
  transform: translateY(-35px) rotate(-45deg);
}
#next::after {
  -webkit-transform: translateY(-27px) rotate(45deg);
  -moz-transform: translateY(-27px) rotate(45deg);
  -ms-transform: translateY(-27px) rotate(45deg);
  -o-transform: translateY(-27px) rotate(45deg);
  transform: translateY(-27px) rotate(45deg);
}
#prev:hover::before, #prev:hover::after, #next:hover::before, #next:hover::after {
  background-color: #283645E0;
}
.controls {
  bottom: -1.5em;
  position: absolute;
  width: calc(100% - 100px);
}
.bullets {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.bullet {
    width: 12px;
    height: 12px;
    background-color: #28364533;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
.bullet.active {
    background-color: #0056af;
}
/* SCREENSHOTS */
  #sliderscreenshots{overflow:hidden}
  #sliderscreenshots .slider-wrapper {margin: 50px auto 4em; width:100%; padding:0 180px;}
  #sliderscreenshots .flex-viewport{ overflow:visible !important}

  #sliderscreenshots .flex-active-slide{margin:0px !important}
  #sliderscreenshots .slider img {opacity:0.4;
  -webkit-transform: scale(.94);
  -moz-transform: scale(0.94);
  transform: scale(0.94);
  transition: all ease-in-out .6s;}

  #sliderscreenshots .flex-active-slide img{box-shadow: 0 5px 10px rgba(17, 26, 31, 0.5);opacity:1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  transition: all ease-in-out .6s;}
  #sliderscreenshots .flex-control-nav {margin: 30px 0 0 0;width: 63.4%;}
  #sliderscreenshots .flex-direction-nav li {width: 18.3%;	}
  #sliderscreenshots .flex-direction-nav li a::before, #sliderscreenshots .flex-direction-nav li a::after {content: none;}
  
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* DEMO */
.demosite{
        margin-top: 40px; display:grid; grid-template-columns: 1fr; align-items: center; gap: 32px; margin-bottom: 80px;
        @media (min-width:600px){
        grid-template-columns: 1fr 1fr;
    }
}
.demobackend {
    display: grid;
    gap: 32px;
    margin-bottom: 32px;
    align-items: stretch;
    background: #fff;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    grid-template-columns: 1fr;
    @media (min-width:450px){
        grid-template-columns: 1fr 1fr;
    }
}
.spandescr {
    grid-column: 1 / -1;
}
.demobackend img{
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
  max-height: 340px;
  border-radius: 8px;
  padding: 8px;  
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}
.demobackend img:hover {
  transform: scale(1.04);
}
.demobackend h2, .demobackend h3{
    margin-top: 0;
}
.descr{
    align-self: center;
}
.descr p:last-child{
    margin-bottom: 0;
}

@keyframes bg1 {
  0% {margin-top: 0px; margin-left:0px;}
  10% {margin-top: 0px; margin-left:0px;}
  22% {margin-top: -26%; margin-left:0px;} /* -14.714% 4.571% */
  32% {margin-top: -26%; margin-left:0px; } /* -14.714% 4.571% */
  33.3% {margin-top: -60%; margin-left:-100%;}
  100% {margin-top: -60%; margin-left:-100%;}
}
@keyframes bg2 {
  0% {margin-top: 0px; margin-left:0px;}
  43.3% {margin-top: 0px; margin-left:0px;}
  55.3% {margin-top: -19%; margin-left:0px;}
  65.3% {margin-top: -19%; margin-left:0px;}
  66.6% {margin-top: -50%; margin-left:-100%;}
  100% {margin-top: -50%; margin-left:-100%;}
}
@keyframes bg3 {
  0% {margin-top: 0px; margin-left:0;}
  76.6% {margin-top: 0px; margin-left:0;}
  88.6% {margin-top: -151.5%; margin-left:0;}
  98.6% {margin-top: -151.5%;margin-left:0; }
  100% {margin-top: -190%; margin-left:-100%; }
}

.lap-bg1{
  animation: bg1 36s ease 0s infinite;
}
.lap-bg2{
  animation: bg2 36s ease 0s infinite;
}
.lap-bg3{
  animation: bg3 36s ease 0s infinite;
}

   .ref_slider-wrapper{
    background: #f2f2f2;
    margin:0; position: relative; width:1180px;
    max-width: 100%;
    padding: 0px 50px 0px;
    z-index: 1;
   }
    .ref_slider-wrapper::before {
  content: "";
  width: 100vw;
  display: block;
  position: absolute;
  background-color: inherit;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.ref_slider-wrapper li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ref_flex{
    display: flex;
align-items: center;justify-content: start;gap: 20px;
}
.ref_sliderdesc{
width: calc(((100% + 100px) * .6666) - 60px);margin-top: 0;padding-bottom: 16px;text-align: center;padding-right: 50px;
order: 1;
}

.ref_sliderdesc p {
  margin: 0px 0 8px 0;
  font-size: 20px;
  font-family: 'Roboto';
  font-weight: 400;
}
.ref_sliderdesc p.small {
font-size: 16px;margin: 0;
}
.ref_sliderimg{
  line-height: 1;
  padding: 30px 0;
  order: 2;
}
.ref_sliderimg img {

  -webkit-box-shadow: 5px 5px 20px -5px rgba(0,0,0,0.08);
  -moz-box-shadow: 5px 5px 20px -5px rgba(0,0,0,0.08);
  -o-box-shadow: 5px 5px 20px -5px rgba(0,0,0,0.08);
  box-shadow: 5px 5px 20px -5px rgba(0,0,0,0.08);

  width: 180px;
  height: auto;
  
}

.leitsatz{
  font-size: 20px;
  padding: 20px 20px 20px 30px;background: #2836450d;
  margin: 10px 0;
  display: block;
  border-left: 12px solid #00AA72;
  font-weight: 600;
}


@media (max-width: 1000px) {
.nav .logo img {
  margin-right: 44px;
}
#mobilenav li a {
  margin-right: 20px;
}
.slider p.small {
  font-size: 16px;
}
/*POPUP*/
#popup-element{width:90%;}

/* SCREENSHOTS */
#sliderscreenshots .slider-wrapper {margin: 50px auto 4em; width:100%; padding:0 18.3%;}

}

@media (max-width: 800px) {
  /* ANIM SLIDER */
.page .description h3 {
    font-size: 20px;
}
.page {
    flex-direction: column;
    position: relative;
}
.anim-slider{
    padding-bottom: 0;
}
.description, .image {
  width: 100%;
}
.description {
  order: 2;
  width: calc(100% + 80px);
}
  /* ANIM SLIDER ENDE */
.ref_flex{
    flex-wrap: wrap;
    justify-content: center;
    }

    

.ref_sliderdesc {
    width: 100%;
    order: 2;
    padding-right: 0;
  }
.ref_sliderimg{
padding: 30px 0px 10px;
  order: 1;

}
  .ind {
  padding: 0px;
}
 .nav .logo img {
    width: 140px;
  }
.outtop{ display: none;}

.outwrapper{padding:0; margin-top:55px}
.outnav {
  position: fixed;
  width: 100%;
  z-index: 10;
}

.mobileicon {
    display: block;
    font-size: 32px;
    line-height: 45px;
    font-weight: normal;
    color: #283645;
    position: fixed;
	text-decoration:none;
	top:4px;
	right:8px;
	width:45px;
	height:45px;
	text-align:center;
	z-index:200;
  cursor: pointer;
}
/*mobilmenu*/			
#mobilenav {background: #283645;opacity: 0.98; color:#FFF; padding:0px; margin:0px;width:100%; float:none; position:fixed; z-index:4000; height:calc(100% - 55px); top:55px; left:-100%; font-size:12px; overflow-y: auto;}
#mobilenav.show{ left:0px;-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
position:fixed;}
#mobilenav.hide{ left:-100%;-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
position:fixed;}
#mobilenav li{ width:100%; float:none; border-bottom:1px solid #ddd; line-height:1.4;height:auto;padding: 0;}

#mobilenav li a, #mobilenav li a:hover{ text-align: left; padding: 15px; line-height:1.4;height:auto; margin:0;color:#FFF;}



h1, h1.extra{font-size:28px; margin-top: 28px;}
h1.extra{margin-top: 0;}
.anker{top: -70px;}

#contactform{width:100%; float:none; margin:0 0px 40px 0}





/*slider*/
.flex{display: flex;flex-direction: column;}
.sliderimg{width:100%; display:block; order:1;}
.sliderdesc{width: 100%;display: block; order:2;}
.flex-control-nav { width: calc(100% - 80px);}

.slider-wrapper {
  margin:1em auto 5em;
  padding:0px 40px 0px
 }
.flex-direction-nav li {
  width:40px
 }
.flex-control-nav {
  margin:25px 0 0 0;
}
.slider p {font-size:20px;margin-top: 10px;}


/* SCREENSHOTS */
  #sliderscreenshots .slider-wrapper {margin: 30px auto 4em; width:100%; padding:0 0px;}
  #sliderscreenshots .flex-viewport{ overflow: hidden !important}

  #sliderscreenshots .slider img {opacity:1;
  -webkit-transform: scale(0.98);
  -moz-transform: scale(0.98);
  transform: scale(0.98);
  transition: none;}

  #sliderscreenshots .flex-active-slide img{box-shadow: 0 3px 5px rgba(17, 26, 31, 0.5);opacity:1;
  -webkit-transform: scale(0.98);
  -moz-transform: scale(0.98);
  transform: scale(0.98);
  transition: none;}
  
  #sliderscreenshots .flex-control-nav {margin: 20px 0 0 0;width: 100%;}
  #sliderscreenshots .flex-direction-nav li { display:none	}
  #sliderscreenshots .flex-control-nav li {margin: 0 4px;}

/*language*/
#mobilenav li.dropdown{position: static; /*mo*/
float:right; width:120px;
border-bottom:0; padding-right:10px; /*mo*/
}
#mobilenav li a.language {
    background-image: url(/images/earth3.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 27px; /*mo*/
	margin-right:0;
	text-align:right;
}
#mobilenav .sub-menu li a{margin-right:0}
/* sub navigation */
#mobilenav .sub-menu {   
	position: static; /*mo*/
	float:none;
    left:0;
    top:36px; /* make this equal to the line-height of the links (specified below) */
	z-index:1000;
	background: none; /*mo*/
	border-radius: 0;
	padding-bottom:0; /*mo*/
	border-top:1px solid #ddd; /*mo*/
	display:none;
	width:auto;
	min-width:100%;
	box-shadow:none; /*mo*/
}
#mobilenav .sub-menu li {
    position: static; /*mo*/
	float:none;
    margin:0;
    display:block;
	padding:3px; /*mo*/
	white-space: nowrap;
	width:100%;
}
#mobilenav .sub-menu li:last-child { padding:0px 5px; }

/* style sub level links */
#mobilenav .sub-menu a, #mobilenav .sub-menu a:hover {
    color: #fff; /*mo*/
	padding-right:22px; padding-left:3px; /*mo*/
	font-size:14px;
	border-bottom: 0; /*mo*/
}
#mobilenav .sub-menu li:last-child a {
    border-bottom:none;
}


/* FORM */
input[type=submit]{width: auto}
#anrede{width:auto; padding-right:35px}

/*footer*/
.footer1, .footer2, .footer3{
border-bottom: 1px dotted #777;line-height:2.4;
}
.copyright{border-top: none;text-align:left;}

}

.zusatz{max-width: 80%; background: none;box-shadow: none;}
@media (max-width: 800px) {
            .zusatz{max-width: 100%; padding: 2rem 0;}
        }

.zusatz li{display: flex; justify-content: space-between;}
.zusatz li div{display:inline; font-size: 0.9em; color: #666;}
.zusatz ul li::before {
  content: "•";
  color: var(--text);
}
.zusatz ul {
  margin: 1rem 0 1rem;
}

.faq-question {
    cursor: pointer;
    padding: 15px;
    background-color: #ededed;
    margin-bottom: 2px;
}

.faq-answer {
    display: none;
    padding: 15px;
}

@media (max-width: 1220px) {
.hero{border-radius: 0;}
.herobg {
  left: 20%;
  width: 80%;
  background-position-x: 0;
  border-radius: 0;
  background-size: cover;
  background-position-y: center;
}
  .hero li, .hero p, .hero h1 {
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  }

}

@media (max-width: 800px) {
  .hero li, .hero p, hero h1 {
    text-shadow: none;
  }
.hero {
  position: relative;
  padding: 10px;
  background-color: unset;
  margin: 20px auto 20px;
}
.herobg {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position-x: 0;
  border-radius: 12px;
  background-size: cover;
  background-position-y: center;
  background-image: url(/images/canaritis.png);
  padding-bottom: 50%;
  margin-top: 20px;
}

}

@media (max-width: 560px) {
.hero h1 {
  font-size: 40px;
}
.hero p {
  font-size: 1.2rem;
}
}