*{
  margin:0;
  padding:0;

  box-sizing: border-box;
}

.srt{
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

html{font-size: 20px;}
img {border: none;}
.center{text-align:center;}

/* TYPOGRAPHY */
@font-face {
  font-family: "AkkuratThin";
  src: url("fonts/AkkuratLLWeb-Thin.woff") format("woff");
}

@font-face {
  font-family: "AkkuratThin";
  src: url("fonts/AkkuratLLWeb-Thin.woff2") format("woff2");
}

@font-face {
  font-family: "AkkuratRegular";
  src: url("fonts/AkkuratLLWeb-Regular.woff") format("woff");
}

@font-face {
  font-family: "AkkuratRegular";
  src: url("fonts/AkkuratLLWeb-Regular.woff2") format("woff2");
}


body{
  font-family: 'AkkuratThin', sans-serif;
  font-weight:normal;
  color:#000000;
  font-size: 0.9rem;
  line-height: 1.45;
}

h1{
  font-weight: normal;
  font-size: 1.5rem;
  line-height:1.45;
  padding-bottom:1.45em;
}

h2{
  font-family: 'AkkuratThin', sans-serif;
  font-weight: normal;
  font-size: 1rem;
  line-height:1.45;
  padding: 0 0.5em 1.45em 0.5em;
}

h3{
  font-family: 'AkkuratThin', sans-serif;
  font-weight: normal;
  font-size:1.2rem;
  line-height:1.45;
}

h4{
  font-family: 'AkkuratRegular', sans-serif;
  font-weight: normal;
  font-size:0.9rem;
  line-height:1.45;
}


h5{
  font-family: 'AkkuratRegular', sans-serif;
  font-weight: normal;
  font-size:1.8rem;
  line-height:1.45;
}

p{padding-bottom:1.45em;}
p.small{font-size:0.9rem;}
strong{font-family: 'AkkuratRegular', sans-serif;font-weight: normal;}

a{color:#000000;text-decoration: underline; text-decoration-thickness: from-font;}
a:hover, a:active{color:#91877c;text-decoration: underline; text-decoration-thickness: from-font;}

.button, .anmeldung button{
  font-size:1rem;
  display: inline-block;
  background-color:#ffffff;
  color:#000000;
  text-decoration: none !important;
  padding:0.5em 1.5em;
  border: 1px  solid #000000;
  border-radius: 1.5em;
}
.button:hover, .anmeldung button:hover{background: #E4DFDA;color:#000000;}



/* Layout */
header .wrapper,
main,
footer .wrapper{
  max-width: 1600px;
  margin: 0 auto;
}
main{max-width: 1920px;padding-top:48px;}
/*main{padding-top:48px;}*/
main img{max-width:100%;}

section{
  max-width:1360px;
  margin: 0 auto;

  padding:0 1em 4em;
}
.wide{max-width:1600px;}
.hero.wide{padding:0 0 4em;}
.hero.wide img{width:100%;}

.bleed{padding:0 0 0 0 !important;}
.dark{padding:3em 1.5em 3em 1.5em;margin-bottom:1.5em;background:#B4ABA1;text-align: center;}
.light{padding:3em 1.5em 3em 1.5em;margin-bottom:1.5em;background:#F3EFEB;text-align: center;}

section > h2:last-child{padding-bottom:0;}
section > p:last-child{padding-bottom:0;}

details{list-style: none;}
summary, summary::-webkit-details-marker {
  cursor:pointer;
  list-style: none;
  list-style-type: none;
  list-style-image: none;
}
summary::marker, summary::-webkit-details-marker{display:none;}
summary h2::after{
  content: url(images/arrow_down.svg);
  position: absolute;
  right: 0;
  top: 0;
}


.cinema {
  width: 100%;
  max-width: 100%;

  display:grid;
  justify-items: center;

  overflow:hidden;
  text-align:center;

  padding:0 0 0 0;
  margin:0;
  text-align: center;
  transition: transform 500ms ease;

}
.cinema > * {grid-area: 1/1;}
.cinema video{max-width:140%;}
.cinema .button{
  z-index:10;
  align-self: center;

  padding-left: 3.5em;
  padding-right:3.5em;

  margin-top: 20%;

  opacity:0.8;

  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.cinema button#mute{
  cursor:pointer;

  height: 40px;
  width: 40px;
  justify-self: end;
  align-self: end;

  z-index:10;
  margin:2em;

  background-color: transparent;
  border: none;

  opacity:0.8;
}
.cinema button#mute svg path{fill:black;}
.cinema button#mute svg .background{fill:white;}
.cinema button#mute:hover svg .background{fill: #E4DFDA;}
.hide{display:none;}

.display{
  display:flex;
  flex-direction: column;
  gap:1em;
/*  font-size: 1rem;*/
  font-size:0.9rem;
  padding: 0;
}

.hero .display{padding: 3em 0 0 0;}
.hero .display div{padding:0;padding-left:1em;}


.display div{padding-bottom:1.45em;padding-left:1em;}
.display h1{width:100%;padding:0;margin: 0 0 1.45em 0;}
.display h2{padding: 0 0 1.45em 0;}
.display h3{/*font-size:2.25rem;*/ padding: 0 0 0.5em 0;}
.display .button{font-size: 0.8rem;margin-bottom:01.45em;}
.display p + .button{margin-top:01.45em;}
.display p{line-height:1.6em;padding-top:2em;}

hr{
  width:calc(100% - 8em);
  margin: 0 auto 5em;
  border-top: 1px  solid #000;
  border-bottom: none;
}


.intro{
  padding-top: 1.45em;
  text-align: center;

}
.intro:first-child{
  margin-top: 2.5em;
}

#angebot-intro{
  padding:0 ;
  text-align: center;
}

#angebot-intro .display{
  padding: 5em 0 0 0;
}

#angebot-intro .display div{padding-right:1.1em;padding-left:1.1em;}

#angebot-intro img{
  max-width: none !important;
}

.partners{display:grid;align-items:start;gap:2em;padding-top:1em;}
.partners img{max-width:300px;}

.button_list{
  text-align: center;
}

.button_list a{
  margin:0.75em;
}

.button_list .button{font-size:0.8rem;}




.poster{
  width:100vw;
  max-width:100vw;

  margin:0 -100%; /* old browsers fallback */
  margin:0 calc(50% - 50vw);

  padding: 1.5em;

  text-align:center;

  background-color: #EEEEED;
}
.poster h1{max-width:1392px;margin:0 auto;}
.poster img{width:100%;max-width:1640px;display: inline-block;}

figure{
  max-width:80%;
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  gap:1em;
  padding: 3em 0;
  margin:0 auto;
}
figcaption{font-size:0.8rem;max-width:40ch;}

.news{
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  gap:1.45em 3em;
  font-size: 1rem;
  padding: 3em 0;
  border-bottom: 1px solid #000;
}
.news:last-child{
  border-bottom: 0px solid #000;
}
.news div{padding-bottom:1.45em;padding-left: 0.8em;}
.news h2{padding: 0 0 1.45em 0;}
.news .button{font-size: 0.8rem;padding:0.5em 1em;}
.news figure{
  display:block;
  max-width:none;
  overflow: hidden;
  justify-content: center;

  padding:0;
  margin:0;
}
.news figure img{
  width: 100%;
  max-width: none !important;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}


/*

.hero{
  width: 100%;
  max-width: 100%;
  padding: 0 0 4em 0;
  margin: 0;
  text-align: center;
  transition: transform 500ms ease;
}
.hero img {max-width:100%;width:100%;}
*/

/* TODO */
.anmeldung ul{margin:0 0 1.45em 2rem;list-style: none;}
.anmeldung li{padding-bottom:1.45em;text-indent: -13px;}
.anmeldung li:before {content: "\2014";}
.anmeldung label{text-indent: -12px;}
.anmeldung input[type="checkbox"]{
  width: 24px;
  height: 24px;
}

.anmeldung.poster form{
  max-width:42ch;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap: 1em;
}

.anmeldung input[type="text"],
.anmeldung input[type="date"],
.anmeldung input[type="email"],
.anmeldung input[type="tel"],
.anmeldung input[type="submit"],
.anmeldung textarea{
 padding:0.5em 1.5em;
 font-size: 1.3rem;
 border: 1px  solid #000000;
 border-radius: 1.5em;

  background-color:white;
  color:black;
}

.anmeldung input[type="submit"]{
  max-width:7rem;
  margin: 0 auto;
  font-size:1rem;
  text-align:center;
}

.anmeldung input[type="submit"]:hover{background: #E4DFDA;color:#000000;}

/*.anmeldung button{
  border: none;
  cursor: pointer;

  font-size: 1rem;
  line-height: 1;
  font-family: 'Lato', sans-serif;

  padding-left: 50px;
  background: url('images/arrow.svg') no-repeat;
  background-position:3px 5px;
}*/

/* todo end */


#team, #teaser{
  display: grid;
  grid-template-columns: 1fr;
  gap:4em 2em;
  font-size: 1rem;
}
#teaser{font-size:0.9rem;}
#teaser{margin-top:3.5em;}


#team img{
  border-radius: 50%;
  padding:1em;

  aspect-ratio: 1 / 1;
  object-fit: cover;

  transform-origin: center center;
  transition: transform 0.5s cubic-bezier(0.88, -0.42, 0.16, 1.23);

}
#team article:hover img{
    /* transform: rotateY(360deg); */
    transform: scale(1.05);
}
#team h4{
  font-size:1rem;
  border-top: 1px solid #000;
  padding-top:1.45em;
}

