html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}h1,h2,h3,h4,h5,h6,ul,p,li,ul,a{margin:0;padding:0}ul{list-style:none}html{overflow-y:scroll}a:hover,a:active{outline:none}textarea{overflow:auto}label{cursor:pointer}html,body,main{width:100%;height:auto;}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.hidden{display:none!important}.visuallyhidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;-webkit-clip-path:none;clip-path:none;height:auto;margin:0;overflow:visible;position:static;width:auto;white-space:inherit}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:1.25dppx),(min-resolution:120dpi){}@media print{*,*:before,*:after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}

/* 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('../fonts/roboto-v47-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - 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: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v47-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - 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: 500;
  src: url('../fonts/roboto-v47-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500italic - 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: italic;
  font-weight: 500;
  src: url('../fonts/roboto-v47-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - 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: 700;
  src: url('../fonts/roboto-v47-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - 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: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v47-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html,
body,
input,
textarea {
    color: #8d8d8e;
    font: 16px/27px 'Roboto', sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.wrapper {
    width: 80%;
    margin: 0 auto;
}

html,
section,
body {
    overflow-y: inherit!important;
}
main {
    overflow: hidden;
}

 * {
      box-sizing: border-box;
}

a {
    color: #3F3C39;
    text-decoration: none;
    transition: all 1s ease;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

a:hover,
a:focus,
a,
footer,
section,
article,
div {
    outline: none!important
}

strong {
    font-weight: 700
}

h1 {
    color: #8d8d8e;
    font-size: 48px;
    margin-bottom: 55px;
    position: relative;
    line-height: 1.2;
}

h2 {
    font-size: 48px;
    margin-bottom: 55px;
    position: relative;    
    line-height: 1.2;
}

h3 {
    color: #95c11f;
    margin-bottom: 15px;
    line-height: 1.2;
}
h4,
h5,
h6 {}

h1::before, #service h2::before {
    content: '';
    width: 100px;
    height: 5px; 
    background-color: #95c11f;
    position: absolute;
    bottom: -36px;
    left: calc(50% - 50px);
}


/* ==========================================================================
   header
   ========================================================================== */

#menu-btn {
    display: none
}

.clear {
    clear: both
}

header {
    background: url(../images/e-rechnung.jpg) no-repeat center center / cover;
    height: 85vH;
    position: relative;
}

.logo {
    background: #f9f9f9;
    padding: 30px 50px 27px 50px;
    float: left;
    position: relative;
    z-index: 9
}

.logo img {
    width: 300px
}

nav {
    /* float: left;
    padding: 65px 0 0 30px */
    float: right;
    padding: 65px 50px 0 30px;
}

nav.menu-fixed {
    position: fixed;
    width: 100%;
    z-index: 999;
    right: 0;
    left: 0;
    background: #f7f7f7;
    padding: 15px 0 15px 0;
    transition: .6s ease;
    -webkit-transition: .6s ease
}

nav ul {
    display: flex
}

nav.menu-fixed ul {
    width: 1280px;
    margin: auto
}

nav ul li {
    text-transform: uppercase;
    padding: 0 15px
}

nav.menu-fixed ul li:first-child {
    padding: 0 50px 0 0
}

nav ul li a {
    color: #575757;
    text-decoration: none;
    font-size: 14px
}

nav.menu-fixed ul li a {
    color: #8d8d8e
}

nav ul li a.active {
    border-bottom: 2px solid #95c11f;
    color: #95c11f
}

nav.menu-fixed ul li a.active {
    color: #95c11f;
    border-bottom: 2px solid #95c11f
}

nav ul li a:hover {
    border-bottom: 2px solid #95c11f;
    color: #95c11f
}

nav.menu-fixed ul li a:hover {
    color: #8d8d8e;
    border-bottom: 2px solid #8d8d8e
}

nav.menu-fixed ul li.phone-fixed a:hover {
    border-bottom: 0
}

.phone {
    float: right;
    font-size: 18px;
    padding: 62px 50px 0 0
}

.phone a {
    color: #95c11f;
    text-decoration: none
}

.phone-fixed {
    display: none
}

.phone-fixed img {
    width: 15px;
}

nav.menu-fixed .phone-fixed {
    text-align: right;
    display: block;
    color: #fff;
    padding: 36px 0 0 6%;
    font-size: 20px
}

.logo-fixed {
    display: none
}

