html, body {
  height: 100%;
  margin: 0;
}

/* Der Wrapper umschliesst Header, Container und Footer */
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Volle Bildschirmhöhe */
  width:100%;
}

/* Der Container umschliesst die Hauptspalte(n) */
#container {
  flex: 1; /* Schiebt den Footer nach unten */
}

/*  COLUMNS  */
@media screen and (max-width:44.99rem) {.columns432 {display:grid; grid-template-columns:repeat(2, 1fr);}}
@media screen and (min-width:45rem) and (max-width:51.99rem) {.columns432 {display:grid; grid-template-columns:repeat(3, 1fr);}}
@media screen and (min-width:52rem) {.columns432 {display:grid; grid-template-columns:repeat(4, 1fr);}}

@media screen and (max-width:29.99rem) {.columns332 {display:grid; grid-template-columns:repeat(2, 1fr);}}
@media screen and (min-width:30rem) and (max-width:49.99rem) {.columns332 {display:grid; grid-template-columns:repeat(3, 1fr);}}
@media screen and (min-width:50rem) {.columns332 {display:grid; grid-template-columns:repeat(3, 1fr);}}

@media screen and (max-width:29.99rem) {.columns321 {display:grid; grid-template-columns:repeat(1, 1fr);}}
@media screen and (min-width:30rem) and (max-width:49.99rem) {.columns321 {display:grid; grid-template-columns:repeat(2, 1fr);}}
@media screen and (min-width:50rem) {.columns321 {display:grid; grid-template-columns:repeat(3, 1fr);}}

@media screen and (max-width:29.99rem) {.columns221 {display:grid; grid-template-columns:repeat(1, 1fr);}}
@media screen and (min-width:30rem) and (max-width:49.99rem) {.columns221 {display:grid; grid-template-columns:repeat(2, 1fr);}}
@media screen and (min-width:50rem) {.columns221 {display:grid; grid-template-columns:repeat(2, 1fr);}}

@media screen and (max-width:29.99rem) {.columns222 {display:grid; grid-template-columns:repeat(2, 1fr);}}
@media screen and (min-width:30rem) and (max-width:49.99rem) {.columns222 {display:grid; grid-template-columns:repeat(2, 1fr);}}
@media screen and (min-width:50rem) {.columns222 {display:grid; grid-template-columns:repeat(2, 1fr);}}

@media screen and (max-width:29.99rem) {.columns211 {display:grid; grid-template-columns:repeat(1, 1fr);}}
@media screen and (min-width:30rem) and (max-width:49.99rem) {.columns211 {display:grid; grid-template-columns:repeat(1, 1fr);}}
@media screen and (min-width:50rem) {.columns211 {display:grid; grid-template-columns:repeat(2, 1fr);}}

@media screen and (max-width:29.99rem) {.columns_borderleft {display:grid; grid-template-columns:1fr;}}
@media screen and (min-width:30rem) and (max-width:49.99rem) {.columns_borderleft {display:grid; grid-template-columns:1fr;}}
@media screen and (min-width:50rem) {.columns_borderleft {display:grid; grid-template-columns: 1fr 3fr;}}

@media screen and (max-width: 31.99rem) {.columns_borderleft13 {display:grid; grid-template-columns:1fr;}}
@media screen and (min-width:32rem) and (max-width:49.99rem) {.columns_borderleft13 {display:grid; grid-template-columns:1fr 2fr;}}
@media screen and (min-width:50rem) {.columns_borderleft13 {display:grid; grid-template-columns: 1fr 3fr;}}

@media screen and (max-width: 31.99rem) {.columns_borderleft28 {display:grid; grid-template-columns:1fr;}}
@media screen and (min-width:32rem) and (max-width:49.99rem) {.columns_borderleft28 {display:grid; grid-template-columns:0fr 8fr;}}
@media screen and (min-width:50rem) {.columns_borderleft28 {display:grid; grid-template-columns: 2fr 8fr;}}

@media screen and (max-width:31.99rem) {.columns_borderright31 {display:grid; grid-template-columns:1fr;}}
@media screen and (min-width:32rem) and (max-width:49.99rem) {.columns_borderright31 {display:grid; grid-template-columns:2fr 1fr;}}
@media screen and (min-width:50rem) {.columns_borderright31 {display:grid; grid-template-columns: 3fr 1fr;}}

