/*  COLUMNS  */
@media screen and (max-width:29.99rem) {.columns432 {display:grid; grid-template-columns:repeat(2, 1fr);}}
@media screen and (min-width:30rem) and (max-width:49.99rem) {.columns432 {display:grid; grid-template-columns:repeat(3, 1fr);}}
@media screen and (min-width:50rem) {.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;}}

/*Damit Footer am unteren Ende bündig wird */
.gap10 {
  gap:10px;
}
.gap20 {
  gap:20px;
}
.gap20x {
  gap:0 20px;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  scroll-behavior:smooth;
  width:100%;
}

main {
  overflow-x:hidden;
  flex: 1;
  min-height:calc(100vh - 60px);
    padding-bottom:1rem;
}

#wrapper {
  width:100%;
}

header {
  height: 190px;
  position: sticky;
  z-index: 100;
  top: 0;
  border: 1px solid #5447EA;
  overflow: hidden; /* Verhindert Überlauf */
}
@media screen and (max-width:1079px) {
  header {
    height: 145px;
  }
}
@media screen and (max-width:639px) {
  header {
    height: 110px;
  }
}
@media screen and (max-width:479px) {
  header {
    height: 96px;
  }
}
@media screen and (max-width:400px) {
  .headertext {
    margin-left:40px;
  }
}
/*
@media screen and (max-height:700px) {
  header {
    position:relative;
  }
  #nav-icon4 {
  position: fixed;
}
} */
header .inside {
  max-width: 100%;
  overflow: hidden;
  height:100%;
}
@media screen and (min-width:1080px) {
header .inside .header-content {
  display: inline-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:0px;
     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);
  padding-bottom: 5px;
  border:2px dotted var(--col1);
  border-radius:5px;
  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:white;
  margin-bottom:0;
  padding-left:7px;
  border-bottom: 2px solid var(--col3);
}
@media screen and (max-width:1079px) {
  .header-content {
    display:none;
  }
  header .mod_changelanguage {
   display:none; 
  }
  #click-menu .mod_changelanguage ul {
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-around;
/*    position:relative;
    right: inherit;
    top: inherit; */
    z-index: 105;
    padding: 0.8rem;
    border: 1px solid var(--col3);
    border-radius: 5px;
    width:70%;
    margin: 1rem;
    background: transparent;
  }
  #click-menu .mod_changelanguage li {
    background: transparent;
    padding:6px;
  }
  #click-menu .mod_changelanguage select {
  height:1.5rem;
  color:var(--col0);
  background-color:var(--col2);
  border:1px solid var(--col1); 
  margin-bottom:0;
  padding:6px;
}}
@media screen and (max-width:1079px) {
  .smallheader {
    display:flex;
    flex-flow:row nowrap!important;
    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;
}
.space-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.randabstand {
  padding-left: max(25px, 1.4vw + 20px);
  padding-right: max(25px, 1.4vw + 20px);
}

@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%;
  padding: 0 0.5rem;
	background-color: var(--col3);
	background-image: url("/files/pictures/background/kombi2_H100.webp");
	background-repeat:repeat;
}
.home1 footer {
  margin-top: 1.5rem;
}
.footer-content {
	display:flex;
	gap: 2rem;opacity: 0;
  visibility: hidden;
	justify-content: space-around;
}

/*  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;
}


/*  ZUSÄTZLICHER LAYER FÜR TELTRANSPARENTEN CANVAS, WELCHER POINTER AKTIONEN DURCHLÄSST   */
#container {
  position: relative; /* Wichtig für die Positionierung des Overlays */
  /* weitere Stile wie width, height, etc. */
}
/*
#container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;   */
  
  /* Der teiltransparente Hintergrund (hier 30% Schwarz) */
/*  background-color: rgba(5, 5, 0, 0.3); 
  
  /* Der Schlüssel: Klicks und Mauszeiger gehen hindurch */
/*  pointer-events: none; 
  z-index:100;
} */

.content-swiper {
  width:100%;
} 
@media screen and (min-width:1352px) {
  .content-swiper {
  width: calc(100vw - 150px);
  margin-left:75px;
  margin-right:auto;
  margin-top:1.8rem;
}
.swiper-slide {
  border: 1px dotted var(--col3);
  border-radius: 3px;
}
}  
.swiper-flex {
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  background-color:#f2f7ff;
  position:relative;
}

.swiper-flex figure {
  flex-shrink:0;
}
.swiper-button-prev, .swiper-button-next {
  color:var(--col3);
  opacity:0.6;
  -webkit-text-stroke-color:black;
	text-stroke-color:black;
	-webkit-text-stroke-width:2px;
	text-stroke-width:2px;
}
.swiper-button-disabled {
  display:none;
}
.swiper-flex p, .swiper-flex p a {
  font-size:0.9em;
  padding-right:1rem;
  margin-bottom:0;
}
.swiper-flex a {
  text-decoration:none;
}
.link-card .rte {
  display: flex;
  flex-flow:row wrap;
  gap: 10px;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  /*border: 2px dotted purple; */
  border-radius:8px;
  background:var(--col2);
  overflow:hidden;
  position:relative;
/*  box-shadow:  8px 8px 2px #3100c7, -8px -8px 3px #4d00ff; */
  box-shadow: 4px 6px 0 #13004e;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.link-card .rte:hover {
  transform: translateY(-4px);      /* Bewegt den Button 4px hoch */
  transform: translateX(-2px);
  box-shadow: 8px 10px 0 #13004e;
  background:white;/* Macht den Schatten 4px dicker */
}
.link-card .rte a:hover{
  color:#13004e;
}
.link-card .rte p {
  margin:0;
}
.link-card .content-text {
  padding:0.5rem 0;
}

.link-card a::after, .swiper-flex a::after  {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;            /* Streckt die Klickfläche über die gesamte .card */
}