nav.menu-fixed .logo-fixed {
    display: block
}

nav.menu-fixed .logo-fixed img {
    width: 200px;
    padding-top: 17px
}

nav.menu-fixed li {
    padding: 36px 15px 0 15px
}

.claim {
    float: right;
    width: 650px;
    padding: 330px 150px 0 0;
}

.claim p {
    font-size: 31px;
    line-height: 41px;
    font-weight: 400;
    color: #8d8d8e;
    text-shadow: 1px 1px 1px #646464
}

.claim p span {
    color: #95c11f;
    font-weight: 700;
    font-family: Roboto;
    font-size: 48px;
    line-height: 60px;
    padding: 0 0 10px 0;
    display: inline-block
}

.side {
    background: #fff;
    width: 150px;
    height: 85vH;
    position: absolute;
    top: 0
}

.side a {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    top: 70%;
    position: relative;
    display: block;
    text-decoration: none;
    font-size: 14px;
    color: #766c6b
}

.side a span {
    display: inline-block;
    color: #95c11f;
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite
}

@-moz-keyframes bounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -moz-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -moz-transform: translateY(-10px);
        transform: translateY(-10px)
    }

    60% {
        -moz-transform: translateY(-1px);
        transform: translateY(-1px)
    }
}

@-webkit-keyframes bounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    40% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }

    60% {
        -webkit-transform: translateY(-);
        transform: translateX(0)
    }
}

@keyframes bounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    40% {
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }

    60% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}
.datev {
    position: absolute;
    bottom: 5%;
    right: 5%;
}

.datev img {
    width: 80px;
    height: auto;
}

/******************************* 
section1
*******************************/

#e-rechnung {
    padding: 100px 0;
    text-align: center;
}

.small {
    width: 580px;
    position: relative;
    left: calc(50% - 265px)
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#e-rechnung .flex-container {
    margin-top: 50px;
}

#e-rechnung .flex-item {
    width: 30%;
}

#e-rechnung .flex-item:nth-child(1) h2 {
    color: #fff;
    font-size: 18px;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
}

#e-rechnung .flex-item:nth-child(2) h2,
#e-rechnung .flex-item:nth-child(3) h2 {
    color: #95c11f;
    font-size: 18px;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
}

#e-rechnung .flex-item:nth-child(1) {
    background-color: #95c11f;
    color: #fff;
    padding: 40px 18px;
    font-size: 14px;
    line-height: 25px;
    position: relative;
    -webkit-box-shadow: 0px 0px 25px -3px rgba(108,108,108,0.5); 
    box-shadow: 0px 0px 25px -3px rgba(108,108,108,0.5);
}

#e-rechnung .flex-item:nth-child(2),
#e-rechnung .flex-item:nth-child(3) {
    background-color: #f9f9f9;
    padding: 40px 18px;
    font-size: 14px;
    line-height: 25px
}

#e-rechnung span {
    color: #95c11f;
    font-style: italic;
    font-weight: 500;
}

#e-rechnung .flex-item:nth-child(1)::after {
    content: '';
    background: url(../images/roehr-bildmarke-weiss.svg) no-repeat;
    position: absolute;
    width: 235px;
    height: 250px;
    right: -50px;
    bottom: -14px;
    opacity: .1;
}


/******************************* 
section2
*******************************/

#fristen, #faq  {
    padding: 150px 0;
    background-color: #95c11f;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#fristen::after, #faq::after {
    content: '';
    background: url(../images/roehr-bildmarke-weiss.svg) no-repeat;
    position: absolute;
    width: 347px;
    height: 450px;
    right: -30px;
    bottom: -40px;
    opacity: .1;
    z-index: 0;
} 

#fristen .flex-container {
    justify-content: center;
    margin-top: 170px
}

#fristen h2:before {
    content: '';
    width: 100px;
    height: 5px; 
    background-color: #fff;
    position: absolute;
    bottom: -36px;
    left: calc(50% - 50px);
}

#fristen .flex-item {
    width: 250px;
    position: relative;
}

#fristen .flex-item:nth-child(2) {
    margin: 0 150px;
}

#fristen span {
    font-weight: 600;
    font-size: 20px;
}

#fristen .flex-item::before {
    content: ''; 
    background: url(../images/kalender.svg) no-repeat;    
    position: absolute;
    width: 60px;
    height: 60px;
    top: -80px;
    left: calc(50% - 30px);
}