@media screen and (max-width:29.99rem) {.columns_borderleft23 {display:grid; grid-template-columns:1fr;}}
@media screen and (min-width:30rem) and (max-width:49.99rem) {.columns_borderleft23 {display:grid; grid-template-columns:1fr 1fr;}}
@media screen and (min-width:50rem) {.columns_borderleft23 {display:grid; grid-template-columns: 2fr 3fr;}}

@media screen and (max-width:29.99rem) {.columns_borderright32 {display:grid; grid-template-columns:1fr;}}
@media screen and (min-width:30rem) and (max-width:49.99rem) {.columns_borderright32 {display:grid; grid-template-columns:1fr 1fr;}}
@media screen and (min-width:50rem) {.columns_borderright32 {display:grid; grid-template-columns: 3fr 2fr;}}

/*Damit Footer am unteren Ende bündig wird */

.grid-container {
  width:100%;
}
.gap10 {
  gap:10px;
}
.gap20 {
  gap:20px;
}
.gap30 {
  gap:30px;
}
.gap40 {
  gap:40px;
}
.flex-column {
  display:flex;
  flex-flow:  column wrap;
  justify-content:center;
  align-items:center;
}
.flex-column2 {
  display:flex;
  flex-flow:  column wrap;
  justify-content:center;
  align-items:flex-start;
}
.flex-row {
  display:flex;
  flex-flow:  row wrap;
  justify-content:space-around;
  align-items:center;
}
.flex-row2 {
  display:flex;
  flex-flow:  row wrap;
  align-items:flex-end;
  justify-content:center;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  scroll-behavior:smooth;
  width:100%;
}
html body.bright, body .bright {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

main {
  overflow-x:hidden;
  padding-bottom:0;
}

header {
  position: sticky;
  height:320px;
  z-index: 10;
  top: 0;
  overflow-x: hidden; /* Verhindert Überlauf */
}
@media screen and (max-width: 830px) and (orientation:portrait) {
    header {
        width:100%;
        height:280px;
        background-color:var(--col2);   
    }
}
@media screen and (min-width: 831px) and (orientation:portrait) {
    header {
        position: sticky;
        width:100%;
        height:220px;
        background-color:var(--col2);
        z-index: 10;
    }
}
@media screen and (max-width: 1080px) and (orientation:landscape) {
    header {
        width:100%;
        height:250px;
        background-color:var(--col2);   
    }
}
@media screen and (min-width: 1081px) and (orientation:landscape) {
    header {
        position: sticky;
        width:100%;
        height:228px;
        background-color:var(--col2);
        z-index: 10;
    }
}
@media screen and (min-width: 831px) and (orientation:portrait) {
    body.bright header {
        position: fixed;
}
}

@media screen and (max-width:830px) and (orientation:portrait) {
  header {
    height:115px;
  }
}
@media screen and (max-width:1080px) and (orientation:landscape) {
  header {
    height:110px;
  }
}
header .inside {
  max-width: 100%;
  overflow: hidden;
  height:100%;
}
@media screen and (min-width:831px) and (orientation:portrait) {
header .inside .header-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  height:100%;
}}
@media screen and (min-width:1081px) and (orientation:landscape) {
header .inside .header-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  height:100%;
}}

.links01 main {
  width: 100%;
  height:100%;
  background-image: url('/files/graphics/bg_shalom.webp');
  background-repeat: repeat;
  background-position: top left;
}
/* Responsive Anpassungen für kleinere Screens 
@media (max-width: 1079px) {
  header .inside .header-content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
}  */
/*  ********************************************************************* MENU ASIDE */
.menu_aside {
     position:fixed;
     left:0; top:70vh;
     max-width:180px;
     margin:0;
     margin-left:-2px;
     z-index:120;
     border:2px dotted #fff6f6;
     background-color: var(--col3);
}

@media screen and (min-width:700px) and (max-width:1300px) {
    menu-aside {
        margin-left:-2px;
    }

}
@media screen and (max-width:1079px) {
  #ma,
 .menu_aside {
    display:none;
}}
.menu_aside ul {
  margin-left:0;
  color: white;
  margin-bottom:0;
}
.menu_aside li {
  padding:4px;
}






/* Verdeckung durch Aside-Menu vermeiden  */ /*
@media screen and (min-width:1080px) and (max-width:1200px) {
  main {padding-left:1.5rem;
}
} */

