@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: 'Outfit-Variable';
  src: url('fonts/Outfit-Variable.woff2') format('woff2'),
       url('fonts/Outfit-Variable.woff') format('woff'),
       url('fonts/Outfit-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'BespokeSerif-VariableItalic';
  src: url('fonts/BespokeSerif-VariableItalic.woff2') format('woff2'),
       url('fonts/BespokeSerif-VariableItalic.woff') format('woff'),
       url('fonts/BespokeSerif-VariableItalic.ttf') format('truetype');
  font-weight: 300 800;
  font-display: swap;
  font-style: italic;
}

*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
}

body{
font-family: 'Outfit-Variable', sans-serif;
font-size: 20px;
line-height: 34px;
color: #fff;
background-color: #000;
font-weight: 200;
hyphens: auto;
overflow:inherit;
}
body.ff{
padding: 10vh 0 0 0;
}
h1{
font-family: 'BespokeSerif-VariableItalic';
font-style: italic; 
font-size: 6em;
line-height: 1.2em;
font-weight: 400; 
letter-spacing: .02em;
margin: 0 0 .2em 0;
}
h2{
font-family: 'BespokeSerif-VariableItalic';
font-style: italic;
font-size: 2.4em;
line-height: 1.4em;
font-weight: 400;
margin: 1em 0 .6em 0;
}
h3{
font-size: 1.6em;
line-height: 1.2em;
font-weight: 400;
margin: .8em 0 .4em 0;
}
h4{
font-size: 1.2em;
line-height: 1.2em;
font-weight: 400;
margin: .4em 0;
}
p{
font-size: 1em;
line-height: 1.6em;
margin: 0 0 .6em 0;
}
p a,
p a:visited{
color: #00ccff;
}
p a:hover,
p a:focus,
p a:active{
color: #fff;
}
.white-bg{
line-height: 1.8em;
font-size: 1.2em;
color: #000 !important;
background: #fff;
display: inline;
padding: .1em .2em .16em .2em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
float: none;
}
.blocked{
display: block;
}

ul{
margin: 1em 0 1em 1em;
list-style-position: outside;
}
.centered-text{
text-align: center;
}
strong{
font-weight: 600;
}
blockquote{
font-family: 'BespokeSerif-VariableItalic';
font-style: italic;
font-weight: 400;
font-size: 2.4em;
line-height: 1.2em;
margin: 3.2em 0 .2em 0;
width: 100%;
color: #cc9966;
}
blockquote::before{
content: "„";
}
blockquote::after{
content: "“";
}
a.btn-small,
a.btn-small:visited{
text-decoration: none;
padding: .4em 1em;
border-radius: 2em;
border: solid 2px #00ccff;
color: #fff;
font-size: 1.1em;
font-weight: 400;
transition: all ease .4s;
margin: .6em 0;
display: inline-block;
}
a.btn-small:hover,
a.btn-small:focus,
a.btn-small:active{
border: solid 2px #00ccff;
color: #000;
background: #00ccff;
}
img{
width: 100%;
height: auto;
margin: 0 0 1em 0;
}
.img-margin-top{
margin: 4em 0 0 0;
width: 100%!important;
}
.rounded{
border-radius: 100%;
margin: 2em 0;
}
/* Colors */
.black{
color: #000;
}
.grey-bg{
background: #333;
padding: 0 2em 2em 2em;
}
.blue-bg{
background: #00ccff;
padding: 0 2em 2em 2em;
color: #000!important;
}
.blue-bg p a{
color: #000!important;
}
.brown-bg{
background: #cc9966;
padding: 0 2em 2em 2em;
color: #000!important;
}
.brown-bg p a{
color: #000!important;
}
.brown-border{
color: #cc9966;
padding: 0 2em 2em 2em;
border: solid 1px #cc9966;
border-radius: 2em;
}