#fristen .flex-item:nth-child(1)::after,
#fristen .flex-item:nth-child(2)::after {
    content: '';
    background: url(../images/linie.svg) no-repeat;
    position: absolute;
    right: calc(50% - 353px);
    top: -53px;
    width: 300px;
    height: 7px;
}

/******************************* 
section3
*******************************/

.parallax {
    background: url(../images/frau-schaut-sich-ihre-e-rechnung-an.jpg) no-repeat center center / cover;
    background-attachment: fixed;
    width: 100%;
    padding: 150px 0;
}

.parallax-2 {
    background: url(../images/geschaeftsleute-sprechen-ueber-die-e-rechnung.jpg) no-repeat center center / cover;
    background-attachment: fixed;
    width: 100%;
    padding: 150px 0;
}

.parallax .flex-container, .parallax-2 .flex-container {
    align-items: center;
}

.parallax h2, .parallax-2 h2 {
    color: #95c11f;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.44);
    line-height: 1;
    margin-bottom: 0;
}

.parallax h2 span, .parallax-2 h3 {
    color: #fff;
    font-size: 20px
}

.parallax-2 h3 {
    margin-top: 15px;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.44);
}

.btn {
    display: inline-block;
    background: #95c11f url(../images/sprechblase.svg) no-repeat left -2px top -10px / 60px;
    padding: 10px 60px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 25px;
}

.btn:hover, #kontakt .btn:hover {
    background: #f9f9f9 url(../images/sprechblase-hell.svg) no-repeat right -2px top -10px / 60px;
    color: #95c11f
}

/******************************* 
section4
*******************************/

#infos {
    padding: 100px 0;
}

.list li, .list-white li {
    margin-left: 20px;
    position: relative;
}

.list li:before {
    position: absolute;
    content: '';
    background: url(../images/check-green.svg) no-repeat;
    width: 15px;
    height: 15px;
    left: -20px;
    top: 4px;
}

.list-white li:before {
    position: absolute;
    content: '';
    background: url(../images/check-white.svg) no-repeat;
    width: 15px;
    height: 15px;
    left: -20px;
    top: 4px;
}

.box-1 h2, .box-2 h2, .box-3 h2, .box-4 h2 {
    line-height: 1.2;
    font-weight: 500;
}

.box-1 h2::before, .box-3 h2::before {
    content: '';
    width: 100px;
    height: 5px; 
    background-color: #95c11f;
    position: absolute;
    bottom: -25px;
    left: 0;
}

.box-1 .flex-item:nth-child(1),
.box-3 .flex-item:nth-child(1) {
    width: 60%;
    background-color: #f9f9f9;
    padding: 50px 35px
}

.box-1 .flex-item:nth-child(2) {
    width: 38%;
    background: url(../images/frau-arbeitet-am-laptop.jpg)no-repeat center center / cover;
    height: auto;
}

.box-3 .flex-item:nth-child(2) {
    width: 38%;
    background: url(../images/format-am-laptop-auswaehlen.jpg)no-repeat center center / cover;
    height: auto;
}

.box-1, .box-2, .box-3 {
    margin-bottom: 25px;
}

.box-3 {
    margin-top: 50px;
}

.box-2 h2:before, .box-4 h2::before {
    content: '';
    width: 100px;
    height: 5px; 
    background-color: #fff;
    position: absolute;
    bottom: -25px;
    left: 0;
}

.box-2 h3, #faq h2 {
    color: #fff;
}

.box-2 .flex-item:nth-child(1) {
    width: 38%;
    background: url(../images/junge-frau-mit-ipad-in-der-hand.jpg)no-repeat center center / cover;
    height: auto;
    position: relative;
}

.box-4 .flex-item:nth-child(1) {
    width: 38%;
    background: url(../images/beratung-vom-steuerberater.jpg)no-repeat center center / cover;
    height: auto;
    position: relative;
}

.box-2 .flex-item:nth-child(2),
.box-4 .flex-item:nth-child(2) {
    width: 60%;
    background: url(../images/bg-green.jpg)no-repeat right bottom / cover;
    padding: 50px 35px;
    color: #fff;
    position: relative;
}

.box-2 .btn-2 {
    position: absolute;
    left: calc(50% - 175px);
    bottom: -20px;
}

.btn-2 {
    display: inline-block;
    background: #f9f9f9 url(../images/sprechblase-hell.svg) no-repeat left -2px top -10px / 60px;
    padding: 10px 60px;
    color: #95c11f;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 25px;
}

