/** Project: Sachverständigenbüro Seitz 3.0
 * 
 */

@font-face { font-family: 'akrobat'; src: url('../schrift/Akrobat-Regular.woff2') format('woff2'), url('../schrift/Akrobat-Regular.woff')  format('woff');; }
@font-face { font-family: 'akrobat-light'; src: url('../schrift/Akrobat-Light.woff2') format('woff2'), url('../schrift/Akrobat-Light.woff')  format('woff');; }
@-o-viewport {width: device-width; zoom:1;}
@viewport {width: device-width; zoom:1;}


/*B+N*/

html {
    scroll-behavior: smooth;
}

body{
    background-color: #ffffff;
    margin: 0;
    padding: 0;
   }

header, nav, footer, article, section {
    display: block;
    box-sizing: border-box;   
    }

header {
    overflow: hidden;
    background-color: rgb(255, 255, 2555, 0.65);
    margin: auto;
    padding: 3em 1em 0 1em;
    width: 100%;
    position: fixed;
    z-index:200;
    }
    
video {
    width: 100%;
}

header img {
    width: 12em;
    float: left;
    z-index:201;
    padding: 0 0 1em 0;
    }

#mgesi {
    width: 8em;
    float: left;
    z-index:201;
    padding: 0 2em 1em 0;
    border-color: #000000;
    border-width: 5px;
}



nav {
    box-sizing: border-box;  
    line-height: 1em;
    overflow: hidden;
    position: relative;
    margin: 0;
    }

nav ul {
    float: right;
    margin: 0;
    padding: 2em 0 0.5em 0;
    }
           
nav ul li {
    float: left;
    font-size: 0.8em;
    line-height: 1em;
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

nav ul li a,
nav ul li strong {
    background: transparent;
    color: #000000;
    display: block;
    font-family: "akrobat","Arial", helvetica,sans-serif;
    letter-spacing: 0.3em;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 1.25em;
    padding: 0  0 0 1em;
    text-decoration: none;
    width: auto;
    }
           
nav ul li a:hover {
    color: #3d91d5;
    text-decoration: none;
    }

input#hamburg {
    display: none;
    }
    
article {
    width: 90%;
    margin: auto;
    padding: 2em 0 2em 0;
    }

summary {
    padding: .25em 1em;
    background-color: #ccc0b1;
    font-family: "akrobat",helvetica,sans-serif;
    font-size: 1.4em;
    border: none;
    border-radius: 0;
    color:white;
    cursor: pointer;
    list-style: none;
    margin: 1em 1em 0 10em;
    text-align:center;
    }

summary::before {
    padding-right: .25em;
    content: '+ ';
     }

details[open] summary::before {
    padding-right: .25rem;
    content: '- ';  
    }   
 
details[open] summary {
    border-radius: 0;
    }

.details-content {
    margin: 0;
    padding: .25em 1em;
    background-color: floralwhite;
    border-radius: 0;
    color: #666666;
    }

.details-content p {
    padding: 0;
    }


summary.dlit {
    padding: 0;
    background-color: #ffffff;
    font-family: "akrobat",helvetica,sans-serif;
    font-size: 1.4em;
    border: none;
    border-radius: 0;
    color:white;
    cursor: pointer;
    list-style: none;
    margin: 0;
    text-align:center;
    
    }

summary.dlit::before {
    padding-right: .25em;
    content: '+ ';
    

     }

details.lit[open] summary.dlit::before {
    padding-right: .25rem;
    content: '- ';  
    
    }   
 
details.lit[open] summary.dlit {
    border-radius: 0;
    }

.details.lit-content {
    margin: 0;
    padding: .25em 1em;
    background-color: rgb(177, 127, 26);
    border-radius: 0;
    color: #666666;
    }

.details.lit-content p {
    padding: 0;
    }

.dritt p {
    padding: 0;
   
}

p.dlit {
    padding: 0;
   
}


.dritt {
    width: 30%;
    border: 1px solid red;
    display: inline-block;
    text-align: center;
    float: left;

    }

br.clear {
    clear: both;
    line-height: 0em;
    height: 0px;
    }

.clearfix:after {
    content: "";
    display: table;
    clear: both;
    }

.globus {
    width: 100%;
    }

section {
	display: flex;
    margin: 0 0 1.5em 12em;
    }

figure {
    width: 30%;
    }

figure img {
	width: 100%;
    }

footer {
    z-index: 2;
    background: #ffffff;
    padding: 0 1em;
    }


/*IDs Allg*/

#wrapper {
    width: 100%;
    margin: 0;  
    }

