@charset "utf-8";
@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: var(--text-p);
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;
}
}
/* 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-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;
}
.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;
}
.a11y-menu .full{
    display:block;
    width:100%;
}
.a11y-menu .full.close{
    background:var(--eco-green);
    color:var(--primary-foreground);
    border:var(--primary-foreground) 1px solid;
}
.a11y-menu button:hover,
.a11y-menu .full.close:hover{
    background:var(--eco-green-dark);
    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;
}
.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;
}
}