.btn-2:hover {
    background: #95c11f url(../images/sprechblase.svg) no-repeat right -2px top -10px / 60px;
    color: #fff
}

.box-4 p {
    max-width: 460px;
}

/******************************* 
section5
*******************************/

#service {
    padding: 100px 0;
}

.center {
    text-align: center;
    margin-bottom: 90px;
}

#service h2 {
    font-weight: 500;
    line-height: 1;
}

.center span {
    color: #95c11f;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 24px;
}

#service .flex-item, #faq .flex-item {
    width: 49%;
}

.grafik {
    width: 100%;
    height: 100px;
}

/******************************* 
section6
*******************************/

#kontakt .flex-item:nth-child(1) {
    width: 50%;
    padding: 0 50px 0 5%;
}

#kontakt .flex-item:nth-child(2) {
    width: 25%;
    background-color: #f9f9f9;
    padding: 25px;
    height: 600px;
    display: flex;
    align-items: center;
    position: relative;
}

#kontakt .flex-item:nth-child(3) {
    width: 25%;
    background: url(../images/mann-am-laptop-ueberprueft-seine-rechnung.jpg)no-repeat center center / cover;
    height: 600px;
}

#kontakt .inner-item {
    width: 50%;
}

.inner-item:nth-child(3),
.inner-item:nth-child(4) {
    margin-top: 25px;
}

#kontakt .middle {
    align-items: center;
}

#kontakt p span {
    color: #95c11f;
    font-weight: 500;
}

#kontakt .btn {
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    margin-top: 0;
    text-align: center;
}

#kontakt hr {
    background-color: #f9f9f9; 
    border: 0;
    height: 2px;
    margin: 25px 0;
}

#kontakt h3 {
    text-transform: uppercase;
    font-size: 20px;
    position: relative;
    color: #8d8d8e;
    margin-bottom: 30px;
    font-weight: 500;
}

#kontakt h3::before {
    content: '';
    width: 75px;
    height: 3px;
    background-color: #95c11f;
    position: absolute;
    bottom: -19px;
    left: 0;
}

.data li {
    display: inline-block;
}

.data li a, .inner-item a,
#kontakt .flex-item:nth-child(2) a,
.imp-link a {
    color: #8d8d8e;
    text-decoration: underline;
}

.data li a:hover, .inner-item a:hover,
#kontakt .flex-item:nth-child(2) a:hover,
.imp-link a:hover {
    text-decoration: none;
}

#kontakt .flex-item:nth-child(2)::after {
    content: '';
    background: url(../images/roehr-bildmarke.svg) no-repeat;
    position: absolute;
    right: 25px;
    bottom: 25px;
    width: 75px;
    height: 98px;
}

/******************************* 
section7
*******************************/

/******************************* 
section8
*******************************/

/******************************* 
acordeon
*******************************/

.acc {
    text-align: left;
    position: relative;
    z-index: 1;
}

/* acordeon styles */
.tab {
    position: relative;
    width: 100%;
    color: #fff;
    overflow: hidden;
    border-bottom: 2px solid #fff;
    margin-bottom: 25px;
}