#w {
    position: relative;
    width: 90%;
    margin: auto;
    }

#slider {
    width: 100%;
    position: relative;
    margin: 0 0 1em 0;
    padding: 0;
    box-sizing: border-box;
    z-index: -2;   
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    }

#slider img {
    display: block;
    width: 100%;
    padding: 0;
    }            


#inhalt {
    width: 100%;
    float:left;
    margin: auto;
    display: block;
    padding: 0 1em 0 1em;
    box-sizing: border-box; 
    z-index: 11;
    background: #ffffff;
    }  

#inhalt_os {
    float:left;
    margin: 4em auto;
    display: block;
    padding: 0 1em 0 1em;
    box-sizing: border-box; 
    z-index: 11;
    background: #ffffff;
    width: 100%;
    }  

    #svb {
    position: relative;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    width: 80%;
    box-sizing: border-box;  
    }

#svb p {
    padding: 0 1em 1em 1em;
    }

#svb img {
    height: 4em;
    width: 4em;
    float: right;
    padding: 1em;
    }

img#as_i {
    height: 18em;
    width: 18em;
    border-radius: 100%;
    display: block;
    object-fit: cover;
    object-position: center 60%;
}

img#as_i2 {
    height: 20em;
    width: 20em;
    border-radius: 100%;
    display: block;
    object-fit: cover;
    object-position: center 30%;
}

img#js_i {
    float: left;
    height: 18em;
    width: 18em;
    border-radius: 100%;
    display: block;
    object-fit: cover;
    object-position: center 40%;
}

#imp {
    width: 4em;
    float: left;
    padding: 1em 1em 1em 0;
}

#impr {
    text-align: left;
    padding: 2em 0;
    }

#impr a {
    padding: 0 2em 0 0;
    }

#impr p {
    padding: 0 0 0 0;
    }

#aktuell {
    border-bottom: 1px solid black;
    padding: 1em 0;
    margin: 2em 0;
}

#aktuell h2 {
    padding: 1em 0;
}

#aktuell img {
    width: 10em;
    float: left;
    margin: 0 2em 1em 0;
}

/*Cs Allg*/

.spalte_50l {
    display: block;
    float: left;
    width: 50%;
    text-align: right;
    }
            
.spalte_50r {
    display: block;
    overflow: hidden;
    float: right;
    width: 50%;
    }
        
.spalte_50r img {
    width: 90%;
    }    

.spalte_50l img {
    width: 90%;
    }    

.pfeil {
    background-color: #efefef;
    padding: 1em;
    margin: 0 0 2em 20em;
    width: auto;
    }

.sprung {
    scroll-margin-top: 4em;
    }

.imgpdf {
    padding: 1em 0 0 0;
    height: 4em;
    }

.vg1 {
    border-top-right-radius: 3em;
    border-bottom-right-radius: 3em;  
    position: fixed;
    width: 100%;
    top: 75%;
    left: 0;
    margin: 0 30% 0 0;
    padding: 1em 1em 1em 5em;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.75);
    transition-property: background-color;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.2s;
    }

.inhalt {
    background-color: #ffffff;
}

.zit {
    background: #f4f4f4;
    padding: 1em 5em;
    margin: 0 0 1em 0;
}


p.zit {
    
    background: transparent;
}

h1.gg {
    margin: -2em 0 0 0;
    padding: 0;
    font-size: 1em;
    letter-spacing: 0;
    border-bottom: none;
}

h1.gg2 {
    margin: 0;
    padding: 0;
    font-size: 1em;
    letter-spacing: 0;
    border-bottom: none;
}

.telr img {
    height: 2em;
    padding: 0.68em 1em 1em 1em;
    float: left; 
} 

.telr {
    height:4em; 
    overflow: hidden;
}

.telr a {
    padding: 0.6em 0;
    font-size: 1.5em;
    display: block;
}

.telr2 img {
    height: 2em;
    padding: 0.68em 1em 0 0.8em;
    float: left; 
} 

.telr2 {
    height:4em; 
    overflow: hidden;
}

.telr2 a {
    padding: 0.15em 0 0 3em;
    font-size: 1.3em;
    display: block;
    color: white;
    }