#teas img{
   border-radius: 50%;
    padding:3em;
}

dt{
  float: left;
  clear: left;
  width: 5rem;
}

dd{
  margin: 0 0 0 5rem;
}

.display.team img{border-radius: 50%;}
.poster.team{text-align:left !important;}
.poster.team h4, .poster.team p{
  margin: 0 auto;
  max-width:calc(1360px - 7.4em);
}


#teaser{
  margin-bottom:9em;
}

#teaser h1{
  text-align: center;
}

#teaser article{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  margin:0;
  padding:3em 1.5em 4em;
/*  background-color: #F3EFEB;*/
  background-color: rgba(243, 239, 235, 0.6);

  transition: all 0.5s cubic-bezier(0.88, -0.42, 0.16, 1.23);

  transform-origin: center center;
}
#teaser article svg{
  transition: all 0.5s cubic-bezier(0.88, -0.42, 0.16, 1.23);

  transform-origin: left bottom;
}
#teaser article:hover{
  background-color: rgba(243, 239, 235, 1);
  z-index: 999;
  transform: scale(1.05);
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
}

#teaser article:hover svg{transform: scale(1.2);}

#teaser article svg{
  width:147px;
  height:147px;

  margin-bottom:1.45em;

  transform-origin: left bottom;
}

#teaser h3{
  border-top: 1px solid #000;
  padding-top:1em;
  padding-bottom: 0.7em;
}


