/* Font */
@font-face {
  font-family: "Plagiat";
  src: url("fonts/Plagiant20-Book.woff2") format("woff2"),
       url("fonts/Plagiant20-Book.woff") format("woff");
  font-weight: 400; 
  font-style: normal;
}


/* Variablen */
:root {
  --unit: calc(16px + (21 - 16) * ((100vw - 1000px) / (2000 - 1000)));

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

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


  --border-radius: 2px;
  --border-weight: 1px;

  --font-family: "Plagiat", Arial, Helvetica;

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

  --column-width: calc((100vw - 13 * var(--padding-small)) / 12);

  --opacity-low: 0.2;
  --opacity-high: 0.9;

  --color-black: rgb(10, 10, 10);
  --color-button: hsl(0, 0%, 94%);
  --color-white: #ffffff;
  --color-secondary: #3ca0ff;

  --color-link: rgb(10, 10, 10);
  --color-link-l: hsl(0, 0%, 95%);
  --color-link-h: hsl(0, 0%, 85%);

  --color-main: #3ca0ff;
  --color-main-l: #c8e5ff;


  --value-lighter: 95%;
  --image-brightness: 1;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Einstellungen / Resets */
html, body{
  background-color: var(--color-white);
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch; /* native Momentum-Scroll aktiv lassen */
  overscroll-behavior-y: none;
}
body.js-media-scroll{
  -webkit-overflow-scrolling: touch;
}
/* Allgemein / Reset */
div, p, h1, h2, h3, h4, a, dl, dt, dd, ul, li, nav, button{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  text-decoration: none;
  color: unset;
  /* color: var(--color-black); */
  /* font-size: var(--font-size-normal); */
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family) ;
  list-style: none;
  word-spacing: -.07em;
}
button,
[type="button"],
[type="submit"],
[type="reset"] {
  all: unset;
  appearance: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  text-align: inherit;
  font: inherit;
  color: inherit;
}
a, u{
  display: inline-block;
  text-decoration: none;
}
button:focus, div:focus { outline:0 !important; }

/* Scrollbar */
body{
  overflow: hidden; 
  overflow-y: scroll; 
  scrollbar-width: none; 
  -ms-overflow-style: none;
}
body::-webkit-scrollbar {
  display: none; 
}
body.js-overlay-exist{
  overflow-y: hidden;
}

/* Bilder */
img, video{
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: left;
  position: relative;
  display: block;
}
picture {
    position: relative;
    display: block;
    width: 100%;
    max-height: 100%;
}

