@import url("reset.css");

/*-----------FONTS-----------*/

/* josefin-sans-300 - latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/josefin-sans-v24-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/josefin-sans-v24-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/josefin-sans-v24-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/josefin-sans-v24-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/josefin-sans-v24-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/josefin-sans-v24-latin-300.svg#JosefinSans') format('svg'); /* Legacy iOS */
}

/* josefin-sans-regular - latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/josefin-sans-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/josefin-sans-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/josefin-sans-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/josefin-sans-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/josefin-sans-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/josefin-sans-v24-latin-regular.svg#JosefinSans') format('svg'); /* Legacy iOS */
}

/* josefin-sans-600 - latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/josefin-sans-v24-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/josefin-sans-v24-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/josefin-sans-v24-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/josefin-sans-v24-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/josefin-sans-v24-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/josefin-sans-v24-latin-600.svg#JosefinSans') format('svg'); /* Legacy iOS */
}

/* josefin-sans-italic - latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/josefin-sans-v24-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/josefin-sans-v24-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/josefin-sans-v24-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/josefin-sans-v24-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/josefin-sans-v24-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/josefin-sans-v24-latin-italic.svg#JosefinSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-narrow-regular - latin */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans-narrow-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/pt-sans-narrow-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans-narrow-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans-narrow-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans-narrow-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans-narrow-v17-latin-regular.svg#PTSansNarrow') format('svg'); /* Legacy iOS */
}


/*-----------FONTGESTALTUNG-----------*/