#teaser article .button{
  font-size:0.8rem;
}

.downloads h2,
.ablauf h2{
  position:relative;
  padding: 0 0.5em 0.2em 0;
  border-bottom: 1px solid #000;
  margin-bottom:1.45em;
  font-size: 0.9rem;
}

.ablauf h2{
  font-size: 1.3rem;
}

.downloads h2.files::after{
  content: url(images/download_pdf.svg);
  position: absolute;
  right: -50px;
  top: -35px;
  transform: scale(0.3);
}


.downloads p,
.ablauf p{max-width: 76ch;}

.downloads ul{
  padding:0 0 3em 0;
  list-style:none;
}
.ablauf ul{
  margin-left: 1em;
  padding:0 0 3em 0;
}
.ablauf ul li ul{padding:0;}

.downloads ul li,
.ablauf ul li{max-width:76ch;padding:0 0 1em 0;}
.ablauf ul li ul li{padding:0;}
.downloads .button{font-size:0.8rem;}




#gallery{
  max-width:1920px;
  padding:0;

  display:grid;
  grid-template-columns: 1em 1fr 1fr 1em;
  gap: 2em 1em;

  justify-items: center;
  align-items: center;
}
section + #gallery{padding:2rem 0;}

#gallery img{
  width:100%;
  grid-column-start: 2;
  grid-column-end: span 2;
  justify-self: center;
}

#gallery .wide{
  grid-column-start: 1;
  grid-column-end: span 4 !important;
}

#gallery .wide.medium{
  grid-column-start: 2;
  grid-column-end: span 2 !important;
}



.clr{
 height:1px;
 clear:both;
}
#rundgang360{max-width:1920px;}
#rundgang360 iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
}