::selection{
  color: var(--color-main);
  background-color: transparent;
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Allgemein */

/* .page-content {
    min-height: 100vh;
} */

/* bilder */
.sw-picture{
  mix-blend-mode: multiply;
}
.js-link-colors .colorized-picture{
  filter: var(--img-filter);
    mix-blend-mode: multiply;

}
.inverted-picture{
  /* filter: invert(1); */
}
.lazyload, .lazyloading {
  opacity: 0;
}
.lazyloaded {
  opacity: 1;
}
.sw-image{
  filter: grayscale(1) brightness(var(--image-brightness)) contrast(100);
}
.inverted-picture .sw-image{
  filter: grayscale(1) brightness(var(--image-brightness)) contrast(100) invert(1);
}


/* bildeffekt */
.defs-only {
  position: absolute;
  height: 0; width: 0;
  overflow: none;
  left: -100%;
}
/* .colorized-image.lazyload, .colorized-image.lazyloading{
  opacity: 0;
}
.colorized-image.lazyloaded{
  transition: opacity .3s cubic-bezier(.0,0.9,.04,1) ;
  opacity: 1;
} */
.sw-image.colorized-image{
  mix-blend-mode: normal;
}


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

.will-transform{
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}

.image-inverted{
  filter: invert(1);
}

/* icons */
.symbol-small{
  aspect-ratio: 1 / 1;
  width: var(--button-height);
}
.symbol-small img{
  aspect-ratio: 1 / 1;
  width: var(--button-height);
  object-fit: cover;
  border-radius: var(--border-radius);
}
.symbol-bottom-right{
  aspect-ratio: 1 / 1;
  width: var(--button-height);
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: var(--border-radius);
}

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


/* Expander */
.expander-button-container{
  display: flex;
  justify-content: center;
  align-items: center;
}
.expander-button-container button{
  height: var(--button-height);
  border-radius: var(--border-radius);
  background-color: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: center;
  margin-top: calc(var(--padding-small) );
  transition: margin-top 0.3s cubic-bezier(.05,.66,.21,1);
}

.expander-symbol{
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.expander-symbol .symbol-small{
  filter: invert(1);
  mix-blend-mode: normal;
}
/* animation kreuz: ToDo: geht auf Safari bisher nicht darum hart */
.expander-symbol .sw-image{
  /* transition: transform 0.3s cubic-bezier(.05,.66,.21,1); */
}
.js-button-expanded .expander-symbol .sw-image {
  transform: scale(1.4) rotate(45deg);
  transform-origin: center;
}
.expander-text{
  padding: 0 var(--padding-small);
}
.js-expand-target {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s cubic-bezier(.05,.66,.21,1), opacity 0.3s ease;
}
.js-expand-target.js-expanded {
  opacity: 1;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Navigation */

.main-nav{
  overflow-y: auto;
  position: fixed;
  z-index: 100;
  width: 100%; max-width: 100vw;
  margin-top: var(--padding-small);
  will-change: transform, opacity;
  transition: opacity .15s ease-out, transform .15s cubic-bezier(.05,.66,.21,1);
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  -ms-overflow-style: none;   
  scrollbar-width: none;    
}
.main-nav::-webkit-scrollbar{
  display: none;   
}
body.js-overlay-open .main-nav{
  opacity: 0;
  transform: translateY(-20px);
  /* visibility: hidden; */
}
.main-nav ul {
  display: flex;
  justify-content: center;
  gap: var(--padding-small);
}
.main-nav li{
}
.nav-link{
  background-color: var(--color-link-l);
  color: var(--color-link);
  position: relative;
  height: var(--button-height);
  display: flex;
  align-items: center;
  flex-direction: row;
  border-radius: var(--border-radius);
}
.nav-link span{
  padding: 0 var(--padding-small) ;
  font-size: var(--font-size-small);
  line-height: 1;
}
.nav-link.js-active{
  background-color: var(--color-black);
  color: var(--color-button);
   pointer-events: none;
   cursor: default; 
}
.nav-link.js-active .symbol-small{
  filter: invert(1);
  -webkit-filter: invert(1);
  background-color: var(--color-button);
  mix-blend-mode: normal;
}
.nav-link.js-active .sw-image{
  /* mix-blend-mode:lighten; */
}







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

.startmoment-logo{
  text-align: center;
  grid-column: 4 / span 6; 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
img.image-logo{
  height: auto;
  object-position: center;
}
.description-logo{
  padding-top: var(--padding-small);
}
.startmoment-bg-image{
  top: 0;
  position: fixed;
  z-index: 10;
  /* mix-blend-mode: multiply; */
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: var(--opacity-high);
}
.startmoment-bg-image img {
  object-fit: cover;
  object-position: center;
  filter:
    grayscale(1)
    brightness(var(--image-brightness))
    contrast(1000)
    url(#colorize-blue);
  will-change: filter;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Über uns */
.page-about .main-block:first-of-type{
  padding-top: var(--padding-big);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Ressourcen */
.page-ressourcen .main-block:first-of-type{
  padding-top: var(--padding-big);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Hauptseite */
.main-block{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--padding-small);
  padding: var(--padding-small);
  margin-bottom: var(--padding-big);
}
.main-block.startmoment{
  margin-bottom: 0;
}
.main-block-header{
  grid-column:  1 / -1;
  display: flex;
  gap: var(--padding-small);
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.main-block-text{
  padding: 0 var(--padding-small);
  grid-column: 4 / span 6; 
}
.main-block-text p{
  font-size: var(--font-size-normal);
}
.main-block-text p + p{
  text-indent: var(--padding-normal);
}



/* Link Hauptseite */
.main-block.link-hauptseite{

}
.main-block-lead{
  grid-column:  1 / -1;
  padding: var(--padding-small);
  padding-top: 0;
}
.link-mainpage{
  background: var(--color-link-l);
  color: var(--color-link);

  height: var(--button-height);
  font-size: var(--font-size-small);
  display: inline flex;
  border-radius: var(--border-radius);
  vertical-align: middle;
  align-items: center;
}
.link-mainpage span{
  padding: 0 var(--padding-small);
}
/* .link-mainpage .symbol-small{
  mix-blend-mode: normal;
  filter: invert(1);
  background-color: var(--color-button);
} */



/* Link Unterseite */
.main-block.link-hauptseite{

}
.link-subpage-link{
  background-color: var(--color-link-l);
  color: var(--color-link);

  display: block;
  position: relative;
  border-radius: var(--border-radius);
  grid-column: span 6;
  min-height: var(--subpage-height);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.link-subpage-image{
  position: relative;
}
.link-subpage-image picture{
  height: var(--subpage-height);
  aspect-ratio: 1 / 1 !important;
}
.link-subpage-image picture img{
  object-fit: cover;
  object-position: center;
}
.link-subpage-text{
  padding:0 var(--padding-small) ;
}


/* Downloads */
.downloads-list-title{
  padding: var(--padding-small);
}
.downloads-list-container{
  grid-column: 4 / span 6;
}
.downloads-list{
}
.downloads-list-link{
  background-color: var(--color-link-l);
  color: var(--color-link);

  position: relative;
  display: block grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--padding-small);
  align-items: center;
  height: var(--button-height);
  padding: 0 var(--padding-small);
  border-radius: var(--border-radius);
}
.downloads-list-item + .downloads-list-item{
  margin-top: var(--border-weight);
}

/* Liste */
.main-block-list {
  grid-column: 4 / span 6;
}
.main-block-list li.list-item > *{
  padding-left: var(--padding-small);
}

/* Verbände */
.verbaende{}
.verbaende-list-title{
  padding: var(--padding-small);
}
.verbaende-list-container{
  grid-column: 4 / span 6;
}
.verbaende-list{
}
.verbaende-list-link{
  background-color: var(--color-link-l);
  color: var(--color-link);
  position: relative;
  display: block flex;
  gap: 0 var(--padding-small);
  height: var(--button-height);
  border-radius: var(--border-radius);
  align-items: center;
  padding-right: var(--button-height);
}
.verbaende-list-item + .verbaende-list-item{
  margin-top: var(--border-weight);
}
.verbaende-list + .verbaende-list{
  margin-top: var(--border-weight);
}

.verbaende picture{
  width: var(--button-height);
}




/* Verein des Monats */
.main-block.verein{
  padding: 0;
}
.verein-link{
  background-color: var(--color-link-l);
  color: var(--color-link);

  display: block;
  height: 100%;
}
.article-swiper{
  grid-column:  1 / -1;
  width: 100%;
}
.article-swiper .swiper-slide{
  width: calc((100vw - var(--padding-small) * 2 - var(--padding-small)) / 12 * 5);
  aspect-ratio: 1 / 1;
  margin-left: var(--padding-small);
  border-radius: var(--border-radius);
}
.article-swiper .swiper-slide:last-of-type{
  margin-right: var(--padding-small);
}
.swiper-wrapper {
  display: flex;
}

/* swiper-buttons */
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
  opacity: 1;
}
.swiper-button-next.swiper-button-disabled img, .swiper-button-prev.swiper-button-disabled img{
  filter: grayscale(1) brightness(0.5) contrast(100);
}
.swiper-button-next{
  margin-right: var(--padding-small);
}
.swiper-button-prev{
  margin-left: var(--padding-small);
  transform: rotateZ(180deg);
}
.swiper-button-next, .swiper-button-prev{
  filter: invert(1);
  cursor: pointer;
  mix-blend-mode: multiply;
}
.swiper-button-next:after,
.swiper-button-prev:after{
  content: "";
}

.swiper-verein-image{
  height: 50%;
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: flex-start;
}
.swiper-verein-text{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 50%;
}
.swiper-verein-text p{
  padding: var(--padding-small);
  line-height: 1;
}
.verein-name{
  margin-top: auto;
}
.swiper-verein-text h3{
  padding: 0 var(--padding-small);
  text-align: left;
}



/* Veranstaltung */
.event-preview-state{
  grid-column:  1 / -1;
  padding: 0 var(--padding-small);
}
.event-preview-block + .event-preview-state{
  margin-top: var(--padding-small);
}
.event-preview-block{
  background-color: var(--color-link-l);
  color: var(--color-link);

  border-radius: var(--border-radius);
  height: fit-content;
  position: relative;
  grid-column:  1 / -1;
  width: 100%;
}
.event-preview-text{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--padding-small);
}
.event-preview-text > *{
  padding: var(--padding-small);
}
.event-preview-date{
  grid-column: span 3;
}
.event-preview-title{
  grid-column: span 6;
  padding-top: var(--padding-small);
  padding-bottom: 0;
}
.event-preview-place{
  grid-column: span 3;
}
.event-preview-lead{
  padding: var(--padding-small);
  grid-column: 4 / span 6;
  display: flex;
  align-items: flex-end;
}
.event-preview-image{
  padding: 0;
  grid-column: span 3;
  max-height: 33vh;
}

/* Expander */
.main-block .expander-button-container{
  grid-column:  1 / -1;
}
.event-preview-hidden-wrapper{
  grid-column:  1 / -1;
  display: grid;
  gap: var(--padding-small);
}
.event-preview .expander-button-container button{
  margin-top: calc(var(--padding-small) * -1);
}
.event-preview .expander-button-container button.js-button-expanded{
  margin-top: 0;
}


/* 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{
  background-color: var(--color-link-l);
  color: var(--color-link);
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
}
.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); */
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fragment  */
#overlay.fragment-open{
  position: fixed;
  box-sizing: border-box;
  border: 0;
  top: 0;
  margin: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  background: none ;
  will-change: transform;
  transform: translateZ(0);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--padding-small);
  padding: 0 var(--padding-small);
  pointer-events: none;
}
#overlay-container{
  grid-column: 3 / span 8; 
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translateZ(0);
  z-index: 1;
  overflow-y: auto;
  -ms-overflow-style: none;   
  scrollbar-width: none;    
  padding: var(--padding-small) 0;
  pointer-events: auto;
}
#overlay-container::-webkit-scrollbar{
  display: none;   
}
.overlay-content{
  background-color: var(--color-button);
  position: relative;
  z-index: 100;
  height: fit-content;
  /* min-height: 50vh; */
  border-radius: var(--border-radius);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}
.symbol-close-overlay{
  position: sticky;
  left: 100%; top: 0;
  mix-blend-mode: multiply;
  z-index: 1;
  display: block;
  width: fit-content;
}
.symbol-close-overlay + *{
  margin-top: calc(var(--button-height) * -1);
}

/* Hintergrund */
.overlay-bg{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  z-index: 100;
}
.js-overlay-exist .overlay-bg{
  visibility: visible;
  position: fixed;
  opacity: var(--opacity-high);
  overflow: hidden;
}
.overlay-bg .overlay-bg-image{
  width: 100vw; height: 100vh;
  position: relative;
}
.overlay-bg-image img{
  object-fit: cover;
  object-position: center;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Liste  */
.matrix-list{
  width: 100%;
}
.list-item{
  min-height: var(--button-height);
  display: flex;
  align-items: center;
}
.list-item a{
  color: var(--color-link);
  background-color: var(--color-link-l);
  width: 100%;
  position: relative;
  min-height: var(--button-height);
  display: flex;
  align-items: center;
}
.list-item-asset a{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--padding-small);
}
.file-meta{
  padding-left: var(--padding-small) ;
}

/* spezifisch Artikel */
.article-list {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--padding-small);
  padding: 0 var(--padding-small) ;
  padding-bottom: 0;
  padding-top: var(--padding-small);
  margin-top: auto;
}
.article-list:last-of-type {
  /* padding-bottom: var(--padding-small); */
}
.matrix-list .list-item:first-of-type {
  border-top: var(--border-weight) solid var(--color-white);
}
.article-list + .article-list{
  padding-top: 0;
  margin-top: 0;
}
.article-list + .article-list .matrix-list{
  padding-top: 0;
  margin-top: 0;
}
.article-list + .article-list .matrix-list li:first-of-type{
  border-top: var(--border-weight) solid var(--color-white);
}
.article-list .matrix-list{
    grid-column: 2 / span 6; 
} 
.article .list-item + .list-item{
  border-top: var(--border-weight) solid var(--color-white);
}







/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Artikel  */

.article-title{
  display: block flex;
  z-index: 1;
  text-align: center;
  min-height: 33vh;
  padding: var(--padding-medium) var(--padding-small);
  grid-column: 3 / 11;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.article-title h1{
  /* color: var(--color-button); */
}

.article{
  position: relative;
  /* display: grid; */
  /* grid-template-columns: repeat(8, 1fr); */
  /* gap: var(--padding-small);
  padding: 0 var(--padding-small); */
}
.article-header-image{
  display: flex;
  max-height: 50vh;
}
.article-header-image picture{
  max-height: 50vh;
}
.article-header-image-container{
  mix-blend-mode: multiply;
}
.article-image{
}
.article-image-inner{
  position: relative;
}
.article-image-caption{
  padding: var(--padding-small);
}
.article-image-caption p{
  font-size: var(--font-size-small);
}
.article-image.article-image-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--padding-small);
}
.article-image.article-image-medium,
.article-image.article-image-small-center
{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--padding-small);
}
.article-image.article-image-medium .article-image-inner{
  grid-column: 3 / span 10; 
}
.article-image.article-image-small-center .article-image-inner {
  grid-column: 4 / span 6;
}
.article-text{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0 var(--padding-small);
  padding: var(--padding-small);
}