label.telefon { 
    position: fixed; 
    right:0;
    top: 17em;
    width:3em; 
    height:3.5em; 
    background: #d2353563; 
    z-index: 300;
    border-top-left-radius: 3em;
    border-bottom-left-radius: 3em;
    transition: 0.5s; 
 }


 label.email { 
    position: fixed; 
    right:0;
    top: 21em;
    width:3em; 
    height:3.5em; 
    background: #d2353563; 
    z-index: 300;
    border-top-left-radius: 3em;
    border-bottom-left-radius: 3em;
    transition: 0.5s; 
 }

 label.w3w { 
    position: fixed; 
    right:0;
    top: 25em;
    width:3em; 
    height:3.5em; 
    background: #d2353563; 
    z-index: 300;
    border-top-left-radius: 3em;
    border-bottom-left-radius: 3em;
    transition: 0.5s; 
}




 .t {
    font-size: 1em;
    padding: 0 0;
    color: white; 
    font-family: "akrobat",helvetica,sans-serif;
 }

 .t2 {
    font-size: 1.5em;
    padding: 2em 0;
    color: white; 
    font-family: "akrobat",helvetica,sans-serif;
 }

 input#w3w {display:none}

 #w3w:checked + .w3w {
     width:13.5em;
     }

input#email {display:none}

#email:checked + .email  {
    width:13.5em;

    }


input#telefon {display:none}

#telefon:checked + .telefon {
    width:13.5em;
    }

#button {
  display: inline-block;
  background-color: #b2b2b257;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 25px;
  margin: 30px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}

#button::after {
    content: "^";
    font-family: "akrobat",helvetica,sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
  }

  #button:hover {
    cursor: pointer;
    background-color: #333;
  }
  #button:active {
    background-color: #555;
  }
  #button.show {
    opacity: 1;
    visibility: visible;
  }
  

/*Typ Allg*/

h1,
h2,
h3 {
	color: #666666;
	font-family: "akrobat-light",helvetica,sans-serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
	}

h1 {
    font-size: 1.75em;
    letter-spacing: 0.7em;
    padding: 1em 0 1em 0;
    margin: 0.25em 0 0.25em 0;
    border-bottom: 1px solid #666666;
}

h2 {
    font-size: 1.5em;
    letter-spacing: 0.25em;
    padding: 3em 0 1em 0;
    margin: 0;
    }

h1.b1 {
    font-size: 1.2em;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
    font-weight: bold;
}

h3 {
	font-size: 1.5em;
    font-weight: bold;
    padding: 1em 0 0 14rem;
    }

p {
	font-family: "akrobat-light", "Arial", "Helvetica", sans-serif;
	font-weight: 300;
	font-size: 1.4em;		
	color: #666666;
	line-height: 1.5em;
	margin: 0;
	padding: 0 0 1.5em 0;
    }

header p {
    padding: 0;
    }

p#tel {
	color: #666666;
	font-family: "akrobat",helvetica,sans-serif;
	font-weight: normal;
	font-size: 2.5em;
    letter-spacing: 0.5em;
    padding: 1em 0 1em 0;
    }

p.b2 {
    font-size: 1.0em;
    padding: 0.5em;
}

p.b3 {
    font-size: 0.8em;
    font-weight: bold;
    padding: 0;
}
p.art {
    font-size: 0.85em;
    }

p.sv {
    font-weight: bold;
    margin: 1em 0 0 0;
    }

p.gr {
    padding: 0;
    font-weight: bold;
    }

.vg p {
    padding: 0;
    color: rgb(0, 0, 0);
    font-size: 1.5em;
    font-weight: normal;
    background-color:transparent;
    
  }    

.vg h1 {
    padding: 0;
    letter-spacing: 0;
    border: 0;
    color: #000000;
    font-size: 2.5em;
    font-weight: normal;
    background-color:transparent;
   
  }    

  .vg1 p {
    padding: 0;
    color: rgb(0, 0, 0);
    font-size: 1.2em;
    font-weight: normal;
    background-color:transparent;
    
  }    

.vg1 h1 {
    padding: 0;
    letter-spacing: 0;
    border: 0;
    color: #000000;
    font-size: 2.5em;
    font-weight: normal;
    background-color:transparent;
   
  }    


p.b {
    font-weight: bold;
    }

ul {
	color: #666666;
    margin: 0 0 1em 0;
    padding: 0 0 1.5em 5em;
    list-style-type: circle;
    }

ul li {
    font-family: "akrobat-light", "Arial", "Helvetica", sans-serif;
	font-weight: 300;
	font-size: 1.4em;
    line-height: 1.5em;	
    padding: 0 0 0.5em 0.5em;
    }

ul ul li {
        font-family: "akrobat-light", "Arial", "Helvetica", sans-serif;
        font-weight: 300;
        font-size: 1.4rem;
        line-height: 1.5em;	
        padding: 0 0 0.5em 0.5em;
        }

ol {
    font-family: "akrobat-light", "Arial", "Helvetica", sans-serif;
    font-weight: 300;
    font-size: 1.4em;		
    color: #000000;
    line-height: 1.5em;
    margin: -0.5em 0 1em 0;
    }
    
