@import url('../googlefonts/rubik/rubik.css');

* { margin:0px;padding:0px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; }

:root {
  --color-akzent:#79c616;
  --color-akzent-rgb:121,198,22;
  --color-akzent-gray:#cdcdcd;
  --color-font:#000000;
  --color-background:#ffffff;
  --font-primary:'Rubik', sans-serif;
  --transition-default:all 1s ease-in-out;
  --transition-faster:all 0.25s ease-in-out;
  --transition-slow:all 1.75s ease-in-out;
  --image-bg:url('../images/hintergrund_dgsteinplatz4.jpg');
}

/* -webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); */

html, body { height:100%;font-family:var(--font-primary);font-size:18px;line-height:24px;color:var(--color-font);background:var(--color-background);scroll-behavior:smooth; }

.overlay { overflow: hidden !important; }

.clearboth { clear:both;height:0px;line-height:0px;font-size:0px; }
.loader { display:none;position:absolute;margin:-25px 0 0 -25px;top:50%;left:50%; }
a images { border:none; }

header { background:#ffffff;border-bottom:5px solid var(--color-akzent);position:fixed;top:0;width:100%;z-index:2; }
header .wrapper { display:flex;padding:30px;justify-content:space-between; }
header .wrapper a { text-decoration:none;color:var(--color-font); }
header .wrapper .logo { font-size:36px;line-height:36px;font-weight:500;letter-spacing:-0.05em;text-transform:uppercase; }
header .wrapper .slogan { display:none;font-size:36px;line-height:36px;letter-spacing:-0.05em; }
header .wrapper .header-links { list-style-type:none;gap:30px; }
header .wrapper .header-links > ul { display:flex;list-style-type:none;gap:30px;align-items:center; }

header .wrapper .header-links > ul > li > a { display:inline-block;text-decoration:none;color:#000000; }

main { position:relative;z-index:1;display:grid;grid-template-rows:auto 78px;height:100vh; }
main:after { content:"";position:absolute;width:100%;height:40vh;bottom:0px;left:0px;background:linear-gradient(0deg, rgba(0,0,0,.4), transparent); }


main .container-teaser { height:calc(100vh - 101px);width:100%;position:fixed;background:var(--color-akzent-gray);box-shadow:0 0 20px 5px rgba(0,0,0,0);margin-top:101px; }
main .container-teaser .wrapper { background-image:var(--image-bg);background-size:cover;background-position:center;height:100%;opacity:1;-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
main .container-teaser .wrapper .overlay { background-color:var(--color-akzent-gray);height:100%;width:100%;display:grid;justify-items:center;align-items:center; }
main .container-teaser .wrapper .overlay.loaded { background-color:inherit;height:100%;mix-blend-mode:multiply; }
main .container-teaser .wrapper .overlay .loading-animation { display:inline-block;width:80px;height:80px; }
main .container-teaser .wrapper .overlay .loading-animation:after { content: "";display:block;width:64px;height:64px;margin:8px;border-radius:50%;border:3px solid #ffffff;border-color:#ffffff transparent #ffffff transparent;animation:loading-animation 2s linear infinite;opacity:1; }
@keyframes loading-animation {
  0% { transform:rotate(0deg);opacity:1; }
  50% { opacity:.1; }
  100% { transform:rotate(360deg);opacity:1; }
}
main .container-teaser .wrapper .overlay.loaded .loading-animation { display:none; }

main .content { display:block;position:relative;top:100vh;background:#ffffff; }
main .content h1 { font-size:48px;line-height:1.4em;font-weight:500;letter-spacing:-0.05em;text-align:center;margin:0 0 30px 0; }
main .content h2 { font-size:36px;line-height:1.4em;font-weight:300;letter-spacing:-0.05em;text-align:center;margin:0 0 25px 0; }
main .content h3 { font-size:28px;line-height:1.4em;font-weight:500;letter-spacing:-0.05em;text-align:center;margin:0 0 15px 0; }
main .content h4 { font-size:21px;line-height:1.4em;font-weight:300;letter-spacing:-0.05em;text-align:center;margin:0 0 5px 0; }
main .content p { font-weight:300;letter-spacing:-0.05em;margin:0 0 25px 0; }
main .content p.center { font-size:1.1em;line-height:1.4em;text-align:center; }
main .content a { text-decoration:none;color:var(--color-akzent); }
main .content .section { background:rgba(255,255,255,.7);width:70vw;padding:50px 0 0;height:100%;margin:0 auto; }
main .content .section .inner-content { height:100%;overflow:auto; }
main .content .section.frontpage { text-align:center;width:auto;height:auto;padding:0px;background:transparent;color:#ffffff;text-shadow:0 0 25px rgba(0,0,0,.3);text-transform:uppercase; }

body.no-teaser main { height:inherit;grid-template-rows:inherit;z-index:inherit;display:block; }
body.no-teaser main:after { display:none;position:absolute;width:100%;height:40vh;bottom:0px;left:0px;background:inherit; }
body.no-teaser main .content { top:101px; }
body.no-teaser main .content .section .inner-content { overflow:inherit; }

main .footer { display:flex;justify-content:space-between;align-items:flex-end;font-size:18px;line-height:18px;font-weight:300;padding:30px;z-index:99;position:absolute;bottom:0; }
main .footer > div > ul { display:flex;list-style-type:none;gap:30px; }
main .footer > div > ul > li > a { display:inline-block;text-decoration:none;color:#ffffff; }

body.no-teaser main .footer { position:inherit;top:70px;margin:0 auto;padding:30px 0;width:fit-content; }
body.no-teaser main .footer .footer-info { width:fit-content; }
body.no-teaser main .footer > div > ul > li > a { color:#000000; }

/* Normal Screen */
@media only screen and (max-width: 1440px) {
  
}

@media only screen and (max-width: 1240px) {

}

/* Smaller Screen & Tablet Horizontal */
@media only screen and (max-width: 1166px) {
  
} 

@media only screen and (max-width: 1024px) {
  main .content .section { width:80vw; }
  
}

/* Tablet */
@media only screen and (max-width: 821px) {
  main .content .section .inner-content { word-wrap:break-word; }
}

@media only screen and (max-width: 768px) {
  body header > .wrapper { display:grid;gap:15px; }
  body.no-teaser main .content { top:140px; }


  main .footer > div > ul { display:block; }
  main .footer > div > ul > li { margin-bottom:10px; }
  main .footer > div > ul > li:last-of-type { margin-bottom:0; }

  body.no-teaser main .footer { top:110px; }
  body.no-teaser main .footer > div > ul { display:flex; }
}

@media only screen and (max-width: 575px) {
  main .content h1 { font-size:40px;line-height:1.2em; }
  main .content .inner-content h1 { font-size:40px;line-height:1.2em; }
  main .content .inner-content h2 { font-size:28px;line-height:1.1em; }
  main .content .inner-content h3 { font-size:24px;line-height:1em; }
  main .content .inner-content h4 { font-size:21px;line-height:1em; }
}        

/* SmartPhone */
@media only screen and (max-width: 480px) {
  header .wrapper .logo { font-size:30px;line-height:30px; }
  main .content .section { width:90vw; }
}

/* Mobile */
@media only screen and (max-width: 425px) {
  header > .wrapper { display:grid;gap:15px;width:fit-content;margin:0 auto; }
  header .wrapper .logo { line-height:25px;font-size:25px; }
  header .wrapper .header-links > ul { gap:15px; }

  main .content .inner-content h1 { font-size:30px;line-height:1.2em;margin:0 0 30px 0; }
  main .content .inner-content h2 { font-size:26px;line-height:1.1em;margin:0 0 25px 0; }
  main .content .inner-content h3 { font-size:23px;line-height:1em;margin:0 0 15px 0; }
  main .content .inner-content h4 { font-size:20px;line-height:1em;margin:0 0 5px 0; }  

  main .footer { display:block;justify-content:inherit;align-items:inherit;padding:15px 30px; }
  main .footer > div { margin-bottom:10px; }
  main .footer > div:last-of-type { margin-bottom:0; }
  main .footer > div > ul { gap:inherit; }
  main .footer > div > ul > li { display:inline-block;width:100%; }
 
  body.no-teaser main .footer { padding:30px 0px; }
  body.no-teaser main .footer > div > ul { display:block; }
  body.no-teaser main .footer > div > ul > li { display:block;width:fit-content;margin:10px auto; }
  
 }

@media only screen and (max-width: 375px) {
  header > .wrapper { padding:30px 30px 15px; }
  header .wrapper .header-links > ul { display:block; }
  header .wrapper .header-links > ul > li { display:block;width:fit-content;margin:10px auto 0; }

  body.no-teaser main .content { top:155px; }
  body.no-teaser main .footer { top:125px; }
}

}