.acc input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.acc label {
    position: relative;
    display: block;
    padding: 16px 60px 16px 25px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

.acc label span {
    font-size: 20px;
    font-style: italic;
    font-weight: 500;
    margin-left: 0;
}

.tab-content {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .35s;
    -o-transition: max-height .35s;
    transition: max-height .35s;
}

.tab span {
    margin-left: 20px
}

.tab-content ul {
    margin: 1em;
}

.tab-content p {
        padding: 0 70px 25px 25px;
}

/* :checked */
input:checked ~ .tab-content {
    max-height: 10em;
}

/* :checked */
.tab input:checked ~ .tab-content {
    max-height: 580em;
}

/* Icon */
.acc label::after {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    font-size: 25px;
    line-height: 2.4;
    text-align: center;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}

.tab input[type=checkbox] + label::after {
    content: " \f107" !important;
    font-family: "Font Awesome 5 Free";
}

.tab input[type=radio] + label::after {
    content: "\f107";
}

.tab input[type=checkbox]:checked + label::after {
    transform: rotate(180deg);
}

.tab input[type=radio]:checked + label::after {
    transform: rotateX(180deg);
}

/* ==========================================================================
   footer
   ========================================================================== */


.daten {
    position: fixed;
    bottom: 6px;
    z-index: 1000;
}

.daten a {
    font-size: 16px;
    color: #fff;
    background-color: #3a3a3a;
    padding: 7px;
}

/******************************* 
textmarkierungen
*******************************/

::selection {
    background: #000;
    color: #fff;
    text-shadow: none
}

::-moz-selection {
    background: #000;
    color: #fff;
    text-shadow: none
}

/* ==========================================================================
   Google Maps und Cookie Hinweis
   ========================================================================== */

.clear{clear:both;}
.cookie-page1{transition: visibility 0s, opacity 0.5s linear;}
.cookie-page2{visibility:hidden; float:none; width:100%; opacity: 0; transition: visibility 0s, opacity 0.5s linear;}
.cookie-page2.show-page{visibility:visible; opacity: 1; transition: visibility 0s, opacity 0.5s linear;}
.cookie-page2 strong{font-size:18px; margin-bottom:10px;}
.cookie-page2 a{color:black; font-size:16px; line-height:24px; display:inline-block; text-decoration: none; padding:10px 10px 10px 30px; border-radius:5px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAmUlEQVRIie2VQQ6DIBQFJ72DpEfS3sQe1y66V+5RN5CaqJ8nUDd2EsKG9wYNAfhzkAfggY8xIsqaFVMiWCxILtigAYZfCRzwCpk4VxMsd/4G7jUFW+VSXhHslVcRWOUSlqC43BKo5Vm/6MjOswRPvufcWeFcAUAvlBcJVFb5W0GZxOkCH+bUlW1d06Ml7NDehL0xAm3Gh16ZGZhnhhStKN5+AAAAAElFTkSuQmCC');
background-size:12px 12px; background-repeat: no-repeat; background-position: 10px 16px; background-color:#d8d8d8;}
.cookie-page2 a.back-to-cookie{ display:block; width:80%; max-width:100px; margin:30px 0;
background-repeat: no-repeat;
background-size: 12px 12px;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAY0lEQVRIie2UMQqAMBAEJ2Lhs3yR+hTt/I4f89JEBBHiQa4QdiCkCMzkigSEeCGVFSbfgD0icskNOIExUj5J3kzeVc7tEWxOAlbuKWZFahH3Q+sdAQOWsg/A4bvfd0I/O/FDMq2DH/bYYYYxAAAAAElFTkSuQmCC');
background-position: 10px 16px;
background-color:#d8d8d8}
.cookie-overlay-dsa.show-cookie{display:block;}
.cookie-overlay-dsa{display:none; background-color: rgba(214,214,214, 0.60); position: fixed; z-index:99999999; top:0; height:100vh; width:100vw; line-height:20px;}
.dsa-cookie-notice-form{min-height:300px; width:500px; z-index:9999999999; position: absolute; top: 40%; left:calc(48% - 250px);  background-color:white; border-radius:5px; padding:2%;}
.dsa-cookie-notice-form fieldset p{margin-bottom:15px;text-align: center;}
.dsa-cookie-notice-form  .cookie-item{width:33.33%;float:left; text-align: center}
.cookie-overlay-headline{text-align: center; display:block; font-size:18px; font-weight: 600; margin-bottom:15px;}
.dsa-cookie-notice-form fieldset label{cursor: pointer;}
#dsa-check-all.dsa-cookie-button{background-color:#95c11f; margin-top:15px; color: #fff;}
.dsa-cookie-button{border-radius:5px; display:block; margin:0 50px; background-color:#d8d8d8; margin-bottom:5px; padding:10px 20px; text-align: center; text-decoration: none; color:#8d8d8d;}
.dsa-cookie-notice-form input[type="checkbox"] {display:none;}
.dsa-cookie-notice-form input[type="checkbox"] + label::before {width: 15px;height: 15px; border: 2px solid #95c11f; background-color: #fff; display: block; content: ""; margin: 10px auto;}
.dsa-cookie-notice-form input[type="checkbox"]:checked+label::before {  box-shadow: inset 0px 0px 0px 3px #fff;  background-color: #95c11f;}
.dsa-cookie-notice-form input[type="checkbox"]:disabled+label::before{box-shadow: inset 0px 0px 0px 3px #fff; background-color:grey;}
.cookie-notice-verwendung, .cookie-notice-link{display:inline-block; text-align: center; margin:10px auto 0 auto; text-decoration: none; color:grey;}
.cookie-end-links{width:80%; margin:auto; text-align: center}
@media screen and (max-width: 550px){.dsa-cookie-notice-form{width:86%; left:2.0%; padding:5%;}.cookie-notice-link{margin-top:25px;}}
@media screen and (max-height: 570px){.dsa-cookie-notice-form{top:20%;}}

/* ==========================================================================
   media Queries
   ========================================================================== */



@media screen and (max-width: 1366px) {
    .wrapper {
        width: 90%;
    }
    #fristen .flex-item {
        width: 200px;
    }
    #fristen .flex-item:nth-child(1)::after, 
    #fristen .flex-item:nth-child(2)::after {
        width: 315px;
    }
    .parallax, .parallax-2 {
        background-attachment: scroll;
    }
    #kontakt .flex-item:nth-child(1) {
        width: 100%;
        padding: 75px 5%;
    }
    #kontakt .flex-item:nth-child(2),
    #kontakt .flex-item:nth-child(3) {
        width: 50%;
        height: 500px;
    }
    .phone {
        position: absolute;
        float: none;
        right: 20px;
        top: 10px;
        padding: 0
    }
}

@media screen and (max-width:1280px) {
    nav {
        padding: 7px 10px 0 30px
    }
    nav.menu-fixed ul {
        width: 96%;
        margin: 0 2%;
    }
    nav ul li,
    nav.menu-fixed li {
        font-size: 16px;
        padding: 36px 10px 0
    }
    nav.menu-fixed ul li:first-child {
        padding: 0 20px 0 0
    }    
    nav ul li a {
        font-size: 14px;
    }    
    .phone-fixed img {
        width: 15px;
    }
    .logo {
        padding: 10px 30px
    }
    .logo img {
        width: 250px
    }
}

@media screen and (max-width: 1064px) {
    .side, header {
        height: 600px
    }
    .claim {
        padding: 300px 131px 0 65px;
    }
    .claim p {
        font-size: 22px;
        line-height: 34px;
    }
    .claim p span {
        font-size: 38px;
        line-height: 44px;
    }
    .datev img {
        width: 60px;
    }
    #menu-btn {
        background: #95c11f;
        font-size: 15px;
        color: #fff;
        padding: 10px;
        position: absolute;
        right: 20px;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        text-transform: uppercase;
        z-index: 999;
        top: 60px
    }
    nav {
        position: relative;
        float: none;
        padding: 0
    }
    nav.menu-fixed {
        width: auto;
        padding: 0;
        right: 0;
        left: inherit
    }
    nav.menu-fixed ul {
        width: 240px;
        margin: 0 115px 0 0
    }
    nav ul {
        background: #95c11f;
        width: 240px;
        display: block;
        position: absolute;
        margin-top: 0;
        right: calc(10% - 1px);
        padding: 20px 0;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        visibility: hidden;
        opacity: 0
    }
    nav ul li {
        display: block;
        margin: 0;
        padding: 0 25px;
        text-align: center
    }
    nav.menu-fixed li {
        padding: 0 25px
    }
    nav.menu-fixed .phone-fixed,
    nav.menu-fixed ul li:first-child {
        display: none
    }
    nav ul li a {
        display: block;
        line-height: 30px;
        padding: 8px 0;
        color: #fff
    }
    nav ul li a.active {
        color: #fff;
        border-bottom: 2px solid #fff
    }
    nav ul li a:hover {
        color: #fff;
        opacity: .7
    }
    nav ul li.current-menu-item {
        background: #bcd99c
    }
    nav ul li.current-menu-item a {
        color: #333
    }
    nav ul li:last-child a {
        border-bottom: none
    }
    #menu-btn.menu-on + ul {
        visibility: visible;
        opacity: 1;
        margin-top: 60px
    }    
    nav.menu-fixed ul li a.active,
    nav.menu-fixed ul li a:hover {
        color: #fff;
        border-bottom: 2px solid #fff;
    }
    nav.menu-fixed ul li a {
        color: #fff;
    }
    #e-rechnung .flex-item:nth-child(1),
    #e-rechnung .flex-item:nth-child(2) {
        width: 49%;
    }
    #e-rechnung .flex-item:nth-child(3) {
        width: 100%;
        margin-top: 25px;
    }
    #fristen .flex-item:nth-child(1)::after, 
    #fristen .flex-item:nth-child(2)::after {
        width: 220px;
        height: 5px;
        right: calc(50% - 259px);
    }
    #fristen .flex-item:nth-child(2) {
        margin: 0 50px;
    }
    #service {
        padding: 0 0 100px 0;
    }
    #service .flex-item:nth-child(1),
    #service .flex-item:nth-child(2),
    #faq .flex-item:nth-child(1),
    #faq .flex-item:nth-child(2) {
        width: 100%
    }
    #service .flex-item:nth-child(2) {
        margin-top: 50px;
    }
}