ol li {
    padding: 0 0 1.75em 0;
    }

li h2 {
    font-family: "akrobat", "Arial", "Helvetica", sans-serif;
	font-weight: 400;
	font-size: 1.4rem;	
    letter-spacing: 0;	
	color: #666666;
	line-height: 1.5em;
	margin: 0;
	padding: 0 0 1.5em 0;
}    

li p {
	font-family: "akrobat-light", "Arial", "Helvetica", sans-serif;
	font-weight: 300;
	font-size: 1.4rem;		
	color: #666666;
	line-height: 1.5em;
	margin: 0;
	padding: 0 0 1.5em 0;
    }

a {
	background: transparent;
	color: #000000;
	text-decoration: none;
    }

a:visited {
	color: #000000;
    }

a:hover
 {
	color: #3d91d5;
	text-decoration: none;
    }

footer p {
    color: #666666;
    padding: 0;
    }   


/* Kacheln ANG*/

#ang {
    padding: 0 0 1.5em 0;
    text-align: center;
    }

#ang1 {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    }

#kach1_1 {
    background-color: #c8c8c8;
    min-width: 200px;
    }

#kach1_1:hover {
	background-color: #262f6a;
    }

#kach1_1:hover p, #kach1_1:hover h2 {
	color: #ffffff;
    }
 
#kach1_2 {
    background-color: #d6d6d6;
    min-width: 200px;
        }

#kach1_2:hover {
	background-color: #277ec3;
    }

#kach1_2:hover p, #kach1_2:hover h2 {
	color: #ffffff;
    }

#kach1_3 {
    background-color: #e6e6e6;
    min-width: 200px;
        }

#kach1_3:hover {
	background-color: #52c5d8;
    }

#kach1_3:hover p, #kach1_3:hover h2 {
	color: #ffffff;
    }

#kach2_1 {
    background-color: #c8c8c8;
    min-width: 200px;
    }

#kach2_1:hover {
	background-color: #ef4255;
    }

#kach2_1:hover #grund {
    background-color: #000000;
    }

#kach2_1:hover p, #kach2_1:hover h2 {
	color: #ffffff;
    }

#kach2_2 {
    background-color: #d6d6d6;
    min-width: 200px;
    }

#kach2_2:hover {
	background-color: #ee7526;
    }

#kach2_2:hover p, #kach2_2:hover h2 {
	color: #ffffff;
    }

#kach2_3 {
    background-color: #e6e6e6;
    min-width: 200px;
    }

#kach2_3:hover p, #kach2_3:hover h2 {
	color: #ffffff;
    }

#kach2_3:hover {
	background-color: #efc519;
    }

#grund {
    position:absolute;
    background-color: red;
    border-radius: 50%;
    width: 60%;
    height: 60%;
    top: -1em;
    right: -1em;
    }

#grund p {
    color: black;
    display: table-cell;
    vertical-align: middle;
    }

#grund:hover {
    background-color: black;
    }

#u {
    padding-bottom: 5em;
}

.spez {
    position: relative;
    display: inline-block;
    width: 18%;
    margin: 0.5em;
    }

.spez:before {
    content: "";
    display:block;
    padding-top: 100%;
    }

.spez p {
    font-family: "akrobat-light", "Arial", "Helvetica", sans-serif;
    font-weight: 800;
    font-size: 1.4em;		
    color: #666666;
    line-height: 1.5em;
    margin: 0;
    padding: 1em;
    position: absolute;
    bottom: 0;
    }
        
.spez h2 {
    font-size: 4em;
    color: #ffffff;
    letter-spacing: 0.5em;
    margin: 0;
    padding: 0.4em;
    position: absolute;
    top: 0;
    }

.spezin {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }


/*Kacheln PUB/SEM*/

#pub {
    padding: 2em 0 0 0;
    text-align: center;
    }

#pub1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, 33%);
    row-gap: 5em;
    margin: 0 auto;
    }

#sem {
    padding: 2em 0 0 0;
    text-align: center;
    }

#sem1 {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    }

.pub {
    position: relative;
    display: inline-block;
    width: 20%;
    margin: 0.5em;
    }

.pub:before {
    content: "";
    display:block;
    padding-top: 100%;
    }

     

.sw {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    max-width: 100%;
    max-height: 100%;
    }

.sw:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);   
    }


/* GRD */

#grd {
    display: flow-root;
    padding: 2em 0 1.5em 1em;
    text-align: center;
    }

#grd1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, 33%);
    row-gap: 5em;
    margin: 0 auto;
    }

