@font-face { font-family: 'Montserrat'; src: url('../../system/font/Montserrat/static/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal;}
@font-face { font-family: 'Montserrat'; src: url('../../system/font/Montserrat/static/Montserrat-Light.ttf') format('truetype'); font-weight: 300; font-style: normal;}
@font-face { font-family: 'Montserrat'; src: url('../../system/font/Montserrat/static/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal;}
@font-face { font-family: 'PT Sans'; src: url('../../system/font/PT_Sans/PTSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'PT Sans'; src: url('../../system/font/PT_Sans/PTSans-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal;}


body, html {display: flex; flex-direction: column; min-height: 100vh; font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; box-sizing: border-box; animation: fadeIn 1s ease-in-out forwards;}
/*@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}*/



  
#impressum  #content, #contact #content  {margin:120px auto 120px auto; max-width:680px}


a, p, li {font-size:16px; line-height:1.5em; margin: 0 0 7px 0; color:rgba(0,0,0,0.4)}
a {text-decoration:none}
a:hover {color:#bf8e0c}
a.active {color:red; font-weight:bold}

#about .content {max-width:680px; margin: 60px auto 200px auto; padding: 0 15px 0 15px}
#about .content > div.section {display:grid; grid-template-columns:1fr; gap:30px; margin-bottom:60px }
#about img {max-width:220px}
#about .Info a {text-decoration:underline}


#admin section {margin: 30px 0 15px 0}
#admin section > h3 {margin-bottom: 30px}

#admin p, #admin h3 {color:rgba(0,0,0,0.8); }
#admin p.gray {color:rgba(0,0,0,0.35); }
#admin h5 {color:rgba(0,0,0,0.24); font-size:15px; margin-bottom:10px}

#admin #setup .box-1 > div {display:grid; grid-template-columns:300px auto; margin-top:30px}
#admin #creation .box-1 {display:grid; grid-template-columns:1fr 1fr; margin-top:30px}
#admin #creation .box-1 > div > h5 {color:rgba(0,0,0,0.4); font-size:13px; font-weight:300; margin:0 0 3px 5px}
#admin #creation .box-1 .finder > div {background:rgba(253, 253, 253, 1.00); border-radius:6px; padding:10px; max-width:300px}

#admin #creation  > div {display:grid; grid-template-columns:40px auto; max-width:90%; margin: 30px 0 60px 0}
#admin #creation  > div h3 {margin-bottom: 10px}
#admin #creation  > div > p {font-size:40px; font-weight:bold; color:rgba(0,0,0,0.07); margin:0 10px 0 0; text-align:right}
#admin #creation  > div > div {background: rgba(0,0,0,0.03); padding: 20px}
#admin #creation .comment {margin-top:30px}

#admin .box-1 p {font-size:13px; margin:0}
#admin .box-1 p.lev-2 {padding:1px 10px 0 38px;}
#admin .box-1 p.lev-3 {padding:1px 10px 0 70px;}
#admin .box-1 .folder-open {width:32px;}
#admin .box-1 .folder-closed {width:31px; margin-left:3px}
#admin .box-1 span {transform:translateX(3px); font-size:12px; display:inline-block}
#admin .box-1 .mj {transform:translate(3px, -2px); }
#admin .box-1 .active {background:rgba(41, 99, 217, 1.00); color:white; border-radius:2px; max-width:300px}
#admin .box-1 .opac {opacity:0.45}
#admin .box-1 .clear {opacity:1 !important}
#admin .drag-and-drop {color:rgba(0,0,0,0.74); padding:0 15px 0 7px}
#admin .browser-window {max-width:300px; opacity:0.8; border: 0.5px solid rgba(0,0,0,0.2); border-radius:8px}
#admin .code { border: 0.5px solid rgba(0,0,0,0.5); max-width:500px; margin-top:30px}
#admin .comment * {font-size:14px; color:rgba(0,0,0,0.5);  margin:0 }
#admin .comment p {margin-bottom:5px; }
#admin .comment ul {padding-left:15px;  }

body.index {height: 100%; overflow: hidden; }    

.bold {font-weight:bold}

#contact #content {margin:120px auto 120px auto; max-width:680px}
.address {margin:30px 0 30px 0; }
.address p {font-weight:bold; margin:0; }
.e-mail a {color:#bf8e0c}
.e-mail a:hover {text-decoration:underline}
#contact section {margin-bottom:40px}
#contact section:first-child {margin-top:120px}

#content {flex:1; padding:15px}

#datenschutz  #content, #contact #content  {margin:120px auto 120px auto; max-width:980px}
#datenschutz .datenschutzerklaerung section {display:grid; grid-template-columns:220px auto; gap:100px; margin-bottom:60px}

.galerie { column-count: 1; column-gap: 20px; max-width:1280px; margin:0 auto 230px auto; padding:10px}
.galerie section { break-inside: avoid; padding:7px }
.galerie img {width:100%; height:auto; display:block}
.galerie h4 {color:gray; font-size:14px; font-weight:300; margin: 3px 0 15px 0}
.galerie a {text-decoration:none !important}

.gray {color:rgba(0,0,0,0.3); }

h2, h3 {color:rgba(0,0,0,0.4); margin:0 }
h2 {font-size:20px; margin-bottom:30px  }
h3 {font-size:16px; }

.hero-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

            
.highlighted {font-weight:bold}

/*.fullscreen .exponat > div {position: fixed; top: 0; left: 0; width: 100%; min-height: 100vh; 
    background-size: cover; background-position: center; background-repeat: no-repeat; }
.fullscreen .container {position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
*/
    

iframe {width: 100%; height: 80px; border: none; overflow: hidden; }
iframe#nav-frame { height: 90px; }
iframe#footer-frame { height: 50px }

.index img {display:none} /* Ausblenden, weil alle Bilder als Hintergrundbilder positioniert! */


/* Fullscreen Index
     Bild: Standardbild bilder/foto-001.jpg wird durch JS ersetzt 
     Schrift im Overlay
     Animation 
 */
.index * {margin:0; padding: 0; box-sizing:border-box;}
/*.index .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-image: url('bilder/foto-001.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1s ease-in-out;} */
.index .background {position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
    background-image: url('bilder/foto-001.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;} 
    
    
    
/*.index .overlay {position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
*/

.index a {display:block; position:relative; z-index:9999}
.index h1 { font-family:'Montserrat'; font-size: 2.1rem; font-weight:300; letter-spacing:-1.5px; color: rgba(255,255,255,0.80); position: absolute; top: 18vh; left:0; width: 100%; text-align:center; }
.index h1.sub { font-size: 1.25rem; color: rgba(222, 24, 0, 1.00); position: absolute; top: 26vh; width: 100%; text-align:center; letter-spacing:2.1px; transform:translateX(-10px) }
/*.index h1.main { animation: pulsieren 10s infinite ease-in-out;}*/
.index h1.main:hover {color: rgba(255,255,255,1.0)}

.italic {font-style:italic}




.project {display: flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 50px; margin: 0 auto 120px auto}
.project section {display: none;}
.project section h4 {display: none;}
.project section.active {display: block;}
.project img { width: 98%; height: auto; object-fit: contain; display: block; margin: auto; } 
  /*.project img {height: 600px; width: auto; max-width: 100%; display: block; margin: 0 auto;}*/
.project h4 {display:inline-block; text-align: center; text-transform:uppercase; font-size:15px; margin:1.5px 0 0 -3px; padding: 0 15px 0 15px; font-weight:300; color:rgba(0,0,0,0.5); }
div.navigation {margin-top:7px}

.text {margin:0 auto 10px auto; max-width:720px}
.text h3 {font-size:24px; color:rgba(0,0,0,0.38); margin:90px auto 30px auto; text-transform:lowercase}
.text p {font-size:19px; text-align:justify;  text-transform:lowercase}
.text a {color:#bf8e0c; display:block; font-size:14px; margin:10px auto 10px auto; text-align:center}
.text img {display:block; width:220px; height:auto; text-align:center; margin:90px auto 10px auto}


/*  Tablets von 768px – 1023px  */
@media (min-width: 768px) {
    body {font-size: 18px;}
    
    #about .content > div.section {grid-template-columns:1fr 1fr; gap:30px; }
    
    .project img { height: 79vh; } 
    div.navigation {display:grid; grid-template-columns:20px auto 20px;}
    div.navigation a {font-size: 23px; cursor: pointer; text-decoration: none; color: black; color:rgba(0,0,0,0.3); transform:translateY(-8px)}
    div.navigation a:hover {color:black}

    #content {padding:40px}

    .index h1 { font-size: 3rem; }
    .index h1.sub {font-size: 1.75rem;}

    .galerie { column-count: 2;}
    .container {flex-direction: row; justify-content: space-between;}
    
    object#footer {height:40px}
    }

/*  Laptops & kleine Desktops von 1024px – 1439px  */
@media (min-width: 1024px) {
    body {font-size: 20px;}
    .container {max-width: 1200px; margin: 0 auto;}
    .galerie { column-count: 3;}
    }

/*  Große Desktops ab 1440px */
@media (min-width: 1440px) {
    body {font-size: 22px;}
    .galerie { column-count: 4;}
    }