/* Mobile  */
@media only screen and (max-width: 600px) {
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



/* Variablen */
:root {
  --unit: calc(12px + (15 - 12) * ((100vw - 300px) / (600 - 300)));

  --font-size-small: var(--unit);
  --font-size-normal: calc(var(--unit) * 1.25);
  --font-size-big: calc(var(--unit) * 1.75);

  --button-height: calc(var(--unit) * 2.5);
  --subpage-height: calc(var(--button-height) * 2);


  --padding-small: calc(var(--unit));
  --padding-normal: calc(var(--font-size-small) * 2);
  --padding-medium: calc(var(--unit) * 4 );
  --padding-big: var(--padding-medium);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Klassen */

/* Typografie */
.type-small, .type-small p
{
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.type-normal, .type-normal p, .type-normal li
{
  font-family: var(--font-family);
  font-size: var(--font-size-normal);
  line-height: 1.35;
  letter-spacing: 0;
}
.type-big
{
  font-family: var(--font-family);
  font-size: var(--font-size-big);
  letter-spacing: -0.01em;
  line-height: 1.25;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Navigation */
.main-nav{
  display: none;
}
.mobile-nav{
  user-select: none;
  display: block;
  position: fixed;
  z-index: 1000;
  width: 100%; max-width: 100vw;
  padding: var(--padding-small);
  visibility: visible;
  -ms-overflow-style: none;   
  scrollbar-width: none;  
  overflow: hidden;
  height: auto;
  /* will-change: height; */
  pointer-events: none;
  transition: opacity .15s ease-out, transform .15s cubic-bezier(.05,.66,.21,1);
}
.mobile-nav-opener{
  pointer-events: auto;
  cursor: pointer;
  height: var(--button-height);
  display: flex;
  padding: 0 var(--padding-small) ;
  background-color: var(--color-black);
  color: var(--color-white);
  margin-bottom: var(--padding-small);
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.mobile-nav-opener .symbol-small{
  filter: invert(1);
  mix-blend-mode: normal;
  position: absolute;
  right: 0;
}
.mobile-nav-opener .symbol-small{
  transform: rotateZ(0);
  will-change: transform;
  transition: transform 0.2s cubic-bezier(.05,.66,.21,1);
}
.mobile-nav-list{
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
  transform: translateY( calc(var(--padding-small) * -1));
  transition: opacity .2s, transform .2s cubic-bezier(.05,.66,.21,1);
}
.mobile-nav .mobile-nav-entry{
  margin-bottom: var(--padding-small);
}
.mobile-nav li{
  background-color: var(--color-link-l);
}
.mobile-nav .page-nav-link{
  color: var(--color-link);
  opacity: 1;
  font-size: var(--font-size-normal);
}
.mobile-nav .nav-link{
  justify-content: center;
}
.mobile-nav .nav-link span{
  font-size: var(--font-size-normal);
}
.mobile-nav ul.page-nav-list{
  margin-top: 0;
  width: 100%;
  background-color: transparent;
  flex-direction: column;
  height: auto;
  gap: 0;
}
/* Desktop korrekturen */
.nav-link.js-active .symbol-small {
  filter: var(--img-filter);
  -webkit-filter: var(--img-filter);
  mix-blend-mode: multiply;
}

/* Hintergrund */
.mobile-nav-bg{
  display: none;
}
.js-is-open + .mobile-nav-bg{
  display: block;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 500;
  cursor: pointer;
  /* background-color: rgba(0, 255, 255, 0.485); */
}

/* Animation */
.mobile-nav.js-is-closed{
  /* transition: height .2s cubic-bezier(.05,.66,.21,1); */
  /* height: calc(var(--button-height) + var(--padding-small)); */
}
.mobile-nav.js-is-open{
  /* transition: height .4s ease-in-out;
  height: 100vh; */
}
.js-is-open .mobile-nav-opener .symbol-small{
  transform: rotateZ(45deg);
}
.js-is-open .mobile-nav-list{
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
body.js-overlay-open .mobile-nav {
  opacity: 0;
  transform: translateY(-20px)
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Startseite */
.startmoment{
  height: 75vh;
}

.startmoment-logo{
  grid-column: 1 / -1; 
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Hauptseite */
.main-block{
  grid-template-columns: repeat(4, 1fr);
  gap: var(--padding-small);
}
.main-block-text{
  grid-column: 1 / -1; 
}
.main-block-header{
  grid-column: 1 / -1; 
}

/* Link Hauptseite */

/* Link Unterseite */
.link-subpage-link{
  grid-column: 1 / -1; 
}

/* Downloads */
.downloads-list-title{
}
.downloads-list-container{
  grid-column: 1 / -1; 
}
.downloads-list{
}
.downloads-list-link{
  grid-template-columns: repeat(2, 1fr);
}


/* Verbände */
.verbaende{
}
.verbaende-list-title{
}
.verbaende-list-container{
  grid-column: 1 / -1; 
}
.verbaende-list{
}
.verbaende-list-link{
}


/* Verein des Monats */
.main-block.verein{
}
.verein-link{
}
.article-swiper{
}
.article-swiper .swiper-slide{
  width: calc((100vw - var(--padding-small) * 2 - var(--padding-small)) / 8 * 7);
}
.js-media-touch .article-swiper .swiper-button-next,
.js-media-touch .article-swiper .swiper-button-prev
{
  display: none !important;
}



/* Veranstaltung */
.event-preview-block{
  grid-column: 1 / -1; 
}
.event-preview-state{
  grid-column: 1 / -1; 
}
.event-preview-text{
  grid-template-columns: repeat(4, 1fr);
 } 
.event-preview-text > *{
  /* padding: var(--padding-small); */
}
.event-preview-date{
  grid-column: 1 / -1;
  order: 1;
  padding-bottom: 0;
}
.event-preview-title{
  grid-column: 1 / -1; 
  order: 3;
  padding-bottom: var(--padding-small);
}

.event-preview-place{
  padding-top: 0;
  grid-column: 1 / -1;
  order: 2;
}
.event-preview-image{
  grid-column: 1 / -1; 
  max-height: 50vh;
  order: 4;
}  


/* Liste */
.main-block-list{
  grid-column: 1 / -1; 
}

/* Personenliste */
.person-container{
  grid-column: span 4;
  display: flex;
  flex-direction: column;
}
.person-role{
  position: relative;
  display: block flex;
  align-items: center;
  padding: var(--padding-small);
}
.person-item{
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  background-color: var(--color-button);
}
.person-name{
  padding: var(--padding-small);
  text-align: center;
}
.person-beschrieb{
  padding: var(--padding-small);
  padding-top: 0;
}
.person-liste .list-link{
  padding-left: var(--padding-small);
  padding-right: var(--button-height);
}
.person-liste .list-item {
  border-top: var(--border-weight) solid var(--color-white);
}
.personenliste-hidden{
  grid-column: 1 / -1;
}
.personenliste-hidden-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--padding-small);
  /* padding: 0 var(--padding-small); */
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Overlay / Fragment */
#overlay.fragment-open{
  grid-template-columns: repeat(2, 1fr);
}
#overlay-container{
  grid-column: 1 / -1;
}

/* Artikel */

.article-text,
.overlay-big .article-text,
.article-list,
.overlay-big .article-list
{
  grid-template-columns: repeat(6, 1fr);
}
.article-text p,
.article-text ul,
.article-list .matrix-list,
.overlay-big .article-list .matrix-list,
.overlay-big p.ck-frage,
.overlay-big .article-text p,
.overlay-big .article-text ul,
.page-impressum .impressum-text p
{
  grid-column: 1 / -1;
}
.article-image.article-image-small,
.article-image.article-image-medium,
.article-image.article-image-small-center,
.page-impressum .impressum-text
{
  grid-template-columns: 1fr;
}
.article-image.article-image-medium .article-image-inner,
.article-image.article-image-small-center .article-image-inner
{
  grid-column: 1 / -1;
}

/* grosser Overlay */
.overlay-big .article-title{
  max-width: 100%;
  margin-left: 0; margin-right: 0%;
}
.overlay-big p.ck-antwort{
  grid-column: 2 / -1;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

}