@import url("reset.css");

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

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

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

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

/* dm-serif-display-regular - latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-serif-display-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/dm-serif-display-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dm-serif-display-v15-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/dm-serif-display-v15-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/dm-serif-display-v15-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/dm-serif-display-v15-latin-regular.svg#DMSerifDisplay') format('svg'); /* Legacy iOS */
}

/* dm-serif-display-italic - latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/dm-serif-display-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/dm-serif-display-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dm-serif-display-v15-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/dm-serif-display-v15-latin-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/dm-serif-display-v15-latin-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/dm-serif-display-v15-latin-italic.svg#DMSerifDisplay') format('svg'); /* Legacy iOS */
}


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

body {font-family: 'Arial'}
p {font-size: 16px; line-height: 30px; font-weight: 300; margin-bottom: 15px; text-align: justify;}
a {color: #000; text-decoration: none; cursor: pointer;}
h1 {font-size: 60px; line-height: 60px; font-weight: 600; margin-bottom: 30px; margin-right: 5%; color: #921708}
h1 b {font-style: italic; font-weight: 500;}
h2 {font-size: 60px; line-height: 60px; font-weight: 600; color: #921708; margin-bottom: 20px;}
h2 b {font-style: italic; font-weight: 500;}
h3 {font-size: 30px; line-height: 30px; font-style: italic; font-weight: 500; margin-bottom: 50px; color: #921708;}
h4 {font-size: 18px; font-weight: 600; color: #921708; text-align: left; margin-bottom: 5px;}
li {font-size: 14px; list-style: disc;}
strong {font-weight: 500;}
.bold {text-align: justify; direction: rtl;}
.bold p {font-weight: 600;}


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

html {scroll-behavior: smooth; background-color: #f3f2ef;}
#middle {margin: 0 60px; border-left: 3px solid #292929; border-right: 3px solid #292929;}
.content {display: flex; width: 80%; margin-left: 10%;}
.col2 {width: 50%;}
.col2:nth-of-type(2) {margin-left: 5%;}
.col3 {width: 33%;}
.col3:nth-of-type(2) {margin: 0 5%;}
.flex {display: flex;}

.btn {font-style: italic; background-color: #921708; color: #fff; padding: 5px 30px; transition: 0.5s; border-radius: 50px;}
.btn:hover {background-color: #6d6d6d;}
::-moz-selection {background: #560900; color: #fff;}
::selection {background: #560900; color: #fff;}


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

nav {position: fixed; background-image: linear-gradient(to top, rgba(35,35,35,0), rgba(116,112,105,1)); width: 100%; z-index: 101; top: 0; text-align: center; padding: 30px 0 40px; z-index: 100;}
nav ul li {display: inline-block; margin: 0 2%;}
nav ul li a {text-decoration: none; font-style: italic; font-size: 18px; color: #921708; font-weight: 600;}
nav ul li a:hover {font-style: normal;}

.burger-nav, .menu, .line {display: none;}

.line {position: fixed; right: 0; top: 80px; width: 60px; height: 3px; background-color: #292929;}
.menu {position: fixed; right: 12px; top: 10px; font-family: 'DM Serif Display'; font-style: italic; font-size: 15px;}
.burger-nav {position: fixed; right: 5px; top: 20px; color: #292929; z-index: 9999; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 40px; cursor: pointer; transition: all .4s ease-in-out; background-color: none; padding: 10px 12px 10px 12px;}
.burger-nav b {transition: all .4s ease-in-out; float: left; margin-left: 0; font-family: 'Roboto'; font-style: normal;}
.burger-nav-anim {top: 15px; color: #292929;}
.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: -80%;}

.full-screen-nav {position: fixed; z-index: 9998; width: 100%; height: 100vh; background: #f3f2ef; 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: 'DM Serif Display'; font-weight: 600; padding: 20px; display: block; font-size: 30px; color: #292929; transition: all .4s ease-in-out; text-decoration: none;}
.fadeIn {opacity: 1 !important; visibility: visible !important;}
.fadeUp {opacity: 1 !important; margin-top: 0 !important;}


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

header {width: 100%;}
header .marmor {position: absolute; background: url("../images/marmor-background.png") no-repeat; background-position: center; background-size: cover; left: 0; top: 0; width: 50%; height: 90vh; z-index: 9;}

#headerbild {background: url("../images/header.jpg") no-repeat; height: 80vh; width: 70%; margin-left: 30%; background-size: cover; background-position: center; position: relative;}

#logo {width: 200px; height: auto; margin-bottom: 100px;}
#stoerer {position: absolute; left: 15%; top: 20vh;}


/*-----------ASIDE-----------*/

aside img {position: fixed; width: 40px; z-index: 999; right: 10px; transition: 0.5s;}
aside img:hover {transform: scale(1.2);}
.phone {bottom: 300px;}
.mail {bottom: 250px;}
.maps {bottom: 200px;}


/*-----------ÜBER UNS-----------*/

#ueberuns {padding: 200px 10% 50px;}
#ueberuns h2, #ueberuns h3 {text-align: center;}
#ueberuns p {text-align: justify;}


/*-----------TRADITION-----------*/

#tradition {position: relative; margin-top: 250px; display: flex;}
#tradition .marmor {position: absolute; background: url("../images/marmor-background.png") no-repeat; background-position: center; background-size: cover; right: 0; bottom: 0; width: 30%; height: 105%; z-index: 9; padding: 150px 10% 0 20%}

#tradition .bild {background: url("../images/decke-restaurierung.jpg") no-repeat; height: 700px; width: 50%; margin-right: 30%; background-size: cover; background-position: center top; position: relative;}


/*-----------LEISTUNGEN-----------*/

#leistungen {padding: 200px 10% 100px; text-align: center;}
#leistungen p {text-align: center;}

#leistungen .center {justify-content: center;}
.popup-style .flex {gap: 20px; justify-content: center}
.pop-img {width: 100%; height: auto; margin: 0 auto;}
.single {margin: 0 10%;}


/*-----------KONTAKT-----------*/

#kontakt {background-color: #292929; padding: 150px 0;}
#kontakt h2 {font-size: 40px; line-height: 45px; margin-bottom: 40px; color: #921708;}
#kontakt p {color: #efeee9;}
#kf {width: 100%; height: 700px;}


/*-----------REFERENZEN-----------*/

#referenzen {padding: 200px 0 100px; text-align: center;}
.center {display: flex; width: 90%; margin: 0 5% 30px;}
.box {width: 29%; height: 250px; position: relative; border: 3px solid #292929;}
.box:nth-of-type(2) {margin: 0 6%;}
.thumbnail {object-fit: cover; width: 100%; height: 250px;}


.first {padding: 50px 0 0!important;}
.last {width: 29.5%!important;}

.text {position: absolute; width: 100%; height: auto; text-align: center; padding: 70px 0}
.text h4 {font-size: 22px; text-align: center; margin-bottom: 20px;}
.text h4 b {font-style: italic;}

.info {background-color: #292929; width: 100%;}
.info h4 {color: #efeee9;}
.info .btn {background-color: #efeee9; color: #292929}
.info .btn:hover {background-color: #cac8bd;}

.fslightbox-toolbar-button {background-color: #292929;}


/*-Popup-*/

.popup-style {margin: 0; width: 70%; min-height: 20px; padding: 80px 5%; background-color: #f3f2ef; border: 3px solid #292929; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); transform: scale(1);}

.popup-style a {color: #292929}
.popup-style a:hover {opacity: 0.8; text-decoration: none}
.popup-style p {color: #292929; text-align: center;}
.popup-style h2 {font-size: 30px; line-height: 35px; text-align: center; margin-bottom: 20px;}
.popup-style h3 {font-size: 20px; text-align: center; margin-bottom: 5px;}
button {margin: 0; padding: 0; background: none; border: none; color: #fff; font-weight: 600; font-size: 20px; padding: 2px 7px 5px 10px;}
.close-popup {transition: all 1s ease; cursor: pointer; position: fixed; top: 0; right: 0; background-color: #292929;}
.close-popup i {transition: all 1s ease; font-size: 2rem; color: #fff;}
.close-popup:hover i {color: #fff}


/*-----------EHRUNGEN-----------*/

#ehrungen {padding: 200px 10% 100px; text-align: center;}
#ehrungen p {text-align: center; padding: 0 5%;}
#ehrungen .flex {margin-top: 50px;}

.plakette {width: 100%; height: auto; max-width: 100px;}
.ehrung {width: 100%; height: auto; background-color: #911607; text-align: center;}
.ehrung:nth-of-type(2) {margin: 0 5%;}
.ehrung p, .ehrung h4 {color: #fff; text-align: center;}
.ehrung b {font-style: italic; font-weight: 500; font-size: 18px;}


/*-----------PHILOSOPHIE-----------*/

#philosophie {padding: 200px 0 100px;}
#projekte {padding: 0 0 100px;}


#philosophie h3, #projekte h3 {margin-bottom: 5px;}
#philosophie .col2:nth-of-type(1) {background: url("../images/stuck-restaurierung-saeule.jpg") no-repeat; height: auto; width: 50%; background-size: cover; background-position: center; position: relative;}
#projekte .col2:nth-of-type(2) {background: url("../images/restaurierung-decke.jpg") no-repeat; height: auto; width: 50%; background-size: cover; background-position: center; position: relative;}


/*-----------ÜBER UNS-----------*/

#werkstatt {padding: 200px 10% 50px; text-align: center;}
#werkstatt h2, #werkstatt h3 {text-align: center;}
#werkstatt p {text-align: center; font-weight: 600; width: 100%}


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

#impressum {padding: 200px 10% 100px; text-align: center;}
#impressum a {text-decoration: underline; font-weight: 500;}
#impressum p {text-align: left;}



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

footer {padding: 120px 0; background-color: #0f0f0f; text-align: left;}
footer p, footer h2, footer h3, footer a {color: #efeee9;}
footer h2 {font-size: 20px; line-height: 23px;}
footer a {text-decoration: underline;}


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

@media screen and (max-width: 1300px) {
    #tradition .marmor {padding: 100px 10% 0 10%; width: 50%;}
}

@media screen and (max-width: 1200px) {
    h1 {font-size: 35px; line-height: 35px;}
    #logo {width: 200px; height: auto; margin-bottom: 50px;}
    
    header .marmor {width: 60%; height: 70vh;}
    #headerbild {width: 100%; height: 65vh; margin-left: 0;}
    #stoerer {top: 15vh; left: 70px;}
    
    #tradition {flex-direction: column-reverse;}
    #tradition .marmor {position: relative; width: 80%; padding: 100px 10%;}
    #tradition .bild {width: 100%; height: 600px;}
    
    #philosophie .content {flex-direction: column-reverse;}
    #projekte .content {flex-direction: column;}
    #philosophie .col2, #projekte .col2 {width: 100%;}
    #philosophie .col2:nth-of-type(1), #projekte .col2:nth-of-type(2) {width: 100%; height: 400px;}
    #philosophie .col2:nth-of-type(2), #projekte .col2:nth-of-type(2) {margin-left: 0;}
    
    .text h4 {font-size: 16px;}
    .center {flex-direction: column; margin: 0 5% 20px;}
    .box {width: 100%;}
    .box:nth-of-type(2) {margin: 20px 0;}
    .last {width: 100%!important;}
}

@media screen and (max-width: 900px) {    
    
    nav {background: none; box-shadow: 0 0 0;}
    nav ul{display: none;}
    .burger-nav, .menu, .line, .navi {display: block;}
    
    #middle {margin: 0 60px 0 0; border-left: 0;}
    main {text-align: center;}
    main p {text-align: justify; text-align-last: center;}
    
    h2 {font-size: 40px; line-height: 45px;}
    h3 {font-size: 30px;}
    h4 {text-align: center;}
    
    #logo {width: 200px;}
    #stoerer {top: 10vh; left: 50px;}
    header .marmor {width: 80%; height: 60vh; margin-right: 60px;}
    #headerbild {height: 55vh;}
    
    .content {flex-direction: column; width: 100%; margin-left: 0;}
    .col, .col2, .col3 {width: 100%; margin-left: 0;}
    .col:nth-of-type(2), .col2:nth-of-type(2), .col3:nth-of-type(2) {margin: 0;} 
    
    aside img {right: 10px; left: none;}
    
    .bold {text-align: justify;  direction: inherit;}
    
    #ehrungen .flex {flex-direction: column; margin-top: 20px;}
    .ehrung:nth-of-type(2) {margin: 20px 0;}
    
    #philosophie .content, #projekte .content {width: 90%; margin-left: 5%;}
    
    #kontakt {padding: 150px 10%;}
    footer p, footer h2 {text-align: center;}
    
    .popup-style h2 {font-size: 18px; line-height: 25px;}
}

@media screen and (max-width: 500px) {
    header .marmor {width: 80%; margin-right: 60px;}
    h2, #kontakt h2 {font-size: 30px; line-height: 35px;}
    h3 {font-size: 20px; line-height: 25px;}
}