header .mod_changelanguage {
  position: absolute;
  right: 0.8rem;
  top:1.8rem;
  background-color:var(--col3);
  border:1px solid var(--col1);
  border-radius:3px;
  z-index:2;
}
.mod_changelanguage select {
  height:1.5rem;
  color:var(--col1);
  background-color:var(--col3);
  width:125px;
/*  border:1px solid var(--col1);  */
  border:none;
  margin-bottom:0;
  cursor:pointer;
}

.mod_changelanguage h5 {
  font-size:1rem;
  font-weight:400;
  color:var(--col1);
  margin-bottom:0;
  padding-left:7px;
  border-bottom: 2px solid var(--col3);
}
@media screen and (max-width:1079px) {
  .header-content {
    display:none;
  }
  .mod_changelanguage {
   display:none; 
  }
  .mobile_menu .mod_changelanguage {
    display:block;
    position:relative;
    right: inherit;
    top: inherit;
    border: none;
    z-index: 105;
    padding: 0.8rem;
    padding-bottom:0;
    border: 1px solid #317b83;
    border-radius: 5px;
    margin-right: 1.3rem;
    background: #317bd1;
  }
  .mobile_menu .mod_changelanguage select {
  height:1.5rem;
  color:var(--col0);
  background-color:var(--col2);
  width:125px;
/*  border:1px solid var(--col1);  */
  border:none;
  margin-bottom:0;
}}
@media screen and (max-width:1079px) {
  .smallheader {
    display:flex;
    flex-flow:row nowrap;
    justify-content:flex-start;
    align-items:center;
    height:100%;
}}

@media screen and (min-width:1080px) {
  .smallheader {
    display:none;
}
  header .hamburger {
    display:none;
  }

}
@media screen and (min-width:300px) {
  .image-header .smartphone {
    display:none;
  }
    .image-header .desktop {
    display:flex;
  }
}
.flex-column {transition: opacity .5s ease;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items:center;
  gap:1rem;
}
.center-flex {
  display: flex;
  justify-content: center;
}
.center-center-flex {
  display: flex;
  justify-content: center;
  align-items:center;
}


@media screen and (max-width:480px) and (orientation:portrait) {
  .image-header .smartphone {
    display:flex;
  }
  .image-header .desktop {
    display:none;
  }
}

.contained {
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	padding:2rem;
	overflow:visible;           /* wird benötigt für Rhomboid-Hintergrund */
}
@media screen and (max-width:600px) {
	.contained {
		padding: 1.5rem;
    margin-top: 1rem;
	}
}
@media screen and (max-width:400px) {
	.contained {
		padding:0.7rem;
	}
}
.card .rte {
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100%; /* Wichtig: Füllt die Höhe des äußeren Grid-Items */

}
footer {
	width:100%;
	background-color: transparent;
	color:var(--col2);
  padding-top:2rem;
}
footer .inside {
  padding:0.5rem;
}
footer p, footer li, footer a, footer h3, footer h4, footer h5 {
  color:var(--col2);
  margin:0;
}
@media screen and (max-width:920px) {
footer .small-evict {
  display:none;
}
}
body.bright footer p, body.bright footer li, body.bright footer a, body.bright footer h3, body.bright footer h4, body.bright footer h5 {
  color:var(--col2);
  text-shadow: var(--col1) 1px 1px;
}
body.bright footer {
  position:absolute;
  bottom:0;
}
body.bright footer .updated {
  display:none;
}
/*  SPRUNGMARKEN  */
#datenschutz {
    scroll-margin-top: 150px; /* Höhe Ihrer fixierten Navigation + optional etwas Puffer */
}
#event {
    scroll-margin-top: -610px; /* Höhe Ihrer fixierten Navigation + optional etwas Puffer */
}

#veranstaltung {
  width:auto;
  max-width:95vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease;
  background: #f2f7ff;
  position: fixed;
  top:112px;
  right:5vw;
  padding: 20px;
  padding-top:10px;
  min-width:30vw;
  box-sizing:border-box;
  margin: 0;
  transform: rotate(-6deg);
  pointer-events: none;
  cursor: pointer;
  z-index:5;
}
/* sichtbar */
#veranstaltung.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#veranstaltung p, #veranstaltung h5, #veranstaltung h4, #veranstaltung a {
  margin-bottom:0;
  color:black;
  background:transparent;
}
#veranstaltung a {
  color:grey;
}
.ma {
    --_ma-color-a: #fff;
    --_ma-color-b: #111;
    --_ma-speed: 250ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 4px;
    --_ma-size-b: 4px;
    --_ma-angle: 45deg;
    --_ma-size: calc(var(--_ma-size-a) + var(--_ma-size-b));
    --_ma-shift: calc(var(--_ma-size) / sin(var(--_ma-angle)));

    position: relative;
}

