@charset "utf-8";
@import "../dist/css/bootstrap.min.css"; 
@import "../fonts/font-awesome/css/font-awesome.min.css";
@import "animate.min.css";
:root{--scale:1;}
html{font-size:calc(100%*var(--scale));}
:root {
    --primary: oklch(71% .19 127);
    --primary-foreground: oklch(100% 0 0);
    --background: oklch(100% 0 0);
    --foreground: oklch(23.5% .015 65);
    --border: oklch(92% .004 286.32);
    --ring: oklch(62.3% .214 259.815);
    --eco-green: oklch(71% .19 127);
    --eco-green-dark: #57a53e;
    --eco-error: oklch(48.545% 0.19922 29.223);
    --black: oklch(23.5% .015 65);
    --gray-100: #f5f5f7;
    --gray-200: #e3e3e7;
    --gray-600: #666a73;
    --gray-800: #262833;
    --white: oklch(100% 0 0);
    --max-width: 1120px;
    --radius-lg: 16px;
    --radius-md: 10px;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.08);
    --transition-fast: 0.2s ease-out;
    --text-small:0.9em;
    --text-p:1.0em;
}
*{
position:relative;
margin:0;
padding:0;
box-sizing: border-box;
max-width:100vw;
}
html, body {
position:relative;
font-family: system-ui, -apple-system, BlinkMacSystemFont, µSegoe UIµ, sans-serif;
color: var(--gray-800);
background: transparent;
scroll-behavior: smooth;
}
body{
line-height: 1.5;
min-height:100%;
overflow-x:hidden;
overflow-y:auto;
}
a,a:hover {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
p{
font-size: 1.0em;
margin-bottom: 1.5rem;
}
small{
font-size: var(--text-small); 
}
.container{
margin:0 auto;
display:block;
box-sizing:border-box;
width: var(--max-width);
padding: 10px 15px;
}
@media(max-width:960px){
.container{
display:block;
width:auto;
margin:0;
}
}
.container ul{
    margin:0 auto 20px 20px;
}
/* Layout */
header {
position: sticky;
top: 0;
left:0;
right:0;
z-index: 100;
backdrop-filter: blur(14px);
background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0.85));
border-bottom: 1px solid rgba(0,0,0,0.04);
}
.infoblock{
    background:var(--eco-green);
    color:var(--primary-foreground);    
}
.info{
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.75em 1.25em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5em;
}
.info a{
    display:flex;
    align-items: center;
    justify-content: flex-start;
}
.info a span{
    margin:0 2px;
}
.nav {
position:relative;
max-width: var(--max-width);
margin: 0 auto;
 padding: 0.75em 1.25em;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5em;
}
.logo {
    position:relative;
}
.logo img{
    height:30px;
    width:auto;
}
.nav-links {
display: flex;
gap: 1.25em;
}
.nav .open, .nav .open a, .nav .open a:hover{
    background-color: var(--white);
}
.nav-links a {
    padding: 0.25em 0;
    position: relative;
    font-size:0.95em;

}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--eco-green);
    transition: width var(--transition-fast);
}
.nav-links a:hover::after {
    width: 100%;
}
.mobile{
position:absolute;
top:5px; 
right:20px;
width:45px;
height:45px;
padding:5px;
background: var(--eco-green);
color:#fff;
cursor:pointer;
display:none;
border-radius:5px;
border:rgba(80,80,80,0.6) 1px solid;
}
@media(max-width:960px){
.mobile{
display:block;
}
}
.nav-cta {
    display: flex;
    gap: 0.75em;
    align-items: center;
}
#privacy { accent-color: var(--eco-green-dark); }
.btn {
    border-radius: 999px;
    padding: 0.55em 1.3em;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
    background: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--eco-green), var(--eco-green-dark));
    color: var(--white);
    box-shadow: 0 12px 30px rgba(87,165,62,0.35);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(87,165,62,0.45);
}
.btn-outline {
    border-color: var(--gray-200);
    color: var(--gray-800);
    background: rgba(255,255,255,0.8);
}
.btn-outline:hover {
    border-color: var(--eco-green);
    color: var(--eco-green-dark);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}