#grd img {
    width: 33%;
    max-width: 5em;
    padding: 2em 0 0 0;
}

#grd1 p {
    padding: 2em 0 0 0;
    font-weight: 300;
    font-size: 2.5em;		
    color: #000000;
}


/* @media  */

@media only screen and (max-width: 1400px) {
    .vg1 {
        border-top-right-radius: 3em;
        border-bottom-right-radius: 3em;  
        position: relative;
        margin: 0;
        padding: 1em 1em 5em 0;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.65);
    }
    
    .vg1 p {font-size: 1.4em;}
    
    
    
    
    label.hamburg { 
        display: block;
        background: rgba(255, 255, 255, 0); width: 75px; height: 50px; 
        position: relative; 
        margin-left: auto; 
        margin-right: 0;
        margin-bottom: 1em;
        border-radius: 4px; 
        }
         
    input#hamburg {
        display: none;
        }
    
    .line { 
        position: absolute; 
        left:10px;
        height: 4px; width: 55px; 
        background: #555; border-radius: 2px;
        display: block; 
        transition: 0.5s; 
        transform-origin: center; 
        }
         
    .line:nth-child(1) { top: 12px; }
    .line:nth-child(2) { top: 24px; }
    .line:nth-child(3) { top: 36px; }
         
    #hamburg:checked + .hamburg .line:nth-child(1){
        transform: translateY(12px) rotate(-45deg);
        }
         
    #hamburg:checked + .hamburg .line:nth-child(2){
        opacity:0;
        }
         
    #hamburg:checked + .hamburg .line:nth-child(3){
        transform: translateY(-12px) rotate(45deg);
        }
    
    nav.topmenu { 
        height: auto; 
        max-height:0; 
        overflow: hidden; 
        transition: all 0.5s;
        width: 100%;
         }
    
    #hamburg:checked + .hamburg  + nav.topmenu { 
        max-height: 600px; 
        }

    nav ul li {
        float: left;
        text-align: right;
        padding-bottom: 0.5em;
        }

 
    .pub { width: 30%;}
    #pub1 { grid-template-columns: repeat(auto-fill, 50%); }
    nav ul li {
        float: left;
        text-align: right;
        padding-bottom: 0.5em;
        width: 100%;
        }
}

@media only screen and (max-width: 1200px) {
   p {padding: 0 0 1.5em 0; }
   h1 {letter-spacing: 0.5em;}
   h2 {padding: 3em 0 1em 0; h1; letter-spacing: 0.3em;}
   ul {padding: 0 0 1.5em 1.5em; }
   #ang {padding: 0 0 1.5em 0;}
   #pub {padding: 2em 0 1.5em 0;}
   #sem {padding: 2em 0 1.5em 0;}
   .spez {width: 30%;}
   summary {margin: 1em 1em 0 1.5em;}
   #svb {margin: 0; width: 100%;}
    
   div#svb {display: flex; flex-flow: column;}
   div#as {order: 1;}
   div#asl {order: 2;}
   div#js {order: 3;}
   div#jsl {order: 4;}

   #svb img {float: none; margin: 0 auto;}

   .spalte_50l { float: right; width: 100%; text-align: center; }
   .spalte_50r { width: 100%; text-align: center;}
   .pfeil {margin: 0 1em 2em 1em; width: 90%;}
    #grd1 p {font-size: 2em;}	

    #button {  bottom: 5px;
        right: 5px;
      }

     
}


@media only screen and (max-width: 800px) {
    nav ul li {
        float: left;
        text-align: right;
        padding-bottom: 0.5em;
        width: 100%;
        }
        h1 {letter-spacing: 0.3em;}
        h2 {letter-spacing: 0.2em;}
        .sprung {
            scroll-margin-top: 1em;
            }

        .pub { width: 40%;}

        #kach1_1 {width: 60%;}
        #kach1_2 {width: 60%;}
        #kach1_3 {width: 60%;}
        #kach2_1 {width: 60%;}
        #kach2_2 {width: 60%;}
        #kach2_3 {width: 60%;}
        #pub1 { grid-template-columns: repeat(auto-fill, 100%); }
        #grd1 { grid-template-columns: repeat(auto-fill, 100%); }
}

@media only screen and (max-width: 600px) {
        .pub { width: 80%; margin: 0;}
        
        p#tel {font-size: 2em; letter-spacing: 0.2em;}
        header {padding: 1em 0 0 0;}
        #inhalt {padding: 0; }  
        
        #inhalt_os {padding: 0;}
        #svb p {padding: 0 0 1em 0;}
}