@media screen and (max-width: 800px) {
    .side {
        width: 90px;
    }
    h2, h1 {
        font-size: 38px;
    }
    #fristen .flex-item:nth-child(1),
    #fristen .flex-item:nth-child(2),
    #fristen .flex-item:nth-child(3) {
        width: 100%;
    }
    #fristen .flex-item:nth-child(2) {
        margin: 0;
    }
    #fristen .flex-item:nth-child(2),
    #fristen .flex-item:nth-child(3) {
        margin-top: 200px;
    }
    #fristen .flex-item:nth-child(1)::after, 
    #fristen .flex-item:nth-child(2)::after {
        height: 4px;
        right: calc(50% - 110px);
        top: auto;
        bottom: -123px;
        transform: rotate(90deg);
    }
    .box-1 .flex-item:nth-child(1), 
    .box-1 .flex-item:nth-child(2), 
    .box-3 .flex-item:nth-child(1),
    .box-3 .flex-item:nth-child(2),
    .box-2 .flex-item:nth-child(1),
    .box-2 .flex-item:nth-child(2),
    .box-4 .flex-item:nth-child(1),
    .box-4 .flex-item:nth-child(2) {
        width: 100%
    }
    .box-1 .flex-item:nth-child(2),
    .box-2 .flex-item:nth-child(1),
    .box-4 .flex-item:nth-child(1),
    .box-3 .flex-item:nth-child(2) {
        height: 300px;
        margin-top: 25px;
    }
    .box-2.flex-container,
    .box-4.flex-container {
        flex-direction: column-reverse;
    }
    .box-2 .flex-item:nth-child(1) {
        background: url(../images/junge-frau-mit-ipad-in-der-hand.jpg) no-repeat top center / cover;
    }
    .box-4 .flex-item:nth-child(1) {
       background: url(../images/beratung-vom-steuerberater.jpg)no-repeat top center / cover
    }
}