.article-text p{
  grid-column: 2 / span 6; 
}
.article-text p + p{
  text-indent: var(--padding-normal);
}
.article-text strong{
  font-weight: normal;
}
.article-text p + ul{
  padding-top: var(--padding-normal);
}
.article-text p.ck-untertitel + ul{
  padding-top: 0;
}
.article-text ul{
  grid-column: 2 / span 6;
  position: relative;
}
.article-text ul li{
  text-indent: var(--padding-normal); 
}
.article-text ul li:before {
  content: "→";
  position: absolute;
  left: calc(var(--padding-normal) * -1);
}
.article-text ul + p{
  padding-top: var(--padding-normal);
  text-indent: 0;
}
.article-text ul li + li{
  padding-top: var(--padding-small);
}
.article-subtitle{
  /* display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0 var(--padding-small); */
  text-align: center;
  padding:var(--padding-medium) var(--padding-small);
  text-indent: 0;
}
.article-subtitle + *{
  padding-top: 0;
}
p.ck-frage{
  grid-column: 1 / span 8; 
  text-indent: 0 !important;
}
p.ck-antwort{
  grid-column: 2 / span 6; 
  text-indent: 0 !important;
}
p.ck-antwort + p.ck-frage{
  padding-top: var(--padding-small);
}
p.ck-untertitel{
  text-indent: 0 !important;
  padding: var(--padding-medium) 0;
  text-align: center;
  font-size: var(--font-size-big);
  line-height: 1;
}
p.ck-untertitel + P{
  text-indent: 0 ;
}