/* Video */
video{
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
max-width: 1920px;
margin: 1em auto;
}
/* Layout */
.date-teaser{
display: block;
z-index: 999;
position: absolute;
top: 0;
left: calc(50vw - 10em);
width: 20em;
height: auto;
margin: 0;
padding: 0;
}
.date-teaser a{
background: #cc9966;
display: block;
text-decoration: none;
font-weight: 600;
text-align: center;
font-size: 1.4em;
line-height: 1.8em;
padding: .2em .6em;
color:#000;
border-radius: 0 0 1em 1em;
box-shadow: -2px 2px 6px #333;
transition: all ease .4s;
}
.date-teaser a:hover,
.date-teaser a:focus,
.date-teaser a:active{
background: #fff;
}
.date-teaser a::after{
content: 'Lebensfreundschaft ansehen';
display: block;
font-size:.8em;
line-height: 1em;
font-weight: 300;
padding: 0 0 1em 0;
}
#wrapper{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1.4em;
min-height: 100vh;
}
.hero{
width: 100vw;
height: 100vh;
background-image: url("../images/bau-olympiapark.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding:60vh 1em 0 1em;
}
.indent{
display: flex;
max-width: 80vw;
margin: 2em auto;
flex-wrap: wrap; 
gap: 2em;
}
.space-between{
justify-content: space-between;
}
.flex-start{
justify-content: flex-start;
}
.flex-end{
justify-content: flex-end;
}
.w-100{
flex-basis: 100%;
}
.w-75{
flex-basis: 73.6%;
}
.w-50{
flex-basis: 48%;
}
.w-30{
flex-basis: 30%;
}
.w-25{
flex-basis: 24%;
}
.gallery{
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.gallery div{
flex-basis: 24%;
margin: 0;
}
.gallery div img{
margin: 0!important;
}
.footer{
margin: 4em 0 0 0;
flex-basis: 100%;
display: flex;
padding: 16em 2em 2em 2em;
flex-wrap: wrap;
justify-content: space-between;
gap: 1.4em;
background-image: url("../images/silhoutette-muc.svg");
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
color: #000;
}
.footer a,.footer a:visited{
color: #000;
}
.footer a:hover, .footer a:focus, .footer a:active{
color: #33ccff;
}
.footer p{
margin: 2em auto;
}
/* Scroll To Top */
#scrollTop {
position: fixed;
bottom: 1em;
right: 1em;
display: none;
width: 2em;
height: 2em;
text-align: center;
border: none;
background: #33ccff;
color: #000;
font-size: 1em;
border-radius: 100%;
z-index: 9999;
}
#scrollTop.visible { display: block; }

/* Animation */
.fade-in {
opacity: 0;
transition: all ease .8s;
transform: translateY(20vh);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0%);
}
.slide-in-right {
transform: translateX(100%);  /* Anfangszustand: außerhalb des Viewports (rechts) */
opacity: 0;
transition: transform .8s ease-in-out, opacity 1s ease-in-out;  /* Animation für den Slide-Effekt und den Fade-Effekt */
}
.slide-in-right.visible {
transform: translateX(0);  /* Endzustand: im Viewport */
opacity: 1;  /* Sichtbar machen */
}
.slide-in-left {
transform: translateX(-100%);  /* Anfangszustand: außerhalb des Viewports (links) */
opacity: 0;
transition: transform .8s ease-in-out, opacity 1s ease-in-out;  /* Animation für den Slide-Effekt und den Fade-Effekt */
}
.slide-in-left.visible {
transform: translateX(0);  /* Endzustand: im Viewport */
opacity: 1;  /* Sichtbar machen */
}
.pop-up {
transform: scale(0);  /* Startzustand: Unsichtbar und sehr klein */
opacity: 0;  /* Unsichtbar */
transition: transform 0.6s ease-out, opacity 0.8s ease-out;  /* Sanfte Animation für das Aufpoppen */
}
.pop-up.visible {
transform: scale(1);  /* Endzustand: Normalgröße */
opacity: 1;  /* Sichtbar machen */
}

/* Responsiveness */
@media only screen and (max-width: 1440px){
.indent{
max-width: 100vw;
margin: 2em auto;
padding: 0 2em;
}
.gallery div{
flex-basis: 23.6%;
} 
.hero{
padding:48vh 1em 0 1em; 
}
}
@media only screen and (max-width: 1080px){
.gallery img{
flex-basis: 23.4%;
}  
.date-teaser a{
font-size: 1.2em;
line-height: 2em;
}

}
@media only screen and (max-width: 960px){
body{
font-family: 'Outfit-Variable', sans-serif;
font-size: 18px;
line-height: 32px;
} 
.gallery div{
flex-basis: 31.8%;
}
.w-50{
flex-basis:47%;
}
}
@media only screen and (max-width: 820px){
body{
font-family: 'Outfit-Variable', sans-serif;
font-size: 16px;
line-height: 30px;
}
.indent{
max-width: 100vw;
margin: 2em auto;
padding: 0 1em;
}
.hero{
padding:40vh 1em 0 1em; 
}
h1{
font-size: 4.8em;
line-height: 1em;
}
h2{
font-size: 1.8em;
line-height: 1.2em;
}
h3{
font-size: 1.4em;
line-height: 1em;
}
.gallery div{
flex-basis: 31.8%;
}
blockquote{
margin: 1em 0 .2em 0;
font-size: 1.6em;
line-height: 1.2em;
}
.rounded{
max-width: 80%;
margin: 2em;
}
.w-50{
flex-basis: 60%;
}
.w-25{
flex-basis: 30%;
}
}
@media only screen and (max-width: 620px){
body{
font-size: 16px;
line-height: 30px;
} 
.gallery div{
flex-basis: 100%;
}
.w-100{
flex-basis: 100%;
}
.w-75{
flex-basis: 100%;
}
.w-50{
flex-basis: 100%;
}
.w-30{
flex-basis: 100%;
}
.w-25{
flex-basis: 100%;
}
.rounded{
max-width: 60%;
margin: 2em 20%;
}
.footer{
margin: 3em 0 0 0;
padding: 8em 1em 1em 1em;
} 
.footer p{
font-size: .8em;
}
}