footer{
  background-color: rgba(243, 239, 235, 0.6);
  font-size:0.8rem;
}
/*main:has(.poster:last-child) + footer{
  background-color:#ffffff;
}*/

footer .wrapper{padding:2em 1em;}
footer h4{font-size:0.8rem;}
footer a[href^="mailto:"]{text-decoration: none;}
footer a{text-decoration: underline;text-decoration-thickness: from-font;}
footer img{mix-blend-mode: multiply;max-width:100%;}



/* NAVIGATION */
header{
  position:fixed;
  top:0;
  left:0;
  height:48px;
  width: 100vw;
  z-index:1001;
  font-size:1rem;

  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

nav ul {list-style-type: none;}
nav a{text-decoration: none !important;transition: color 0.2s ease-in-out;}
nav a:hover, nav a:active, nav a.active{color:#91877c;font-family: 'AkkuratRegular';background:none;}

#logo{position: absolute;z-index:4;top: 0.6rem;left: 0.8rem;}


/* hack because you cant change the viewBox */
#logo .only-sign{display:block;}
#logo .sign-text{display:none;}

#logo svg{height:80px;}
#logo .name{opacity:0;}
#logo .logo-bg{fill:#fff;transition: fill 0.2s ease-in-out;}
#logo:hover .logo-bg{fill:#E4DFDA;}

#logo svg{transform:scale(1.1) !important;}

#burger {
  position:absolute;
  cursor: pointer;
  display: inline-block;
  top:11px;
  right:30px;
  z-index:20;

  border:none;
  background-color: transparent;

  width: 30px;
  height:30px;
}

#burger .b1,#burger .b2,#burger .b3 {
  fill: #000000;
  transition: all .2s ease-in-out;
}

#burger:hover .b1, #burger:hover .b2, #burger:hover .b3{fill:#ccc;}

.bactive .b2 {transform: rotate(45deg) translateX( 3px ) translateY( -3px );}
.bactive .b3 {transform: rotate(-45deg) translateX( -8px ) translateY( -3px );}
.bactive .b1 {transform: scale(0);}

.visible{display:flex !important;}
nav .active a{text-decoration: underline; text-decoration-thickness: from-font;color:#91877c;}


nav {
  z-index:3;
  position: fixed;
  top:0;
  left:0;

  display:none;
  height:100%;
  width:100%;

  flex-direction:column;
  justify-content: center;

  background:#fff;
}

nav ul li{
  display:block;
  width:100%;
  height:9vh;
  text-align:center;
}
nav ul li a{
  display:block;
  font-size: 1.5rem;
  line-height: 1.45;
}

@media screen and (min-width: 800px){
  /* typography */
  body{font-size: 1.3rem;}
  h1{font-size:3rem;}
  h2, .downloads h2{font-size: 1.8rem;}
  h3{font-size:1.8rem;}
  h4{font-size:1.35rem;}
  p.small{font-size:1rem;}
  .display {font-size: 1rem;}
  .poster h1{padding-bottom:3em;}

  .button{font-size:1.35rem;}
  #teaser article .button{font-size:1rem;}
  .button_list .button{font-size:1rem;}
  .news .button{font-size: 1rem;}
  .downloads .button{font-size:1rem;}

  footer, footer h4{font-size:1rem;}

  /* end typography */

  #logo{top:10px;left:10px;}

  .landscape .display{
    flex-direction: column;
    align-items: end;
  }
  .landscape .display img{max-width:80%;}
  .landscape .display div{padding-right:20%;}

  section{padding:0 1.2em 4em;}
  .hero .display{padding: 5em 0 0 0;}
  .hero .display div{padding:0;}
  .news{padding: 5em 0;}
  .news div{padding-left: 0;}

  .cinema {padding:0 0 4em 0;}
  .cinema video{max-width:100%;}

  #team, #teaser{grid-template-columns: 1fr 1fr;}

  #teaser article:hover{transform: scale(1.1);}
  #teaser h1{grid-column: 1 / span 3;}

  .display{flex-direction: row; gap:3em; align-items: center;}
  .display div{padding-left:0;}
  .display img{max-width:50%;}
  .display p{padding-bottom:0;}

  #angebot-intro{text-align: left;margin-bottom:7rem;}
  #angebot-intro img{
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-width: 50% !important;
  }
  #angebot-intro .display div{padding-right:3em;padding-left:0;}

  .partners{grid-template-columns: 1fr 1fr;max-width:50ch !important;}

  figure{
     grid-template-columns: 1fr 1fr;
     gap:3em;
    padding: 5em 0;
  }
  figcaption{font-size:1rem;}

  dt{width: 9rem;}
  dd{margin: 0 0 0 9rem;}

  .landscape .display div{padding-right:50%;}
  .display .button{font-size: 1rem;}

  .downloads h2.files::after{
    right: -14px;
    top: -33px;
    transform: scale(0.8);
  }

  #gallery{
    grid-template-columns: 3em 1fr 1fr 3em;
    gap: 4em 1em;
  }
  section + #gallery{padding:4rem 0 8rem;}

  #gallery img{width:80%;}

  #gallery .medium,
  #gallery .small
  { grid-column-end: span 1;justify-self: center;}
  #gallery .wide{width:100%;}
  #gallery .small{width:60%;}
  #gallery .wide.small{width:33%;}
  #gallery .wide.medium{
    width:50%;
    grid-column-start: 1;
    grid-column-end: span 4 !important;
  }

  #gallery .right{justify-self: end;}
  #gallery .left{justify-self: start;}

  #gallery .medium.left, #gallery .small.left{grid-column-start: 2;}
  #gallery .medium.right, #gallery .small.right{grid-column-start: 3;}

  footer .wrapper{padding:4em 2em;}

}