main{
display:block;
box-sizing:border-box;
width:100%;
overflow-x:hidden;
}
/* Startseite */
.section1,
.section2,
.section3,
.section4{
position:relative;
display:flex;
flex-wrap:nowrap;
align-items:flex-start;
align-content:center;
justify-content:space-between;
box-sizing:border-box;
overflow:hidden;
height:100%;
height:100vh;
min-height:100%;
min-height:100vh;
max-height:100%;
max-height:100vh;
margin-bottom:5px;
}
main button,
main .btn,
main .btn-primary,
.pbut{
position:relative;
margin:0 auto;
display:inline-block;
background:rgba(120,184,61,1);
color:rgba(255,255,255,1);
padding:15px 30px;
text-decoration:none;
font-size:1.0rem;
cursor:pointer;
border:rgba(120,184,61,1) 2px solid;
border-radius:2px;
}
.section1{
/* background:url('/lib/images/bg/eco-hund.jpg') bottom center no-repeat; */
/* background:url('/lib/images/bg/Beleg-suchen-digitalisierung-digital-archivieren.jpg') bottom left no-repeat; */
background:url('/lib/images/bg/Belegfreigabe-next-level-eco-billflow.jpg') center right no-repeat; 
background-size:cover;
background-attachment:fixed;
min-height:calc(100vh - 90px);
max-height:calc(100vh - 90px);
height:calc(100vh - 90px);
}
.section2{
background:url('/lib/images/bg/eco-hund.jpg') bottom center no-repeat;
background-size:cover;
background-attachment:scroll;
}
.section3{
background:url('/lib/images/bg/eco-cameleon.jpg') bottom center no-repeat;
background-size:cover;
background-attachment:fixed;
}
.section4{
background:url('/lib/images/bg/eco-schnecke.jpg') center no-repeat;
background-size:cover;
background-attachment:scroll;
-webkit-animation: rocket 1s;
animation: rocket 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;    
}
.more{
position:absolute;
bottom:50px;
left:50%;
z-index:2;
width:60px;
height:60px;
margin-left:-30px;
border-radius:30px;
color:rgba(255,255,255,1);
color:rgba(120,184,61,1);
font-size:60px;
line-height:60px;
cursor:pointer;
text-align:center;
animation-name:pulse;
animation-duration: 3s;
animation-iteration-count: 9999;
animation-timing-function: ease-out;
transform: translate(-50%,-50%);
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
}
.more:visited,
.more.active{
color:rgba(120,184,61,1);
}
.more:hover{
margin-top:-3px;
color:rgba(0,0,0,1);
font-size:65px;
line-height:65px;
}
.sbox_left{
position:relative;
height:200px;
margin: auto auto auto 100px;
width:390px;
max-width:80%;
color:rgba(255,255,255,1);
}
.tbox,
.h1box{
position:relative;
min-height:300px;
background:rgba(0,0,0,0.6); 
color:rgba(255,255,255,1);
padding:15px;
border-radius:3px 3px 30px 3px;
box-shadow:rgba(0,0,0,0.9) 0px 0px 1px;
font-size:18px;
line-height:160%;
}
.tbox h1,
.tbox h2,
.h1box h1{
font-family: Raleway;
font-size:32px;
line-height:130%;
margin:0 0 10px 0;
}
.h1box{
position:absolute;
top:50%;
left:100px;
z-index:2;
transform: translate(0, -50%);
width:390px;
max-width:80%;
color:rgba(255,255,255,1);
text-align:left;
}
.h1box.right{
position:absolute;
top:50%;
left:auto;
right:100px;
z-index:2;
transform: translate(0, -50%);
width:390px;
max-width:80%;
color:rgba(255,255,255,1);
text-align:left;
border-radius:3px 3px 3px 30px;
}
@media(max-width:950px){
.h1box{ 
left:50px;
right:50px;
width:auto;
}
.tbox h2,
.h1box h1{ text-align:center; }
}
.section1.ae.in-view .tbox,
.section3.ae.in-view .tbox{
animation:slideInLeft;
animation-duration: 2s;
}
.section2.ae.in-view .tbox,
.section4.ae.in-view .tbox{
animation:slideInUp;
animation-duration: 2s;
}
@media(max-width:950px){
.section1,
.section2,
.section3,
.section4{
align-items:center;
}
.sbox_left{
height:100px;
margin: 0 auto;
width:90%;
max-width:90%;
}
.tbox,
.h1box{
min-height:50px;
border-radius:5px;
}
.tbox p,
.h1box p{
display:none;
}
}
/* Features */
.intro_features{
position:relative;
display:block;
box-sizing:border-box;
width:100%;
height:calc(100vh - 200px);
background: url('/lib/images/workflow-automatisierung-belege-freigabe.jpg') center no-repeat;
background-attachment:fixed;
background-size:cover;
}
.intro_features .teaser{
position:absolute;
bottom:50px;
right:50px;
z-index:2;
box-sizing:border-box;
overflow:hidden;
width:450px;
max-width:90vw;
height:auto;
border-radius:15px;
padding:15px;
background:rgba(100,116,129,1);
}
.intro_features .teaser h1{
color:rgba(255,255,255,1);
}
.intro_features .teaser p{
color:rgba(255,255,255,1);
font-size:1.0em;
}
.intro_features .teaser p strong{
color:rgba(255,255,255,1);
font-size:1.1em;
}
@media(max-width:950px){
.intro_features .teaser{
bottom:50px;
left:20px;
right:20px;
text-align:center;
}
.intro_features .teaser h1{
font-size:1..3em;
}
.intro_features .teaser p{
display:none;
}
}
.features_row{
position:relative;
display: flex;
align-items:flex-start;
align-content:flex-start;
justify-content:space-between;
flex-wrap:wrap;
padding:0 5px;
margin:0;
}
.features_row .boxes{
background:rgba(100,116,129,1);
color:rgba(255,255,255,1);
display:inline-block;
width: 31%;
min-height:100px;
border-radius:5px;
padding:10px;
margin: 3px 0;
}
.features_row .boxes p{
color:rgba(255,255,255,1);
}
@media(max-width:950px){
.features_row{
flex-direction:column;
align-items:center;
justify-content:center;
}
.features_row .boxes{
display:block;
width:99%;
margin:10px auto;
}
}
.boxes span{
display:block;
font-size:1.1em;
font-weight:600;
}
/* Service & FAQs */
.intro_service{
position:relative;
display:block;
box-sizing:border-box;
width:100%;
height:calc(100vh - 200px);
background: url('/lib/images/eco-Billflow-Support.jpg') center no-repeat;
background-attachment:fixed;
background-size:cover;
}
.intro_service .teaser{
position:absolute;
bottom:50px;
right:50px;
z-index:2;
box-sizing:border-box;
overflow:hidden;
width:450px;
max-width:90vw;
height:auto;
border-radius:15px;
padding:15px;
background:rgba(63,74,102,0.9);
}
.intro_service .teaser h1{
color:rgba(255,255,255,1);
}
.intro_service .teaser p{
color:rgba(255,255,255,1);
font-size:1.0em;
}
@media(max-width:950px){
.intro_service .teaser{
bottom:50px;
left:20px;
right:20px;
text-align:center;
}
.intro_service .teaser h1{
font-size:1.4em;
}
.intro_service .teaser p{
display:none;
}
}
.intro_service .teaser p strong{
color:rgba(255,255,255,1);
font-size:1.1em;
}
.service_row{
position:relative;
display: flex;
align-items:stretch;
align-content:flex-start;
justify-content:space-between;
flex-wrap:wrap;
padding:0 5px;
margin:0;
}
.service_box{
background:rgba(63,74,102,0.9);
color:rgba(240,240,240,1);
display:inline-block;
width: 31%;
min-height:100px;
border-radius:5px;
padding:10px;
margin: 3px 0;
}
@media(max-width:950px){
.service_row{
flex-direction:column;
align-items:center;
justify-content:center;
}
.service_box{
display:block;
width:99%;
margin:10px auto;
}
}
.service_box p{
color:rgba(240,240,240,1);
}
/* Impressum */
.law_row{
display:flex;
align-items:flex-start;
align-content:flex-start;
justify-content:space-between;
}
.law_box{
display:inline-block;
width:48%;
}
@media(max-width:960px){
.law_row{
flex-direction:column;
justify-content:center;
}
.law_box{
width:99%;
}
}
section {
position:relative;
display:block;
min-width:70vh;
background:none;
}
/* CTA / Kontakt */
.cta {
    border-radius: var(--radius-lg);
    padding: 1.8em 1.6em;
    background: radial-gradient(circle at top left, rgba(122,211,90,0.25) 0, rgba(122,211,90,0.08) 40%, #ffffff 100%);
    border: 1px solid rgba(122,211,90,0.35);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5em;
    align-items: center;
}

.cta-title {
    margin: 0 0 0.4em;
    font-size: 1.3em;
}

.cta-text {
    margin: 0 0 0.8em;
    font-size: 0.9em;
    color: var(--gray-700);
}

.cta-meta {
    font-size: 0.8em;
    color: var(--gray-700);
}

.cta-form {
    display: grid;
    gap: 0.6em;
    font-size: 0.85em;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.field label {
    font-size: 0.8em;
    color: var(--gray-700);
}

.field input,
.field textarea {
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    padding: 0.5em 0.8em;
    font-size: 0.85em;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    background: rgba(255,255,255,0.9);
}

.field textarea {
    border-radius: 12px;
    min-height: 80px;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--eco-green);
    box-shadow: 0 0 0 1px rgba(122,211,90,0.35);
    background: #ffffff;
}
.mailloading,
.mailsent,
.mailerror{
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    width:350px;
    min-height:150px;
    border-radius: 5px;
    color:var(--primary-foreground);
    text-align:center;
}
.mailloading h4,
.mailloading p,
.mailsent h4,
.mailsent p,
.mailerror h4,
.mailerror p{
    color:var(--primary-foreground);
}
.mailsent h4,
.mailerror h4{
    margin:0 auto 10px auto;
}
.mailsent p,
.mailerror p{
    margin:0 auto 10px auto;
}
.mailloading{

}
.mailsent{
    background: var(--eco-green);    
}
.mailerror{
    background: var(--eco-error);
}
.impressum{
    display:block;    
}
.impressum h2{
    color:var(--eco-green);
}
.impressum strong{
    display: block;
    margin:0 auto 10x auto;
    font-size: 1.05em;
    font-weight:600;
}
/* Responsive */

@media (max-width: 960px) {
.row_law{
display:block;
}
.box_law{
width:100%;
}
.row,
footer .row,
.cta {
grid-template-columns: minmax(0, 1fr);
}
.nav-links {
display: none;
}
.nav-links.open{
position:absolute;
top:50px;
right:0;
z-index:999;
width:100%;
background:rgba(255,255,255,1);
display:flex;
flex-direction:column;
padding:10px 20px;
}
.nav-links.open a{
display:block;
width:100%;
padding:5px 10px;
text-align:center;
border-bottom:rgba(80,80,80,0.5) 1px solid;
}
.nav-links.open a:hover{
color:#454;
}
.nav-cta {
margin-left: auto;
}
}
@media (max-width: 720px) {
    .logo{
        height:25px;
        width:auto;
    }
    .nav-cta{
        gap: 0.25;
        margin:0 0;
        padding:0;
    }
    .nav-cta button{
        padding-left:8px;
        padding-right:8px;
    }
    .info{ 
        display:flex;
        align-content:center;
        align-items:center;
        justify-content:center;
        text-align: center;
    }
.info a.info1{display:none; }
.features-highlight-grid {
        grid-template-columns: minmax(0, 1fr);
 }

.cta {
 padding: 1.4em 1.2em;
}
}

/* Button links unten */ 
#a11y-toggle {
    position: fixed; 
    bottom: 30px; 
    left: 20px; 
    background:var(--primary-foreground);
    color:var(--eco-green);        
    border: none; 
    padding: 2px; 
    font-size: 22px; 
    border-radius: 50%; 
    cursor: pointer; 
    z-index: 9999;
}
#a11y-toggle i{
    font-size:2.5em;
}
/* Menü */ 
.a11y-menu{
    position: fixed; 
    bottom: 30px; 
    left: 20px; 
    background:var(--eco-green);
    color:var(--primary-foreground);
    border: rgba(80,80,80,0.6) 1px solid; 
    border-radius:5px;
    padding: 15px; 
    width: 220px; 
    text-align:center;
    display: none; 
    z-index: 9999;
    font-weight:400;
}
.a11y-menu strong{
    font-size:1.05em;
    font-weight:400;
}
#a11y-menu.open{ 
    display: block;
}.a11y-group{ 
    margin-bottom: 12px;
}
.a11y-btngrp{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.a11y-menu button,
.a11y-menu .full{ 
    margin-right: 6px; 
    padding: 10px 15px; 
    cursor: pointer;
    min-width:45%;
    background:var(--primary-foreground);
    border-radius:5px;
    color:var(--black);
}
.a11y-menu .full{
    display:block;
    width:100%;
}
.a11y-menu .full.close{
    background:var(--black);
    color:var(--primary-foreground);
    border:var(--primary-foreground) 1px solid;
    opacity:1;
    font-weight:500;
}
.a11y-menu button:hover,
.a11y-menu .full.close:hover{
    background:var(--eco-green);
    color:var(--primary-foreground);
}
/* Schwarz-Weiß Modus */
body.bw-mode { 
    filter: grayscale(100%);
} 
/* Breite Schrift */ 
body.wide-font {
    letter-spacing: 0.06em;
}


/*** FOOTER ***/
footer{
position:relative;
display:block;
box-sizing:border-box;
min-height:50%;
min-height:50vh;
margin-bottom:5px;
background:rgba(0,0,0,1);
color:rgba(158,158,158,1);
padding:100px 10px 50px 10px;
font-size: 1.05em;
max-width:100vw;
overflow:hidden;
}
.alt_row{
display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1em;
}
footer .box{

}
footer h3{
margin:0 auto 50px auto;
text-align:center;
color:rgba(188,188,188,1);
font-size: 1.4em;
}
footer img{
display:inline-block;
margin:10px;
height:70px;
width:auto;
}
footer strong{
display:block;
margin:0 0 2px 0;
font-size: 0.95em;
}
footer .container a,
footer container i{
color:rgba(255,255,255,1);
font-size: 0.95em;
line-height: 1.3;
margin-right:5px;
}
footer .container a:hover{
color:rgba(120,184,61,1);
}
.sm i{
font-size: 2.0em;
margin-right:10px;
}
@media(max-width:950px){
footer{
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
footer .col-sm-12.col-md-4{
padding:20px 10px;
border-bottom:rgba(255,255,255,1) 1px dotted;
}
footer img,
footer .container img{
position:relative;
margin:10px auto;
display:block;
max-width:70%;
height:auto;
}
}
.order_row-best{display:flex; justify-content:space-between; align-items:stretch; align-content:center; margin:0 0 20px 0}
.order_box{ position:relative; display:inline-block; width: 450px; border:rgba(150,150,150,0.1) 1px solid; border-radius:5px; padding:10px;}
.order_box a{ display:block; width:300px; background: rgba(120,184,61,1); color: rgba(255,255,255,1); padding: 15px 30px; text-decoration: none;font-size: 1.0rem; cursor: pointer; border: rgba(120,184,61,1) 2px solid;  border-radius: 2px;border:rgba(255,255,255,1) 1px solid; margin:0 auto; text-align:center; }
article{ position:relative;display:flex; flex-direction:column; align-items:flex-start; width:320px; background:rgba(230,230,230,0.9); border:rgba(150,150,150,0.1) 1px solid; border-radius:5px; padding:10px; box-shadow:rgba(80,80,80,0.6) 0 0 3px; }
article .art_title{display:block; width:100%; min-height:60px; border-bottom:rgba(100,100,100,0.3) 1px solid}
article .action_buttons{width:100%; display:flex;align-items:center; justify-content:space-between}
article .action_buttons button{display:block; width:100%; border:rgba(255,255,255,1) 1px solid; margin:0;}
article .action_buttons .testing{opacity:0.7}
article .action_buttons button:hover{ box-shadow:rgba(80,80,80,1) 0 0 3px; font-weight:bold}
article .art_info{padding:10px 0;display:block; min-height:350px}
article .art_info ul{ margin-left:20px;}
article .art_info ul li{font-size:1em; line-height:1.6em}
article .art_info p{ margin:0}
article .art_info strong{ font-size:20px }
.order-box{ position:fixed; top:50%; left:50%; z-index:2; transform:translate(-50%,-50%); width:1140px; background:rgba(255,255,255,1); padding:12px; border-radius:12px; }
@media(max-width:980px){
  .order_row-best{ flex-direction:column; }
  article{ width:98%; margin: 0 auto 30px auto; }
  .order-box{ width:95%; }
}
/** Cookies **/
.cookii{
position:fixed;
top:50%;
left:50%;
z-index:100000;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
display:block;
box-sizing:border-box;
width:850px;
padding:32px;
border-radius:15px;
box-shadow:rgba(80,80,80,0.8) 0 0 5px;
background:rgba(255,255,255,1);
color:var(--black);
text-align:left;
font-size:1.0em;
animation: vonUnten 0.6s ease-out 5s both;
}
.cookii p,
.cookii p small,
.cookii a,
.cookii a:hover{
font-size:1.0em;
}
.cookii .ch{
display:block;
font-weight:bold;
font-size:1.1em;
line-height:1.3em;
margin:0 0 20px 0;
}
.cookii .eiblock,
.cookii .eiblock p{
display:none;
}
.cookii .eiblock p{
margin:15px 0;
}
.cookii ul{
list-style-type:none;
}
.cookii ul li{
position:relative;
display:block;
width:100%;
padding:10px 0;
border-bottom:rgba(0,0,0,0.5) 1px solid;
}
.cookii .fa{
cursor:pointer;
margin-right:15px;
font-size:1.1em;
line-height:1.1em;
}
.cookii .ir strong{
font-weight:500;
font-size:0.9em;
line-height:0.95em;
}
@media(max-width:950px){
.cookii{
width:500px;
}
}
@media(max-width:750px){
.cookii{
width:98%;
}
}
.cookii button{
cursor:pointer;
display:inline-block;
min-width:200px;
width:auto;
margin:10px 0;
padding: 15px 30px;
font-size:1.0em;
}
.cookii .ir,
.cookii .irb{
width:100%;
text-align:center;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
align-items:center;
justify-content:space-between;
}
.switch{
position:relative;
display:inline-block;
width:30px;
height:17px;
}       
.switch input{ 
opacity:0;
width:0;
height:0;
}
.opt{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background-color:#ccc;
-webkit-transition:.4s;
transition:.4s;
}       
.opt:before{
position:absolute;
content:'';
height:13px;
width:13px;
left:2px;
bottom:2px;
background-color:var(--white);
-webkit-transition:.4s;
transition:.4s;
}       
input:checked + .opt{
background-color:var(--eco-green);
}       
input:focus + .opt{
box-shadow:0 0 1px var(--eco-green);
}       
input:checked + .opt:before{
-webkit-transform:translateX(13px);
-ms-transform:translateX(13px);
transform:translateX(13px);
}
.opt.round{
border-radius:17px;
}       
.opt.round:before{
border-radius:50%;
}
.first,
.first:hover{
background-color:var(--eco-green);
}
.second, .second:hover{
color:var(--black);
background:var(--white);
}
.first:hover, .second:hover{ 
box-shadow:rgba(80,80,80,1)0 0 5px;
}
@media(max-width:600px){
.cookii{
left:1%;
right:1%;
top:2px;
transform:none;
margin-left:auto;
margin-right:auto;
width:98%;
padding:10px;
}
.cookii .irb{
display:block;
}
.cookii button{
display:block;
width:100%;
margin-top:10px;
}
}
@keyframes vonUnten {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media(max-width:980px){
    .nav-cta .btn.btn-primary{
        display:none;
    }
}