/* zurück */
.symbol-back-overlay{
  mix-blend-mode: multiply;
  transform: rotate(180deg);
  padding-left: var(--padding-small);
}
.article-leave-link{
  color: var(--color-link);
  display: block flex;
  z-index: 1;
  text-align: center;
  min-height: 33vh;
  padding: var(--padding-medium) var(--padding-small);
  grid-column: 3 / 11;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* nächster Artikel */
.next-article-comment{
  pointer-events: auto;
  padding: var(--padding-small);
}
.next-article-link{
  background-color: var(--color-link-l);
  color: var(--color-link);

  pointer-events: auto;
  border-radius: var(--border-radius);
  width: 100%;
  min-height: var(--subpage-height);
  display: block;
  position: relative;
}
.next-article-content{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: var(--padding-small);
  position: relative;
  width: 100%;
  height: 100%;
}
.next-article-image {
    width: auto;
    height: 100%;
    position: relative;
}
.next-article-image picture{
    height: var(--subpage-height);
}
.next-article-text{
  padding: var(--padding-small);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Spezifisch: Grosse overlays */
.overlay-big #overlay-container{
  grid-column:  1 / -1;
}
.overlay-big .overlay-content{
  background-color: var(--color-link-l);
}
.overlay-big .article-image {
  background-color: var(--color-link-l);
}
.overlay-big .article-image + .article-image{
  /* margin-top: calc(var(--padding-big) * -1); */
  margin-top: -0.1px;
}
.overlay-big .article-title {
  max-width: 60%;
  margin-left: 20%;
  margin-right: 20%;
}
.overlay-big .article-text {
  grid-template-columns: repeat(12, 1fr);
  background-color: var(--color-link-l);
}
.overlay-big .article-text ul{
  grid-column: 4 / span 6;
  position: relative;
}
.overlay-big .article-text p {
  grid-column: 4 / span 6;
}
.overlay-big .article-text p.ck-untertitel {
  grid-column: 2 / span 10;
}
.overlay-big p.ck-frage {
  grid-column: 3 / span 7;
}
.overlay-big p.ck-antwort {
  grid-column: 4 / span 6;
}
.overlay-big .article-list {
  grid-template-columns: repeat(12, 1fr);
  padding-top: 0;
}
.overlay-big .article-list .matrix-list{
  grid-column: 4 / span 6;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Verband Unterseite */
.verband-header-image-container{
  height: 33vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verband-header-image{
  width: 25vh;
}
.verband-title{
  text-align: center;
  padding: var(--padding-normal);
}
.verband-title + .article-text{
  padding-top: 0;
}



/* nächster Verband */
.next-verband-comment{
  pointer-events: auto;
  padding: var(--padding-small);
}
.next-verband-link{
  background-color: var(--color-link-l);
  color: var(--color-link);

  pointer-events: auto;
  border-radius: var(--border-radius);
  width: 100%;
  height: var(--button-height);
  display: block;
  position: relative;
}
.next-verband-content{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: var(--padding-small);
  position: relative;
  width: 100%;
  height: 100%;
}
.next-verband-image {
  width: auto;
  height: 100%;
  position: relative;
}
.next-verband-image picture{
  height: var(--button-height);
}
.next-verband-text{
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Veranstaltung Unterseite */

/* nächster Event */

.next-event-link{
  background-color: var(--color-link-l);
  color: var(--color-link);

  pointer-events: auto;
  border-radius: var(--border-radius);
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}
.next-event-content {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    gap: var(--padding-small);
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--padding-small);
}
.next-event-header {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--padding-small);
}
.next-event-image {
    width: auto;
    height: 100%;
    position: relative;
}
.next-event-image picture{
    height: var(--subpage-height);
}
.next-event-text{
  padding: var(--padding-small);
}
.next-event-link .event-preview-place{
  grid-column: span 5;
}
.next-event-link .event-preview-lead{
  padding: 0;
  padding-right: var(--button-height);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Impressum */
.page-impressum {
  padding-top: var(--padding-big);
}
.page-impressum .impressum-text{
  padding: var(--padding-small);

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--padding-small);
}
.page-impressum .impressum-text p{
  grid-column: 4 / span 6;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Footer  */
footer.footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--padding-small);
  padding: var(--padding-small);
  padding-top: var(--padding-big);
}
footer .footer-item{
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .footer-link{
  background-color: var(--color-link-l);
  color: var(--color-link);

  position: relative;
  display: block;
  height: var(--button-height);
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-item-logo{
  position: relative;
  display: block;
}
img.footer-logo{
  height: var(--button-height);
}
footer .footer-text{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--padding-small);
}
footer .footer-link-text,
footer .list-text
{
  padding: 0 var(--padding-small);
}

footer .main-block-contact{
  margin-bottom: 0;
  width: 100%;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animation  */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* swup overlay öffnen / schliessen */
#overlay.is-changing.transition-fragment {
  transition-duration: .3s;
}
#overlay.is-animating.transition-fragment {
}
/* Inhalt */
#overlay.is-changing.transition-fragment #overlay-container{
  opacity: 1;
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.05,.66,.21,1), opacity .2s ease-out;
}
#overlay.is-animating.transition-fragment #overlay-container{
  opacity: 0;
  transform: translateY(5vh);
}
/* Titel Parallax */
#overlay.is-changing.transition-fragment #overlay-container .article-title h1{
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.05,.66,.21,1);
}
#overlay.is-animating.transition-fragment #overlay-container .article-title h1{
  transform: translateY(5vh);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* overlay zu overlay */