/* ANIMATIONS */
/* FADE IN CONTENT */
/*
@keyframes fade {
  from {opacity: 0;transform: translateY(150px);}
  to {opacity: 1;transform: translateY(0);}
}*/
/* one day... (somehow i can't get the polyfill to work)
   https://github.com/flackr/scroll-timeline?tab=readme-ov-file
.fade-in {
    animation: fade cubic-bezier(0.82, 0.26, 0.5, 0.92);
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}
*/
/*
.fade-in {
  opacity: 1;transform: translateY(0);
  transition: opacity .9s cubic-bezier(0.82, 0.26, 0.5, 0.92)
            , transform .9s cubic-bezier(0.82, 0.26, 0.5, 0.92);
}
.hidden {opacity: 0;transform: translateY(150px)}
*/

/* Lager Screen */
@media screen and (min-width: 1290px){
  /* LAYOUT */
  main{padding-top:7.5rem;}
  header{height:7.5rem;}
  header .wrapper{display: flex;}
  #logo svg{height:75px;}
  section {
    padding: 0 3.7em 5em;
  }
  footer .wrapper{
    display: flex;
    justify-content: space-between;
    align-items: end;

    padding:6em;
  }
  #logo{position: relative;padding:2rem 0 0 2.2rem;flex-grow: 1;}
  #logo svg{height:7rem;}

  .poster{
    margin-top:5em;
    padding: 5em 4.5em;
  }
  .poster + section{margin-top:5em;}

  #team, #teaser{grid-template-columns: 1fr 1fr 1fr;}

  .news{grid-template-columns: 2fr 1fr;}
  .news img{max-width: 811px;}

  /* TOPBAR NAVIGATION */
  #burger{display:none;}
  nav{
    position:relative;
    display: flex;
    align-items: center;
    width:auto;
    float:right;
    padding: 0 3rem 0 7rem;
    background:none;
    }
  nav ul{
    display:flex;
    align-items: center;

  }
  nav ul li {
    width:7rem;
    border-bottom:none;
    text-align: center;
  }

  nav ul li a{height: 7.5rem;font-size:1em;line-height: 8.7rem;}


  /* ANIMATION */
/*
  .hidden {opacity: 0;transform: translateY(150px)}
*/
  @keyframes fade {
    from {opacity: 0;transform: translateY(300px);}
    to {opacity: 1;transform: translateY(0);}
  }
}

@media screen and (min-width: 1400px){
  #logo svg{width:19.34rem;}

  #logo .only-sign{display:none;}
  #logo .sign-text{display:block;}

  #team{padding: 0 4.7em 1.5em 4.7em;}
  #teaser{padding: 1.5em 4.7em;}
}


/* zeke the freak, was here (2025) */