p {font-size: 15px; font-weight: 300; line-height: 21px; margin-bottom: 15px;}
a {color: #000; text-decoration: none; cursor: pointer;}
h1 {font-family: 'Josefin Sans'; font-size: 26px; line-height: 32px; color: #3b4033; margin-bottom: 20px;}
h1 span {color: #009aa3}
h2 {font-family: 'Josefin Sans'; font-size: 34px; text-transform: uppercase; color: #fff;}
h3 {font-family: 'Josefin Sans'; font-size: 18px; line-height: 21px; font-style: italic; color: #009aa3; text-transform: uppercase;}
h4 {font-family: 'Josefin Sans'; font-size: 18px; line-height: 22px; color: #fff; text-transform: uppercase;}
li {font-size: 14px; list-style: disc;}
strong {font-weight: 500; font-size: 17px; color: #535353; font-style: italic;}


/*-----------NAVI-----------*/

.logo {position: fixed; width: 300px; height: auto; top: 35px; left: 10%; z-index: 9999;}
nav {position: fixed; background: #fff; width: 100%; z-index: 101; top: 0; text-align: right; padding: 60px 0 0; z-index: 100; border-bottom: 8px solid #009aa3;}
nav ul {margin-right: 15%; margin-bottom: 15px;}
nav ul li {display: inline-block; text-transform: uppercase;}
nav ul li a {font-family: 'Josefin Sans'; text-decoration: none; font-size: 18px; color: #009aa3; font-weight: 300; position: relative; padding: 0 20px 15px; transition: 0.5s;}

nav ul li a:hover {color: #123c8a; border-bottom: 9px solid #123c8a; font-size: 20px;}
nav ul li a::before {position: absolute; content: '■'; font-size: 20px; right: 32px; bottom: 40px; transition: 0.5s;}
nav ul li a:hover::before {color: #123c8a; right: 32px;}

.line {width: 1px; height: 35px; background-color: #009aa3; position: absolute; bottom: 0;}

.navi {display: none;}
.burger-nav {position: fixed; right: 0; top: -6px; color: #fff; z-index: 9999; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 35px; cursor: pointer; transition: all .4s ease-in-out; background-color: #009aa3; padding: 16px 21px 21px 19px;}
.burger-nav b {transition: all .4s ease-in-out; float: left; margin-left: 0; font-family: 'Josefin Sans'; font-style: normal;}
.burger-nav-anim {background: none;}
.burger-nav-anim b:first-of-type {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.burger-nav-anim b:nth-of-type(2) {opacity: 0;}
.burger-nav-anim b:last-of-type {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -70%;}

.full-screen-nav {position: fixed; z-index: 9998; width: 100%; height: 100vh; background: rgba(0,154,163,0.9); display: table; visibility: hidden; transition: all .4s ease-in-out; opacity: 0;}
.full-screen-nav ul {text-align: center; display: table-cell; vertical-align: middle; width: 100%;}
.full-screen-nav ul li a {font-family: 'Josefin Sans'; padding: 20px; display: block; font-size: 30px; color: #fff; transition: all .4s ease-in-out; text-decoration: none; text-transform: uppercase;}
.fadeIn {opacity: 1 !important; visibility: visible !important;}
.fadeUp {opacity: 1 !important; margin-top: 0 !important;}


/*-----------SUBNAV-----------*/

.subnav {position: fixed; bottom: 0; color: #fff; z-index: 999; transition: 0.5s; width: 100%; text-align: right;}
.subnav a {font-family: 'Josefin Sans'; color: #fff; padding: 8px 15px; font-size: 14px; background-color: #009aa3; margin-left: 10px; line-height: 23px;}
.subnav a:nth-of-type(2) {margin-right: 5%;}
.subnav a:hover {color: #dfdfdf;}


/*-----------HEADER-----------*/

header {background: url("../images/kueck-header.jpg") no-repeat; height: 100vh; width: 100%; background-size: cover; background-attachment: fixed; background-position: center; position: relative;}

#stoerer {position: absolute; left: 10%; bottom: 20vh; padding: 30px 40px; background: rgba(255,255,255,0.8); border-bottom: 8px solid #123c8a}
#stoerer .btn:nth-of-type(1) {margin-right: 20px;}

/*-----------AUFBAU-----------*/

html {scroll-behavior: smooth;}
.content {display: flex; width: 70%; margin-left: 15%;}
.center {width: 70%; margin-left: 15%;}
.flex {display: flex;}
.col {width: 90%;}
.col:nth-of-type(2) {margin-left: 10%;}
.btn {padding: 7px 20px 5px; background-color: #123c8a; color: #fff; font-family: 'Josefin Sans'; transition: 0.5s; font-size: 15px;}
.btn:hover {background-color: #009aa3;}
.ueberschrift {display: flex; justify-content: center; align-items: center; margin-bottom: 100px;}
.ueberschrift .icon {width: 50px; height: auto; margin-right: 20px;}

::-moz-selection {background: #009aa3; color: #fff;}
::selection {background: #009aa3; color: #fff;}


/*-----------STEUERBERATUNG-----------*/

#steuerberatung {padding: 180px 0; background: url("../images/dark-background.jpg") no-repeat; height: auto; width: 100%; background-size: cover; background-position: center; position: relative; border-bottom: 8px solid #009aa3}
#steuerberatung {padding: 120px 0;}

.tab {width: 50%; margin-right: 5%}
.tab-inhalt {width: 50%;}
.tablinks {display: flex;}
.tablinks b {margin-left: 10px;}

.button-icon {width: 25px; height: auto;}
.tab button {border: none; outline: none; cursor: pointer; padding: 14px 25px; transition: 0.3s; font-family: 'PT Sans Narrow'; font-size: 18px; width: 100%; background-color: #0a2344; color: #fff; box-shadow: 0 0 5px #009aa3; text-align: left;}
.tab button:hover, .tab button.active {border: 3px solid #009aa3}

.tab button.active {position: relative;}
.tab button.active::before {position: absolute; content: '▶'; color: #009aa3; font-size: 25px; right: -22px; bottom: 10px; transition: 0.5s;}

.tabcontent {display: none; padding: 30px 40px 40px; border-top: none; background-color: #0a2344; box-shadow: 0 0 5px #009aa3; border: 3px solid #009aa3; position: relative;}
.tabcontent p {font-family: 'PT Sans Narrow'; font-size: 16px; color: #fff;}
.tabcontent .text {background-color: #009aa3; padding: 45px 30px 30px;}
.tab-img {width: 80px; height: auto; display: block; margin: auto; padding: 50px 0 20px;}

.unternehmen::before {position: absolute; content: url("../images/fabrik.svg"); color: #fff; font-size: 25px; left: -22px; bottom: 10px; transition: 0.5s;}


/*-----------TEAM-----------*/

#team {padding: 160px 0; background: url("../images/light-background.jpg") no-repeat; height: auto; width: 100%; background-size: cover; background-position: center; position: relative; border-bottom: 8px solid #009aa3}
#team h2 {color: #535353}

.kueck {background: url("../images/andreas-kueck.jpg") no-repeat; height: 500px;background-size: cover; background-position: center bottom; position: relative;}
.fernandes {background: url("../images/thomas-dias-fernandes.jpg") no-repeat; height: 500px; background-size: cover; background-position: center bottom; position: relative;}
.syre {background: url("../images/jan-syre.jpg") no-repeat; height: 500px; background-size: cover; background-position: center bottom; position: relative;}
#team .content {margin-bottom: 100px;}
#team .col:nth-of-type(2) {margin: 0 5%}

.box {background-color: #009aa3; width: 60%; padding: 20px 30px; position: absolute; left: -30px; bottom: -30px;}
.box p {margin-bottom: 0; font-family: 'Josefin Sans'; font-style: italic; color: #fff;}

/* Slideshow */
.slideshow-container {width: 100%; position: relative; margin: auto;}

.text-box {width: 35%; height: auto; background: url("../images/galerie-background.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.text-box p {font-family: 'Josefin Sans'; color: #fff; font-size: 18px;}
.text-box h3 {font-size: 25px; line-height: 30px; text-transform: uppercase; margin-bottom: 20px;}
.text-box span {font-style: italic; font-weight: 300;}
.vertical {position: absolute; top: 50%; transform: translate(-0, -50%); padding: 0 10%}

.mitarbeiter {width: 65%; height: 550px;}
.kueck-busch {background: url("../images/team/kueck-busch.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.dobert {background: url("../images/team/dobert.jpg") no-repeat; background-size: cover; background-position: center center; position: relative;}
.mazzagatti {background: url("../images/team/mazzagatti.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.mertins {background: url("../images/team/mertins.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.rudhart {background: url("../images/team/rudhart.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.schnell {background: url("../images/team/schnell.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.schoenfelder {background: url("../images/team/schoenfelder.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.stegmann {background: url("../images/team/stegmann.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.kueck-j {background: url("../images/team/kueck-j.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.kueck-l {background: url("../images/team/kueck-l.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.bendrin {background: url("../images/team/bendrin.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.chabanyuk {background: url("../images/team/chabanyuk.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.alilou {background: url("../images/team/alilou.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}
.beeker {background: url("../images/team/beeker.jpg") no-repeat; background-size: cover; background-position: center; position: relative;}

.prev, .next {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; user-select: none; background-color: #009aa3}

.prev {left: -41px;}
.next {right: -42px;}
.prev:hover, .next:hover {-ms-transform: scale(1.2); -webkit-transform: scale(1.2); /transform: scale(1.2);}

.fade {animation-name: fade; animation-duration: 1.5s;}
@keyframes fade {from {opacity: .4} to {opacity: 1}}
@media only screen and (max-width: 300px) {.prev, .next,.text {font-size: 11px}}


/*-----------KONTAKTIEREN-----------*/

#kontaktieren {background-color: #009aa3; padding: 50px 0;}
#kontaktieren h2 {font-size: 30px; line-height: 32px; margin-bottom: 10px;}
#kontaktieren h3 {font-size: 20px; line-height: 26px; color: #fff;}

#kontaktieren a, #kontaktieren p {font-family: 'Josefin Sans'; color: #fff; font-size: 22px; line-height: 28px; font-weight: 500;}
#kontaktieren img {width: 20px; height: auto;}


/*-----------QM-----------*/

#qm {padding: 160px 0; background: url("../images/dark-background.jpg") no-repeat; height: auto; width: 100%; background-size: cover; background-position: center; position: relative; border-bottom: 8px solid #009aa3}
#qm .content {margin-bottom: 80px;}

.info-box {width: 33%; height: auto; background-color: #fff; text-align: center; padding: 50px 20px; transition: 0.5s; box-shadow: 0 0 15px #4d4d4d;}
.info-box:nth-of-type(2) {margin: 0 10%;}
.info-box:hover {border: 4px solid #009aa3; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); /transform: scale(1.2);}

.info-box h4 {font-family: 'PT Sans Narrow'; font-size: 19px; line-height: 22px; color: #535353; margin-bottom: 30px;}
.info-box .info-icon {width: 50px; height: auto; margin-bottom: 20px;}

.popup_visible #popup1, .popup_visible #popup2, .popup_visible #popup3, .popup_visible #popup4,  .popup_visible #popup5, .popup_visible #popup6 {transform: scale(1);}

.popup-style {width: 50%; padding: 100px 10%; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); background: url("../images/light-background.jpg") no-repeat; height: auto; background-size: cover; background-position: center; border: 4px solid #009aa3;}

.popup-style p {font-family: 'Josefin Sans'; color: #3b4033; font-size: 16px; font-weight: 400; margin-bottom: 0;}
.popup-style h3 {font-size: 25px; margin-bottom: 10px; font-style: normal}
button {margin: 0; padding: 0; background: none; border: none}
.close-popup {transition: all 0.5s ease; cursor: pointer; position: fixed; top: 15px; right: 20px; font-size: 25px; font-weight: 600; color: #009aa3}
.close-popup:hover {color: #000;}


/*-----------PUFFER-----------*/

.puffer1 {background: url("../images/beratung-steuern.jpg") no-repeat; height: 400px; width: 100%; background-size: cover; background-attachment: fixed; background-position: center; position: relative;}

.puffer2 {background: url("../images/kontaktieren-steuerberater.jpg") no-repeat; height: 400px; width: 100%; background-size: cover; background-attachment: fixed; background-position: center; position: relative;}

.down {width: 40px; height: auto; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: -23px;}


/*-----------FOOTER-----------*/

#kontakt h2 {font-size: 24px; margin-bottom: 6px;}
#kontakt h3 {font-size: 18px; color: #009aa3}
#kontakt a {color: #009aa3; text-decoration: none; font-weight: 400;}
#kontakt p {font-family: 'Josefin Sans'; font-size: 16px;}
#kontakt .ueberschrift {justify-content: flex-start; margin-bottom: 30px;}
#kontakt .ueberschrift .icon {margin-right: 8px;}
#kontakt .kontakt-icon {width: 12px; height: auto; margin-right: 6px;}

#kontakt .kontakt-infos {background: url("../images/dark-background.jpg") no-repeat; height: auto; width: 25%; background-size: cover; background-position: center; position: relative; padding: 120px 5%;}

.col3 {width: 33%; height: auto;}
.bild {background: url("../images/kueck-steuerberater-eingang.jpg") no-repeat; height: auto; width: 33%; background-size: cover; background-position: center; position: relative;}

footer p, footer h2, footer h3, footer a {color: #fff;}
footer a {text-decoration: underline;}
footer .line {background-color: #fff;}


/*-----------IMPRESSUM-----------*/

#impressum {padding: 160px 0; background: url("../images/light-background.jpg") no-repeat; height: auto; width: 100%; background-size: cover; background-position: center; position: relative; border-bottom: 8px solid #009aa3; padding: 160px 0;}

#impressum h2 {color: #535353}
#impressum h4 {color: #123c8a; font-size: 19px; text-transform: none; margin-bottom: 5px;}
#impressum a, #impressum span {color: #123c8a; text-decoration: none; font-weight: 400;}
#impressum p {font-family: 'Josefin Sans'; font-size: 17px; line-height: 22px; font-weight: 300; color: #535353;}
#impressum .kontakt-icon {width: 12px; height: auto; margin-right: 6px;}


/*-----------RESPONSIVE-----------*/

@media screen and (max-width: 1366px) {
    header, .puffer1, .puffer2 {background-attachment: scroll;}
    .info-box h4 {font-size: 18px; word-break: break-all}
}

@media screen and (max-width: 1200px) {
    .logo {left: 10%;}
    nav ul {margin-right: 10%;}
    
    #qm .content {width: 90%; margin-left: 5%;}
    
    .info-box:nth-of-type(2) {margin: 0 5%}
}

@media screen and (max-width: 900px) {
    h1 {font-size: 18px; line-height: 24px;}
    h2 {font-size: 24px; margin-bottom: 5px;}
    h3 {font-size: 16px; margin-bottom: 5px;}
    .logo {display: none;}
    header {height: 75vh;}
    nav, nav ul{display: none;}
    .navi {display: block;}
    aside img {width: 30px;}
    
    #stoerer {bottom: 10vh;}
    main {text-align: center;}
    .content {display: block;}
    
    .ueberschrift {display: block; margin-bottom: 40px;}
    .ueberschrift .icon {margin-right: 0; margin-bottom: 15px;}
    
    #steuerberatung, #team, #qm {padding: 100px 0;}
    
    .tab {width: 100%; margin-right: 0;}
    .tab-inhalt {width: 100%;}
    .tab button.active::before {display: none;}
    
    #team .col {width: 100%; margin-left: 0;}
    #team .col:nth-of-type(2) {margin: 50px 0 80px;}
    .box {width: 80%; left: 5%;}
    .kueck {margin-bottom: 80px;}
    .kueck, .fernandes, .syre {height: 450px;}
    
    .mySlides .flex {display: block;}
    .text-box {width: 100%; height: 300px; position: relative;}
    .text-box h3 {font-size: 18px; line-height: 22px; margin-bottom: 10px;}
    .mitarbeiter {width: 100%; height: 400px;}
    .center {width: 80%; margin-left: 10%}
    .prev {left: 0;}
    .next {right: 0;}
    
    #qm .content {margin-bottom: 0;}
    .info-box {margin-left: auto; margin-right: auto; margin-bottom: 40px; width: 70%;}
    .info-box:nth-of-type(2) {margin-left: auto; margin-right: auto; margin-bottom: 40px;}
    .info-box:hover {-ms-transform: scale(1.1); -webkit-transform: scale(1.1); /transform: scale(1.1);}
    
    #kontaktieren h2 {font-size: 26px;}
    #kontaktieren h3 {margin-bottom: 20px;}
    #kontaktieren .col {width: 100%;}
    #kontaktieren .col:nth-of-type(2) {margin-left: 0;}
    
    #kontakt .flex {display: block;}
    #kontakt .bild {display: none;}
    #kontakt .col3 {width: 100%;}
    #kontakt .kontakt-infos {padding: 80px 0;}
    #kontakt .ueberschrift .icon {margin-right: 0;}
    .maps {height: 300px;}
    
    #impressum .col {width: 100%;}
    #impressum .col:nth-of-type(2) {margin-left: 0;}
}

@media screen and (max-width: 600px) {
    .ueberschrift {padding: 0 5%;}

    .tab button {font-size: 15px; margin-bottom: 10px; padding: 10px 20px;}
    .tabcontent {padding: 30px 20px 40px;}
    .tabcontent .text {padding: 30px 20px;}
    .tab-img {padding: 20px 0;}
    
    .kueck, .fernandes, .syre {height: 400px;}
    .box p {font-size: 14px; line-height: 18px;}
    .box h4 {font-size: 15px;}
    
    .text-box p {font-size: 15px; line-height: 20px;}
    .text-box h3 {font-size: 16px;}
    
    #kontaktieren h2, #kontaktieren h3, #kontaktieren a, #kontaktieren p {font-size: 18px;}
    
    .puffer1, .puffer2 {height: 300px;}
    
    .popup-style h3 {font-size: 22px; line-height: 25px;}
}

@media screen and (max-width: 500px) {
    h1 {font-size: 14px; line-height: 18px;}
    h2 {font-size: 19px;}
    h3 {line-height: 20px;}
    
    header {height: 60vh;}
    
    .content {width: 80%; margin-left: 10%;}
    
    #stoerer {padding: 30px 25px;}
    #stoerer .btn {font-size: 12px;}
    #stoerer .btn:nth-of-type(1) {margin-right: 5px;}
}

@media screen and (max-width: 500px) {
    #stoerer {left: 5%;}
}