/* Startzustand für neuen Inhalt */
#overlay-container.transition-deeper.is-animating.is-rendering {
  opacity: 0;
  will-change: transform;
  transform: translateY(10vh);
}
/* Zielzustand mit Transition */
#overlay-container.transition-deeper.is-changing {
  opacity: 1;
  will-change: transform;
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.05,.66,.21,1), opacity .3s ease-out;
}
/* Austritt */
#overlay-container.transition-deeper.is-animating.is-leaving {
  opacity: 0;
  transform: translateY(-10vh);
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}


/* Hauptseite zu Hauptseite */
/* Startzustand für neuen Inhalt */
html.is-animating.is-rendering .transition-site{
  opacity: 0;
  transform: translateY(10vh);
}
/* Zielzustand mit Transition */
html.is-changing .transition-site{
  opacity: 1;
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.05,.66,.21,1), opacity .3s ease-out;
}
/* Austritt */
html.is-animating.is-leaving .transition-site{
  opacity: 0;
  transform: translateY(-10vh);
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Desktop  */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* Hover */
@media (hover: hover){

  a.js-link-colors:hover{
    background-color: var(--color-link-h)
  }
  .nav-link.js-active:hover{
    background-color: black;
  }
  a.overlay-bg:hover,
  a.article-leave-link:hover,
  .symbol-close-overlay
  {
    background-color: unset;
  }

}