.ma:before,
.ma:after {
    content: '';
    position: absolute;
    inset: calc(var(--_ma-border-width) * -1);
    pointer-events: none;
    border-radius: inherit;

    background:
        repeating-linear-gradient(
            var(--_ma-angle),
            var(--_ma-color-a) 0 var(--_ma-size-a),
            var(--_ma-color-b) var(--_ma-size-a) var(--_ma-size)
        );
    background-size: var(--_ma-shift) 100%;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.ma:before {
    padding: 0 var(--_ma-border-width) var(--_ma-border-width) 0;
    animation: ma-animation-b var(--_ma-speed) var(--_ma-animation-timing-function) infinite;
}

.ma:after {
    padding: var(--_ma-border-width) 0 0 var(--_ma-border-width);
    animation: ma-animation-a var(--_ma-speed) var(--_ma-animation-timing-function) infinite;
}

.ma:hover:before,
.ma:hover:after {
    animation-play-state: paused;
}

@keyframes ma-animation-b {
    to {
        background-position: calc(var(--_ma-shift) * var(--_ma-animation-direction) * -1) 0;
    }
}

@keyframes ma-animation-a {
    to {
        background-position: calc(var(--_ma-shift) * var(--_ma-animation-direction)) 0;
    }
}
.ma-example {
    box-shadow: 0 1rem 3rem rgb(0 0 0 / .66);
}
.ma-example--10 {

    border-radius: 0;

    --_ma-color-a: #fff;
    --_ma-color-b: #111;
    --_ma-speed: 250ms;
    --_ma-animation-direction: 1;
    --_ma-animation-timing-function: linear;
    --_ma-border-width: 1px;
    --_ma-size-a: 4px;
    --_ma-size-b: 4px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
@media screen and (orientation:landscape) {
  #slider-landscape {
      display:block;
}
  #slider-portrait {
    display:none;
  }
  }
  @media screen and (orientation:portrait) {
  #slider-landscape, #slides .landscape {
      display:none;
}
  #slider-portrait {
    display:block;
  }
  }
  
#slider-landscape, #slider-portrait {
  overflow:hidden;
  height:100vh;
  width:100vw;
}
@media screen and (min-width:32em) {.ce_form.kontakt {
  max-width:85%;
}}
/*
#slider-landscape .rsts-slide img {
    transform: scale(1);
    transition: none;
}
#slider-landscape .rsts-slides .rsts-active img {

  animation-name: kenburns;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-iteration-count:1;
  animation-direction:normal;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes kenburns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -2%); }
}
*/

/* funzt einigermassen

#slider-landscape .rsts-slide img {
    transform: scale(1) translate(0, 0);
    transition: transform 5.5s ease-in-out; 
}

#slider-landscape .rsts-slides .rsts-active img {
    transition: none; 
    
    animation-name: kenburns;
    animation-duration: 9s; 
    animation-delay: 0s;
    animation-iteration-count: 1;

    animation-fill-mode: forwards; 
    animation-timing-function: ease-in-out;
}

@keyframes kenburns {
    0% { 
        transform: scale(1) translate(0, 0); 
    }
    100% { 
        transform: scale(1.15) translate(-2%, -2%); 
    }}



#slider-landscape .rsts-slide img {
    transform: scale(1);
}

#slider-landscape .rsts-slide.rsts-active img {
    animation: kenburns 5.5s ease-out forwards alternate;
}

@keyframes kenburns {
    from {
        transform: scale(1) translate(0, 0);
    }
    to {
        transform: scale(1.15) translate(-2%, -2%);
    }
}
*/

/*
#slider-landscape .rsts-slide img {
    transition: none;
}

#slider-landscape .rsts-slide.rsts-active img {
    animation: kenburns 5.6s ease-out forwards;
}

@keyframes kenburns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.15) translate(-2%, -2%);
    }
}   */