@media screen and (max-width: 700px) {
    #e-rechnung .flex-item:nth-child(1),
    #kontakt .inner-item {
        width: 100%;
    }
    #e-rechnung .flex-item:nth-child(1)::after {
        width: 170px;
        height: 235px;
        right: 0;
    }
    #e-rechnung .flex-item:nth-child(2) {
        width: 100%;
        margin-top: 25px;
    }
    #kontakt .flex-item:nth-child(2) {
        width: 100%;
        height: auto;
        padding: 75px 5%;
    }
    #kontakt .flex-item:nth-child(3) {
        width: 100%;
        height: 300px;
        background:  url(../images/mann-am-laptop-ueberprueft-seine-rechnung.jpg)no-repeat top center / cover;
    }
    #kontakt .flex-item:nth-child(2)::after {
        right: 15px;
        bottom: 15px;
        width: 45px;
        height: 59px;
    } 
    #kontakt .inner-item:nth-child(2) br {
        display: none;
    }
    #kontakt .inner-item:nth-child(2) {
        margin-top: 25px;
    }
    .side, header {
        height: 450px
    }
    .claim {
        padding: 165px 0 0 220px
    }
    .claim p {
        font-size: 18px;
        line-height: 27px;
    }
    .claim p span {
        font-size: 30px;
        line-height: 39px;
    }
    .logo img {
        width: 200px;
    }
    .small {
        width: 90%;
        left: 5%
    }
}

@media screen and (max-width: 530px) {
    .claim {
        padding: 165px 0 0 330px;
    }
    .side {
        display: none
    }    
    .logo img {
        width: 180px;
    }    
    #menu-btn {
        top: 29px;
    }
    .claim {
        width: auto;
        padding: 165px 5% 0 5%;
    }
    .phone {
        left: 20px;
        top: 100px;
        right: inherit
    }
}

@media screen and (max-width: 400px) {
    
    * {
        hyphens: auto;
        -moz-hyphens: auto;
        -o-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
    }
}