:root {
    --font-main: 'Overpass', sans-serif;
    --standard-font-size: 18px; 
    --standard-letter-spacing:.03em;
    
    --color-bg: #F6F3EE;
    --color-darkgreen: #2B4321;
    --color-lightgreen: #9FBF5F;
    --color-fadegreen: #e8f0d5;
    --color-primary: #2B4321;
    --color-white: #FAFAFA;
    
    --color-darkgreen-hover: #48683b;
    --color-lightgreen-hover: #B5D96C;
    
    --transition-fast: 0.3s ease;
    --transition: all 0.5s ease;

    --medium-rounded: 12px;
    --fieldbuttonrounded: 999px;
    
    --container-max: 1600px;
    --gutter: clamp(25px, 6vw, 70px);
    
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.275);
    
    --padding-block: clamp(4.5rem, 8vw, 6.5rem);
    --padding-block-small: clamp(1.5rem, 5vw, 3rem);
}

html, body {
    scroll-behavior: smooth;
    background-color:#244428;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

html { min-height: 100%; }

body {
    margin: 0;
    font-family: 'Overpass', sans-serif;
    background-color: var(--color-bg);
    font-weight: 300;
    font-size: 18.5px; 
    letter-spacing: var(--standard-letter-spacing);
}

main {
    background-color: var(--color-bg);
}

.container {
    width: min(var(--container-max), calc(100% - (var(--gutter) * 2)));
    margin-inline: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

p {
  font-size: clamp(17.5px, 3px + 0.8vw, 19px);       
  margin: 0.7rem 0 1rem;    
  color: var(--color-darkgreen);
  line-height: 1.4;
}

h2 {
    font-size: clamp(1.9rem, 0.8rem + 2vw, 2.7rem);
    font-weight: 700;
    margin: 0 0 0.3rem;
    color: var(--color-darkgreen);
    text-transform: uppercase;
    letter-spacing: -0.05rem;
    line-height: 1.15;
}

h3 {
    font-size: clamp(1.5rem, 0.6rem + 1.5vw, 2rem);
    font-weight: 600;
    color: var(--color-darkgreen);
    margin: 0;
    line-height: 1.2;
}

h4 {
    font-size: clamp(1rem, 0.5rem + 0.8vw, 1.3rem);
    font-weight: 600;
    color: var(--color-lightgreen);
    margin: 0 0 .5rem;
    line-height: 1.3;
}




/* FIX publishnews */
.publishnews {
}

/* FIX box-sizing */
.kontaktformular-links,
.kontaktformular-rechts {
  box-sizing: border-box;
}

/* FIX glightbox doppelte height/width Konflikte entfernt */
#article1 .glightbox-container .gslide-inner-content,
#article1 .glightbox-container .gslide-media {
  max-height: 100vh !important;
}


main ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: clamp(8px, 1vw, 10px);
}

main ul li {
    position: relative;
    padding-left: clamp(28px, 4vw, 30px);
    margin-bottom: clamp(5px, 1.5vw, 12px);
    line-height: 1.5;
    color: var(--color-darkgreen);
}

main ul li:last-child {
    margin-bottom: 0;
}

main ul li::before {
    content: "";
    position: absolute;
    left: 0;

    /* stabiler als 50% oder rein top */
    top: 0.2em;

    width: clamp(18px, 2.5vw, 20px);
    height: clamp(18px, 2.5vw, 20px);

    background-image: url('/media/zum/haken.svg');
    background-size: contain;
    background-repeat: no-repeat;
}


/* Grundlegende Button-Stile */
.btn-darkgreen,
.btn-lightgreen {
    display: inline-block;
    padding: 13px 20px 8px 20px;
    border-radius: var(--fieldbuttonrounded); 
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-size: clamp(16px, 3px + 0.8vw, 19px);   
}

/* Dunkelgrüner Button */
.btn-darkgreen {
    background-color: var(--color-darkgreen);
    color: var(--color-lightgreen) !important;
}

.btn-darkgreen:hover {
    background-color: var(--color-darkgreen-hover);
}

/* Hellgrüner Button */
.btn-lightgreen {
    background-color: var(--color-lightgreen);
    color: var(--color-darkgreen) !important;
    font-weight: 700 !important;
}

.btn-lightgreen:hover {
    background-color: var(--color-lightgreen-hover);
}






header {
    position: fixed; /* Absolut fest */
    top: 0; /* Direkt am oberen Rand */
    left: 0;
    width: 100%;
    height: 110px; /* Höhe des Headers */
    background-color: var(--color-darkgreen); /* Vollbreiter Hintergrund */
    z-index: 1001;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

.header-inner {
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -0.1rem;
 
}

/* Logo-Container (flex für Ausrichtung) */
.logo-container {
    display: flex;
    align-items: center;
    height: 100%; /* Passt sich der Header-Höhe an */
}

/* SVG im Logo-Container anpassen */
.logo-container svg {
    width: 270px !important; 
    height: auto; 
    fill: white; 
    transition: all 0.3s ease; 
}


.headerinner-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
}


nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
    z-index: 1200;
    position: relative;
}

.mobile-back-button {
    display: none;
}


nav > ul {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Pagination --- */
nav.pagination {
    display: flex;
    justify-content: flex-start;
    flex-grow: 1;
    z-index: 1200;
    position: relative;
}

nav.pagination > ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- LI --- */
nav > ul > li,
nav.pagination > ul > li {
    position: relative;
    z-index: 1201;
}

/* --- LINKS (BASIS) --- */
nav ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0.3rem 0.6rem .3rem 0.6rem; 
    text-decoration: none;
    color: var(--color-bg);
    background-color: var(--color-darkgreen);
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.3;
   
    transition: all 0.3s ease;
}


nav > ul > li > a:hover,
nav > ul > li > a.rex-active,
nav > ul > li > a.rex-current {
    border-bottom: 2px solid var(--color-bg);
}


nav > ul > li:last-child > a {
    background-color: var(--color-lightgreen);
    border-radius: var(--fieldbuttonrounded);

    padding: 0.3rem 1.2rem 0 1.2rem; 
    font-weight: 700;
    color: var(--color-darkgreen) !important;
    border-bottom: none !important;
}


nav > ul > li:last-child > a:hover,
nav > ul > li:last-child > a.rex-active,
nav > ul > li:last-child > a.rex-current {
    background-color: var(--color-lightgreen-hover) !important;
}
@media (min-width: 1000px) and (max-width: 1400px) {
  .logo-container svg {
    width: 180px !important;
  }
	nav ul {
gap: 1rem;
}
  nav ul > li > a {
    padding: 0.3rem 0;
  }
  .container {
width:95%;
margin-inline: auto;
}
}

@media screen and (min-width: 1000px) {

  nav ul ul {
    display: none;
    position: absolute;
    top: 100%;         
    left: 0;
    background-color: var(--color-lightgreen);
    padding: 10px 10px 10px 10px;
    margin-top: 0;
    min-width: 220px;
    z-index: 10000;
    box-shadow: var(--shadow);
    border-top: 8px solid transparent;
    background-clip: padding-box;
  }

  nav ul ul li {
    display: block;
    height: auto;
    text-align: left;
    margin-bottom:4px;
  }

  nav ul ul a {
    padding: 10px;
    height:20px;
    display: block;
    background-color: transparent;
    color: var(--color-darkgreen);
    border-bottom:2px solid transparent;
  }

	nav ul ul a:hover {
    padding: 10px;
    height:20px;
    display: block;
    background-color: transparent;
    color: var(--color-darkgreen);
    border-bottom:2px solid var(--color-darkgreen);
  }

	nav ul ul li.rex-current a {
    padding: 10px;
    height:20px;
    display: block;
    background-color: transparent;
    color: var(--color-darkgreen);
    border-bottom:2px solid var(--color-darkgreen);
	}


  /* ── Hover auf li ODER auf dem Submenü selbst ── */
  nav > ul > li:hover > ul,
  nav > ul > li > ul:hover {
    display: block;
  }

  /* ── Hover-Bereich des li nach unten verlängern ── */
  nav > ul > li:has(ul) {
    padding-bottom: 8px;
    margin-bottom: -8px;
  }
}



.burger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 36px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-left: auto;
	margin-top: .5em;
	z-index: 1000;
	position:absolute;
	right:20px;
	top:20px;
}

.burger span {
	display: block;
	height: 1.5px;
	width: 36px;
	background-color: var(--color-white);
	border-radius: 0px;
	margin-top: 4px;
	margin-bottom: 4px;
	transition: 0.3s;
}



section {
	z-index: 1;
}

section.hero {
    position: relative;
    margin-top: 0;
    width: 100%;
    aspect-ratio: 16 / 7;
    z-index: 999;
}

section.hero .textrahmen {
    background-color: transparent;
    border-radius: var(--rounded);
    padding: 1rem 1.5rem;
    width: 95%;
    position: absolute;
    bottom: 7rem;
    left: 50%;
    transform: translateX(-50%); /* 🔥 wichtig fürs echte Zentrieren */
    z-index: 1000;
    color: #fff;
    text-align: center; /* 🔥 Text mittig */
}

 
section.hero .textrahmen h1 {
    color: var(--color-bg);
    font-size: clamp(2.8rem, 1rem + 4vw, 4.0rem);
    letter-spacing: 0.00rem;
    line-height: 110%;
    margin-bottom: -1.5rem;
    text-transform: uppercase; /* ← Großbuchstaben */
}

section.hero .textrahmen h2 {
    color: var(--color-bg);
    font-size: clamp(1.1rem, 0.6rem + 1.5vw, 1.4rem);
    line-height: 110%;
    margin-bottom: 0rem;
    letter-spacing: 0;
    font-weight: 500;
    text-transform: none;
}


.slide-overlay p:not(.headerButtons) {
  font-weight: 500;
  font-size: 1.4rem;
  margin-top: 0.7rem;
  margin-bottom: 2.8rem;
}


main section.slideshowundtext {
	padding: 7rem 0 7rem 0;
	margin-left: 0;
	margin-right: 0;
	max-width:100%;
}


.slide {
    position: relative;
    background-size: cover;
    background-position: center;
}

@media (min-width:1000px) {

#slide-1 {
background-position: top;
}

}

/* Verlauf-Overlay */
.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.0) 60%
    );
    pointer-events: none;
}

/* Text bleibt über Overlay */
.slide-overlay {
    position: relative;
    z-index: 2;
}

	
.slideshow {
	position: relative;
	width: 100%;
	height: 100%;
	z-index:5;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 2s ease-in-out;
	z-index: 0;
}

.slide.active {
	opacity: 1;
	z-index: 1;
}


.herobuttons {
	flex: 2;
	max-width: 400px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.herobuttons a {
	padding: 0.5rem 1rem;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: var(--rounded);
}


.slider-pagination {
  position: absolute;
  bottom: 8em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 2000;
}

.slider-pagination .dot {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0 0.3s ease;
  cursor: pointer;
}

.slider-pagination .dot.active {
  opacity: 1;
  background-color: var(--color-lightgreen);
}

.bewertungenumgebend {
background-color: var(--color-darkgreen);
 color:#fff;

 padding-block: var(--padding-block);
}
.bewertungen {
width: 45%;
height: auto;
margin:0 auto;
background-color: var(--color-darkgreen);

}




.bewertungsslider {
padding-top:50px;

padding-bottom:50px;

}
.bewertungenumgebend h2,
.bewertungenumgebend h3 {
color:var(--color-lightgreen);

}
.bewertungen p {
text-align: left;
color:#fff;
}

.bewertungen .slick-list {
width: 75%;
margin: 0 auto;
}



.bewertungenumgebend {
background-image: url("../../media/startseite-6.png");
background-size: contain;
background-position: left;
background-repeat: no-repeat;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 40px;

}

.bewertungen .sterne p {
display: flex;
justify-content: space-between;
align-items: center;
}

.bewertungen .sterne p {
padding: 0;
}

.bewertungen .sterne img {
width: 90px;
height: auto;
}
.bewertungsslider {
    position: relative;
    min-height:290px;
}

.bewertungsslider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.bewertungsslider .slide.active {
    opacity: 1;
    position: relative;
}

/* Pfeile */
.bewertungen .prev,
.bewertungen .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: var(--color-lightgreen);
}

.bewertungen .prev { left: -100px; }
.bewertungen .next { right: -100px; }

.bewertungsslider {
    position: relative;
}

.bwertungsslide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.bwertungsslide.active {
    opacity: 1;
    position: relative;
    z-index: 2;
}
@media (max-width: 1000px) {
.bewertungen {
width: 75%;

}
.bewertungen .prev { left: -60px; }
.bewertungen .next { right: -60px; }
}
@media (max-width: 1350px) {
    section.hero {
        aspect-ratio: 3/1.5; 
    }
    
    section.hero .textrahmen {
    bottom: 6rem;
}

.slider-pagination {
  bottom: 6.5em;
}
}

@media (max-width: 1150px) {
    section.hero {
        aspect-ratio: 3/1.8; 
    }
}

@media (max-width: 950px) {
    section.hero {
        aspect-ratio: 3/2.25; 
    }
}

@media (max-width: 700px) {
    section.hero {
        aspect-ratio: 3/3; 
    }
    
   section.hero .textrahmen {
    width: 75%;
}

    section.hero .textrahmen {
    bottom: 4.5rem;
}

.slider-pagination {
  bottom: 6.25rem;
}

section.hero .textrahmen h1 {
    letter-spacing: -0.1rem;
    line-height: 95%;
    padding-bottom: 0.15rem;
}

section.hero .textrahmen h2 {
    font-size: 1.15rem;
}
}

@media (max-width: 600px) {
    section.hero {
        aspect-ratio: 2/2.8; 
    }
section.hero .textrahmen {
    width: 95%;
}
    section.hero .textrahmen h1 {
    font-size: 2.3rem;
}
}



.pilleWrapper {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 10;
  margin-top: -47px;
}

.pilleInner {
  display: flex;
  align-items: center;
  gap: 0; /* Kein Gap mehr nötig */
  background: #9bbd63;
  border-radius: 999px;
  padding: 17px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.pilleItem {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 37px;
}

.pilleItem:not(:last-child) {
  border-right: 3px solid var(--color-darkgreen);
}

/* Icons und Text */
.pilleItem img{
  height: 52px;
  width: auto;
}

.pilleItem p {
  margin: 0; 
  font-size: 1.2rem;
  line-height: 1.1;
  font-weight: 600;
}


@media (max-width: 1350px) {
  .pilleItem {
    padding: 0 25px; /* Reduzierter seitlicher Abstand */
    gap: 12px; /* Kleinerer Abstand zwischen Icon und Text */
  }

  .pilleItem img {
   height: 45px !important; /* Kleinere Icons */
  }

  .pilleItem p {
    font-size: 1.1rem; /* Kleinere Schrift */
  }
}



@media (max-width: 1050px) {

 .pilleItem:first-child {
    padding-left: 25px; /* Größerer Abstand links */
  }
  
   .pilleItem img {
   height: 40px !important; /* Kleinere Icons */
  }


  .pilleItem {
    padding: 0 10px;
    justify-content: center; /* Icons zentrieren */
  }

  .pilleItem p {
    font-size: 0; /* Text "unsichtbar" machen (aber Icon bleibt) */
    width: auto; /* Icon braucht Platz */
  }

  .pilleItem img {
    margin: 0 auto; /* Icon zentrieren */
  }

  .pilleItem:not(:last-child) {
    border-right: none;
  }
  .pilleWrapper {
  margin-top: -38px;
}
  
}




main section:first-child {
    padding-top: clamp(5.5rem, 6vw, 6rem);
}

main section:last-child {
    padding-bottom: clamp(5rem, 8vw, 8rem);
}



.mod-multigrid {
    width: 100%;
    padding-block: var(--padding-block);
}

.mod-multigrid.bg-light {
    background: var(--color-bg);
}

.mod-multigrid.bg-dark {
    background: var(--color-darkgreen);
}

.mod-multigrid.bg-dark h2 {
    color: var(--color-lightgreen);
       font-weight: 600 !important;
}

.mod-multigrid.bg-green {
    background: var(--color-lightgreen);
}

.mod-multigrid__intro {
    margin-bottom: var(--padding-block-small);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0;
}



.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: nowrap; /* Standard: Kein Umbruch */
    margin: 0 auto;
    padding-top: clamp(2rem, 5vw, 3rem);
    
}

.partner-logo {
    flex: 0 0 auto; /* Standard: Logos behalten ihre Größe */
}

.partner-logo img {
    height: 160px;
    width: auto;
    display: block;
    object-fit: contain;
}


/* Ab 1000px: 2x2-Grid (2 Zeilen mit je 2 Logos) */
@media (max-width: 1200px) {
       .partner-logo img {
        height: 130px; /* Kleinere Höhe */
    }
}

/* Ab 1000px: 2x2-Grid (2 Zeilen mit je 2 Logos) */
@media (max-width: 1000px) {
    .partner-logos {
        flex-wrap: wrap; /* Ermöglicht Umbruch */
        gap: 30px; /* Kleinerer Abstand für 2x2 */
    }
}

/* Ab 768px: Logos skalieren kleiner, aber bleiben im 2x2-Grid */
@media (max-width: 768px) {
    .partner-logo img {
        height: 120px; /* Kleinere Höhe */
    }
}

/* Optional: Noch kleinere Bildschirme (z. B. 480px) */
@media (max-width: 480px) {
    .partner-logo img {
        height: 90px; /* Noch kleinere Höhe */
    }
}


/* 3 Spalten */
@media (max-width: 1100px) {
    .features {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2 Spalten */
@media (max-width: 700px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
}

.features {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    max-width: 105ch;   /* begrenzt die Gesamtbreite */
    margin: clamp(50px, 5vw, 80px) auto 0;
}

.features .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.features .feature img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 20px;
}

.features .feature h4 {
    margin: 0;
}

/* 3 Spalten */
@media (max-width: 1200px) {
    .features {
gap: 50px 15px;
}
}

/* 3 Spalten */
@media (max-width: 1100px) {
    .features {
        grid-template-columns: repeat(3, 1fr);
    }
    .features .feature img {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}
}

/* 2 Spalten */
@media (max-width: 700px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
}



.mod-multigrid__grid {
    display: grid;
    gap: clamp(30px, 3vw, 35px);
    align-content: start;
    align-items: stretch;
}

.mod-multigrid__grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mod-multigrid__grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.mod-multigrid__grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Item */
.mod-multigrid__item {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    height: 100%;
}

/* Wrapper für klickbare Kachel */
.mod-multigrid__linkwrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
}

/* Bild */
.mod-multigrid__image {
    margin: -27px -27px 0 -27px;
    overflow: hidden;
}

.mod-multigrid__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    aspect-ratio: 3/2;
}

/* Text */
.mod-multigrid__text {
   padding: clamp(25px, 3vw, 35px);
   padding-top: clamp(23px, 2.8vw, 33px);
    flex-grow: 1;
    background: var(--color-white);
}


/* Button unten fixiert */
.mod-multigrid__item .btn-lightgreen {
    display: inline-block;
    width: fit-content;
    margin-top: -20px;
    margin-left: clamp(24px, 3vw, 34px);
    margin-right: clamp(25px, 3vw, 35px);
    margin-bottom: clamp(26px, 3vw, 36px);
}

/* Dark Mode */
.mod-multigrid.bg-dark .mod-multigrid__text {
    background: var(--color-white);
}


.mod-content-box__inner p {
    max-width: 80ch;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .mod-multigrid__grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .mod-multigrid__grid {
        grid-template-columns: 1fr !important;
    }

    .mod-multigrid__image {
        margin: -25px -25px 0 -25px;
    }
}



.mod-content-box {
    padding-block: var(--padding-block);
    display: flex;
    justify-content: center;
    align-items: center;
}

.mod-content-box__inner {
    text-align: center;
}

.mod-content-box[style*="#2B4321"] .mod-content-box__inner :not(.btn-lightgreen),
.mod-content-box[style*="#2B4321"] .mod-content-box__inner :not(.btn-lightgreen) * {
    color: #9FBF5F !important;
}

.mod-content-box[style*="#2B4321"] .mod-content-box__inner .btn-lightgreen {
    color: #2B4321 !important;
}

.mod-content-box[style*="#2B4321"] .mod-content-box__inner a:not(.btn-lightgreen) {
    color: #9FBF5F !important;
}

.mod-content-box[style*="#2B4321"] .mod-content-box__inner h2 {
    font-weight: 600 !important;
    color: #9FBF5F;
}



/* Hintergrund bis zum Rand */
.footerModulWrapper {
    background-color: var(--color-darkgreen);
    width: 100%;
    margin: 0;
    padding: clamp(2.5rem, 2.5vw + 1rem, 4rem) 0;
}

/* GRID statt FLEX */
.footerModulInner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5rem;
}

.footerKachel {
    /* nix nötig hier */
}

.footerModulWrapper,
.footerModulWrapper * {
    color: var(--color-lightgreen);
    font-weight: 500;
}

.footerModulWrapper .btn-lightgreen {
     margin-top: clamp(5px, 1.5vw, 21px);
}

/* Tablet: 1 + 2 Layout */
@media (max-width: 1400px) {
   .footerModulInner {
    gap: 3rem;
}
}

/* Tablet: 1 + 2 Layout */
@media (max-width: 1300px) {
    .footerModulInner {
        grid-template-columns: 1fr 1fr;
    }

    .footerKachel:nth-child(1) {
        grid-column: 1 / -1;
    }
    
    .footerModulInner {
    gap: 2rem;
}
}

/* Mobile: alles untereinander */
@media (max-width: 800px) {
    .footerModulInner {
        grid-template-columns: 1fr;
    }

    .footerKachel:nth-child(1) {
        grid-column: auto;
    }
    
     .footerKachel:first-child img {
    width: 310px;
    height: auto;
}
}

/* Mobile: alles untereinander */
@media (max-width: 470px) {
   
     .footerKachel:first-child img {
    width: 300px;
    height: auto;
}
 .footerModulInner {
    gap: 1rem;
}
}






header header.scrolled .nurm {
	display: none;
}



.publishnews a[rel="lightbox"] {
	flex: 0 0 auto;
}

a[rel="lightbox"] {
	display: inline-block;
	margin: 0.5rem;
	vertical-align: top;
	text-align: center;
}

a[rel="lightbox"] img {
	display: block;
	max-width: 100%;
	height: auto;
}



.galerie {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  gap: 0;
}

.galerie > a {
  width: calc(100% / 3);
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Wichtig: Verhindert, dass das Bild über den Rahmen hinausragt */
  transition: all 0.3s ease;
}

.galerie > a img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Bild füllt den Rahmen aus (keine Verzerrung) */
  display: block;
  transition: transform 0.5s ease; /* Sanfter Zoom-Effekt */
}

/* Zoom-Effekt beim Hovern (Bild wird leicht vergrößert) */
.galerie > a:hover img {
  transform: scale(1.1); /* 10% Vergrößerung */
}

/* Optional: Overlay-Effekt (dunkler Schleier) */
.galerie > a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.galerie > a:hover::after {
  opacity: 1;
}

/* Tablets - 2 Bilder pro Zeile */
@media (max-width: 992px) {
  .galerie > a {
    width: calc(100% / 2);
  }
}






/* =====================================================================
   Fewo-Slider (2-Spalten Layout + Slider mit Thumbnails)
   ===================================================================== */
section.inhalt2spalten.fewoslider {
  background: transparent;
  margin-bottom: var(--padding-block);
}

section.inhalt2spalten.fewoslider .container {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(1.75rem, 5vw, 2.5rem);
  padding-bottom: clamp(1.35rem, 5vw, 2rem);
}

/* Spaltenverhältnis */
section.inhalt2spalten.fewoslider .spalte1 {
  flex: 1.2;
}

section.inhalt2spalten.fewoslider .spalte2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Mobile: Spalten untereinander */
@media (max-width: 1100px) {
  section.inhalt2spalten.fewoslider .container {
    flex-direction: column;
    gap: 3rem;
    align-items: flex-start;
  }

  section.inhalt2spalten.fewoslider .spalte1,
  section.inhalt2spalten.fewoslider .spalte2 {
    flex: unset;
    width: 100%;
    display: block;
  }

  section.inhalt2spalten.fewoslider .spalte1 { order: 2; }
  section.inhalt2spalten.fewoslider .spalte2 { order: 1; }
}

/* =====================================================================
   Haupt-Slider
   ===================================================================== */
.fewoslick {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #eee;
}

@media (max-width: 1100px) {
  .fewoslick {
    aspect-ratio: 4 / 3;
  }
}

.fewoslick .divimg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity .5s ease, transform .6s ease;
}

.fewoslick .divimg.active {
  opacity: 1;
  transform: scale(1);
}

.fewoslick .divimg a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pfeile */
.fewoslick .fe-ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(45px, 6vw, 53px);
  height: clamp(45px, 6vw, 53px);
  border: 0;
  cursor: pointer;
  border-radius: 100px;
  background: var(--color-lightgreen);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 5;
}

.fewoslick .fe-ctrl i {
  font-size: clamp(1.2rem, 2vw + 0.5rem, 1.3rem);
  line-height: 1;
}

.fewoslick .fe-prev {
  left: 14px;
}

.fewoslick .fe-next {
  right: 14px;
}

.fewoslick .fe-ctrl svg {
  width: 24px;
  height: 24px;
}

/* =====================================================================
   Thumbnails (korrigiert)
   ===================================================================== */
.slider-nav {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.5rem;
  scrollbar-width: none;
  padding-bottom: 0.5rem; /* Platz für Scrollbar */
}

.slider-nav::-webkit-scrollbar {
  display: none;
}

.slider-nav > div {
  flex: 0 0 110px; /* Standardgröße für Mobile */
  aspect-ratio: 3 / 2; /* Behält Seitenverhältnis bei */
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, box-shadow 0.2s, transform 0.2s;
  border-radius: 4px;
}

/* Desktop-Anpassung */
@media (min-width: 1200px) {
  .slider-nav > div {
    flex: 0 0 90px; /* Kleinere Thumbnails auf Desktop */
  }
}

.slider-nav > div:hover {
  opacity: 0.95;
  transform: translateY(-2px);
}

.slider-nav > div.active {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--color-lightgreen) inset;
}

/* Bilder in Thumbnails sichtbar machen */
.slider-nav > div img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}




nav ul {
	gap: 2rem;
}

}

.nurm {
	display: none;
}

.nurd,
.mnicht {
	display: block;
}

.search-toggle {
	position: relative;
	display: flex;
	align-items: center;
}

.search-icon {
	background: #eee;
	border: none;
	border-radius: var(--fieldbuttonrounded);
	width: 2.2rem;
	height: 2.2rem;
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	transition: background 0.3s ease;
	background-color: var(--color-primary);
}

.search-icon:hover {
	background: #ccc;
}

.search-field {
	width: 0;
	opacity: 0;
	transition: all 0.3s ease;
	padding: 0.4rem;
	border: 1px solid #ccc;
	border-radius: var(--fieldbuttonrounded);
	font-size: 1rem;
	outline: 0;
	font-size: 1.0rem;
	height: 1.8rem;
	padding-right: 0rem;
	padding-left: 0rem;
	margin-right: 0rem;
}

.search-field.visible {
	width: 200px;
	opacity: 1;
	margin-left: 0.5rem;
	padding-right: 1rem;
	padding-left: 1rem;
	margin-right: 1rem;
}

.news-filter {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.news-filter button {
	background: #eee;
	border: none;
	border-radius: var(--fieldbuttonrounded);
	width: auto;
	height: 2.6rem;
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color:var(--color-bg);
	transition: background 0.3s ease;
	background-color: var(--color-primary);
	padding-right: 1rem;
	padding-left: 1rem;
	font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
}

.news-filter button:hover {
	background-color: var(--color-darkgreen);

	color: var(--color-grey);
}

.custom-select {
	position: relative;
	width: 160px;
	cursor: pointer;
	font-size: 14px;
	user-select: none;
}

.custom-select .selected {
	padding: 10px 12px;
	border: 1px solid #ccc;
	background-color: #fff;
	border-radius: 5px;
}

.custom-select .options {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10;
	background: #fff;
	border: 1px solid #ccc;
	border-top: none;
	display: none;
	max-height: 200px;
	overflow-y: auto;
}

.custom-select .options div {
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
}

.custom-select .options div:hover,
.custom-select .options .active {
	background-color: #f0f0f0;
}

.custom-select.open .options {
	display: block;
}


.kontaktformular-wrapper {
  display: flex;
  justify-content: center;
  margin:0rem auto;
}

.kontaktformular-inhalt {
  display: flex;
  gap: 2rem;
  width: 100%;
  max-width: 1600px;
  margin: auto;
  padding-top: 1rem;
  flex-wrap: nowrap; /* nebeneinander erzwingen */
}

.kontaktformular-links,
.kontaktformular-rechts {
  background-color: #d4d5be;
  padding: 2.5rem;
  border-radius: 1rem;
  box-sizing: var(--medium-rounded);
  min-width: 0; /* verhindert Überlauf bei langem Inhalt */
}

/* 25% : 75% Verteilung */
.kontaktformular-links {
  flex: 1 1 35%;
}

.kontaktformular-rechts {
  flex: 1 1 65%;
}

.kontaktformular-links h2 {
  color: var(--color-darkgreen);
  padding-top: 0rem;
  margin-top: -1rem;
  padding-bottom: 0.7rem;
}

.kontaktformular-rechts h2 {
  color: var(--color-darkgreen);
  padding-top: 0rem;
  margin-top: -0.5rem;
  padding-bottom: 1rem;
}

.kontaktformular-rechts p {
 padding-bottom: 0.2rem;
 margin-bottom: 0rem;
 margin-top: 0rem;
}

.kontaktformular-links .wysiwyg {
  font-size: 1rem;
  line-height: 1.6;
}
.kontaktformular-rechts .yform label {
margin-bottom: 0.1rem;
display:block;
}
.kontaktformular-rechts .yform input[type="text"],
.kontaktformular-rechts .yform textarea {
  border: 2px solid #f2a900;
  border-radius: var(--fieldbuttonrounded);
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size:1.0em;
  box-sizing:border-box;
}

.kontaktformular-rechts .yform .checkbox {
  margin-bottom: 1rem;
}

.yform .btn,
.yform button {
		font-family: 'Roboto', sans-serif;
  display: inline-block;
  background-color: var(--color-yellow);
  color: white;
  font-weight: 500;
  padding: 0.8em 1.3em;
  border: none;
  border-radius: var(--fieldbuttonrounded);
  transition: background-color 0.2s ease;
  text-decoration: none;
  cursor: pointer;
width:300px;
  	letter-spacing: var(--standard-letter-spacing);
  	
}

.form-group.submitbutton {
   justify-self: end;
   text-align:right;
}

.form-group.submitbutton button {
  display: inline-block;
}

.kontaktformular-rechts .yform .btn:hover {
  background-color: #c98c00;
}

.anmeldeformular-wrapper {
  
  padding: 2rem;
  
  max-width: 1200px;
  margin: 2rem auto;
  box-sizing: border-box;
  font-family: inherit;
}

.anmeldeformular-wrapper > div {
  padding: 2rem;
    background-color: #d4d5be;
    border-radius: var(--medium-rounded);
}

.anmeldeformular-kopf {
  margin-bottom: 2rem;

}

.anmeldeformular-kopf h2 {
  margin: 0 0 0.5rem;


}

.anmeldeformular-kopf p {
  margin: 0;
}

.anmeldeformular-infos {
  margin-bottom: 2rem;
}

.anmeldeformular-infos h3 {

  margin: 0 0 0.5rem;

}

.anmeldeformular-infos p {
  margin: 0;
}

.anmeldeformular-formular form.yform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:2rem;
}

.anmeldeformular-formular .form-group,
.anmeldeformular-formular .yform-element {
  display: flex;
  flex-direction: column;
  grid-column: span 1;
}

.anmeldeformular-formular .form-group input,
.anmeldeformular-formular .form-group textarea,
.anmeldeformular-formular .form-group select {
  border: 2px solid #f2a900;
  font-size: var(--standard-font-size);
  font-family:var(--font-main);
  letter-spacing: var(--standard-letter-spacing);
  border-radius: var(--fieldbuttonrounded);
  width: 100%;
  padding: 0.75rem;
  margin-bottom: -0.3rem;
  font-size: 1.0em;
  box-sizing:border-box;
  
}


.yform.jagd-anmeldung .form-group {
  margin-bottom: -0.8rem; /* Standard oft 1.5–2rem */
}


.anmeldeformular-formular .yform-element.fullwidth {
  grid-column: span 2;
}

.anmeldeformular-formular .checkbox {
  grid-column: span 2;
  margin-top: -2rem;
}

.anmeldeformular-formular p {
  margin-top: 0.4rem;
}



.anmeldeformular-wrapper > div.anmeldeformular-footer {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-start;
  background-color:transparent;
  padding-left:0;
}

.anmeldeformular-footer .btn.zurück {
  background-color: #f2a900;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 1rem;
}

.anmeldeformular-footer .btn.zurück:hover {
  background-color: #c98c00;
}

@media (max-width:800px) {

.kontaktformular-inhalt {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 1600px;
  margin: auto;
  padding-top: 1rem;
  flex-wrap: nowrap; /* nebeneinander erzwingen */
}

.anmeldeformular-formular form.yform {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
}
.news-filter {
  display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; margin:0 0 1rem 0;
}
.news-filter .jahrmonat { display:flex; gap:.5rem; }
.news-filter select,
.news-filter input[type="text"] { padding:.5rem .75rem; border:1px solid #ccc; border-radius:.5rem; }
.news-filter .search-toggle { display:flex; gap:.5rem; align-items:center; }
.news-filter .search-toggle .search-field { transition: max-width .2s ease; max-width: 14rem; }
.news-filter .search-toggle .search-field:not(.visible) { max-width: 10rem; }
.news-filter .reset-link { text-decoration: underline; font-size:.9rem; }

.pagination { list-style:none; display:flex; gap:.5rem; padding:0; margin:1.25rem 0; }
.pagination li a { display:block; padding:.4rem .7rem; border:1px solid #ccc; border-radius:.4rem; text-decoration:none; }
.pagination li a.active { background:#2F7E33; color:#fff; border-color:#2F7E33; }
.nice-select .option  {
background-color:var(--color-bg);
}
.sort-toggle {


  color:var(--color-bg);
}
.sort-button {
  display:inline-block;
  padding:1rem 1rem;
  border:0px solid #ccc;
  border-radius:.5rem;
  text-decoration:none;
  	border-radius:var(--medium-rounded);
  	  background-color: var(--color-darkgreen);
}
.sort-button:hover {
  background: var(--color-primary);
  color:#fff;
}
.sort-toggle{  }
.sort-button{ display:inline-block; padding:.8rem 1.4rem; border:1px solid #ccc; border-radius:.5rem; text-decoration:none;
	font-family: 'Roboto', sans-serif; font-size:16px; font-weight:400; }
.sort-button:hover{ background:var(--color-primary); color:#fff; }

@media (max-width: 800px) {
	.anmeldeformular-wrapper > div {
		padding: 1.5rem;
		background-color: var(--color-fadegreen);
		border-radius: var(--medium-rounded);
	}

  .anmeldeformular-formular form.yform {
    grid-template-columns: 1fr; /* nur eine Spalte */
  }

  .anmeldeformular-formular .form-group,
  .anmeldeformular-formular .yform-element {
    grid-column: span 1 !important; /* volle Breite */
  }

  .anmeldeformular-formular .yform-element.fullwidth,
  .anmeldeformular-formular .checkbox {
    grid-column: span 1 !important; /* auch diese untereinander */
  }

  .anmeldeformular-formular button[type="submit"] {
    grid-column: span 1 !important;
    justify-self: stretch; /* Button über volle Breite */
  }
.anmeldeformular-wrapper {
  
  padding: 1.5rem;
  
  max-width: 1200px;
  margin: 0rem auto;
  box-sizing: border-box;
  font-family: inherit;
}

.kontaktformular-links,
.kontaktformular-rechts {
  background-color: #d4d5be;
  padding: 2.5rem 1.5rem;
  border-radius: 1rem;
  box-sizing: var(--medium-rounded);
  min-width: 0; /* verhindert Überlauf bei langem Inhalt */
}
}





main section.pillen-links:first-child {
  padding-top: 0rem !important;
}
main section.pillen-links:last-child {
  padding-bottom: 0rem !important;
}

.pill-link {
  display: inline-flex;           /* Flexbox für bessere Zentrierung */
  align-items: center;            /* vertikal mittig */
  justify-content: center;        /* horizontal mittig */
  padding: 0.8rem 1.3rem;
  border: var(--border-width) solid var(--color-primary);
  background-color: var(--color-bg);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
  margin: 0;
  width: 450px;                   /* feste Höhe für gleichmäßige Buttons */
  box-sizing: border-box;          /* Padding mit einberechnen */
    font-weight: 500;
}
@media (min-width:800px) {
.pill-link:first-child {
  border-radius: var(--fieldbuttonrounded) 0 0 var(--fieldbuttonrounded);
}

.pill-link:last-child {
  border-radius: 0 var(--fieldbuttonrounded) var(--fieldbuttonrounded) 0;
}

/* Optional: Trennlinie dazwischen entfernen, damit sie "zusammenkleben" */
.pill-link + .pill-link {
  border-left: none;
}
}




.pill-link:hover,
.pill-link.active {
  background-color: var(--color-darkgreen);
  color: #fff;
  font-weight: 500;
}


@media (max-width: 800px) {
.pill-link {
  display: block;           /* Flexbox für bessere Zentrierung */
  align-items: center;            /* vertikal mittig */
  justify-content: center;        /* horizontal mittig */
  padding: 0.8rem 1.3rem;
  border: var(--border-width) solid var(--color-primary);
  background-color: var(--color-bg);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
  margin: 0;
  width: 450px;                   /* feste Höhe für gleichmäßige Buttons */
  box-sizing: border-box;          /* Padding mit einberechnen */
  margin-bottom:20px;
  border-radius: var(--fieldbuttonrounded);
  margin-right:auto;
  margin-left:auto;
}

}


@media (max-width: 800px) {

	.nurm {
		display: block;
	}
	
	.nurd,
	.mnicht {
		display: none;
	}
	
	main section.news {
		padding: 3rem 1.5rem 3em 1.5rem;
	}

	.news-article-content p br {
		display: block;
	}
	main section:first-child {
		padding-top: 3rem;
	}
	.open header {
		height: auto;

	}

	header .curved-header {

		height: 150px;
	}

	.slide-overlay p:not(.headerButtons) {
  		font-weight: 500;
  		font-size: 1.0rem;
  		margin-top: 0.7rem;
  		margin-bottom: 0.7rem;
	}

	.headerButtons a.instagram, 
	.headerButtons a.mail {
	  display: inline-flex;
	  justify-content: center;
	  align-items: center;
	  width: 36px;
	  height: 36px;
	  background-color: var(--color-darkgreen);
	  text-decoration: none;
	  margin-right: 0.4rem;
	  border-radius: var(--fieldbuttonrounded);
	  padding: 0;
	  color: white;
	  transition: background-color 0.3s ease;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
	}
	
	.headerButtons a.instagram:hover,
	.headerButtons a.mail:hover {
	  background-color: var(--color-dark-darkgreen);
	}
	
	.headerButtons a.instagram i {
	  font-size: 1.6rem;
	}
	
	.headerButtons a.mail i {
	  font-size: 1.5rem;
	}


	header.scrolled .curved-header {

		height: 120px;
	}

	body.open header .curved-header {

		height: auto;
		height: 100vh;
	}

	body.open header.scrolled .curved-header {

		height: 100vh;
	}

	.service-search input[type="text"] {
		font-size: 16px;
		padding: 0;
	}

	.service-search input[type="text"].active {
		opacity: 1;
		width: 180px;
		padding: 8px;
	}

	body.searchopen div.servicelinks .service-inner>a {
		display: none;
	}

	body.searchopen div.servicelinks .service-inner>a.telefon {
		display: block;
	}




	span.strich {
		display: none;
	}

	.nurm {
		display: block;
	}


	.logo-container {
		align-items: center;
		position: absolute;
		z-index: 5;
		width: 200px;
	}


	.logo-container svg {
		width: 180px;
		height: 90px;
	}


	.headerinner-right {
		flex: 1;
		align-items: center;
		text-align: right;
		gap: .3rem;
		padding-top: 0;
		width: 100%;
		justify-content: start;
	}

	.open header {}

	.open .headerinner-right {
		height: auto;
		height: 100vh;
	}


	nav {
		display: flex;
		flex-direction: column;
		width: 100%;

		max-height: 0;
		overflow: hidden;
		gap: 0;
		position: relative;
		transition: max-height 0.5s ease;
	}

	nav.open {
		max-height: 500px;
		margin-top: 650px;
		background-color:var(--color-bg);
		padding-bottom:20px;
		border-radius:var(--medium-rounded);
	}


	.burger {
		display: block;
		margin-top: 1.5rem;
		margin-right: 0;
	}
	
	.open .header-inner {
		height:110px;
	
	}
	
	.open .logo-container {
		height:110px;
	
	}

	nav ul {
		display: block;
		width: 80%;
		margin: 2rem auto 0;
		padding: 0;
		list-style: none;
		list-style-type: none;
	}

	nav ul li {
		display: block;
		margin-bottom: 1rem;
		text-align: left;
	}

	nav li a {
		display: block;
		padding: 0.5rem 1rem;
		border-bottom: 1px solid var(--color-white);
		font-size: 1.5rem;
		text-align: left;
		color: var(--color-white);
		border-bottom: 0px solid transparent;
	}

	nav a.active,
	nav a:hover {
		border-bottom: 0px solid var(--color-primary);
	}

	nav a:last-child {
		border-bottom: 0px solid var(--color-primary-lighter);
	}
	nav > ul > li > a {
		border-bottom: 0px solid var(--color-primary-lighter);
	
	}
	nav > ul > li > a:hover, nav > ul > li > a.rex-active, nav > ul > li > a.rex-current {
		border-bottom: 0px solid var(--color-primary-lighter);
		background-color:var(--color-lightgreen-hover);
		color:var( --color-darkgreen);
	}
nav li:has(ul) > a::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.5em;
  background-color: currentColor;

  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}



	nav .mobile-back-button {
		display: none;
		position: absolute;
		top: 0;
		left: 1rem;
		width: 80%;
		padding: 1rem;
		font-size: 1rem;
		background: transparent;
		;
		border: 0px solid var(--color-white);
		border-radius: 10px;
		z-index: 1600;
		cursor: pointer;
		text-align: left;
	}

	nav.submenu-active .mobile-back-button {
		display: block;
	}


	nav.submenu-active ul.rex-navi1 {
		transform: translateX(-120%);
		opacity: 1;
		pointer-events: none;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}


	nav ul.rex-navi2 {
		opacity: 0;
		pointer-events: none;
		transform: translateX(100%);
		transition: transform 0.3s ease, opacity 0.3s ease;
		position: absolute;
		top: 30px;
		left: 0;
		width: 100%;
		background-color: var(--color-bg, white);
		z-index: 2000;
		padding-left: 1rem;
	}


	nav.submenu-active ul.rex-navi2.nav-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateX(103%);
		z-index: 2000;
		background-color: #fff;
		border-radius: 10px;
		padding-top: 1rem;
		padding-right: 1rem;
	}


	
	section.news .inhalt2spalten.beitrag-kachel {
	margin-bottom:0;
	}	 
	
	.inhalt2spalten.beitrag-kachel > .spalte.text-spalte {
		flex: 1;
		padding: 1.5rem;
		background-color: var(--color-fadegreen);
		width:100%;
		box-sizing:border-box;
}
.inhalt2spalten.beitrag-kachel > .spalte.text-spalte .innerspalte {
width:90%;
}

	.news-wrapper {
		padding: 2rem 1rem 6rem 1rem;
	}

	.news-section {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: space-between;
	}

	section.news-wrapper-before {
		content: "";
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 35px;

		background-size: 102% 35px;
		display: block;
		z-index: 14;
		margin-top: -35px;
	}


	.gridinfo {
		max-width: 1800px;
		width: 100%;
		padding: 0rem 0 1rem 0;
		font-size: 1.2rem;
		line-height: 1.6;
	}



	.news-card {
		width: 100%;
	}

	.news-card:first-child .news-title {
		font-size: 1.5rem;
	}


	.shortcut-tile:hover {
		transform: scale(1.05) translateY(-5px);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	}





		.auflistung {
		display:flex;
		gap:1rem;
		justify-content: space-between;
		flex-direction:column;
		flex-wrap: wrap;
		max-width:1600px;
		margin:auto;
		}
		
		.listelement {
		  background-color: var(--color-fadegreen);
		  border-radius: var(--medium-rounded);
		  overflow: hidden;
		  display: inline-flex;
		  flex-direction: column;
		  justify-content: flex-start;
		  height: auto;
		  width: 100%;
		  margin: 30px 0;
		}
		
		
		/* Vorschaubild ganz oben */
		.listelement .vorschaubild {
		  order: 0;
		  width: 100%;
		  height: 350px;
		  background-size: cover;
		  background-position: center;
		  flex-shrink: 0;
		}
		
		/* Überschrift */
		.listelement h3 {
		  order: 1;
		  color: var(--color-darkgreen);
		  padding: 0 1.5rem;
		  text-align: left;
		  padding-top: 1rem;
		  padding-bottom: 2.5rem;
		}
		
		/* Datum unterhalb der Überschrift */
		.listelement .datum {
		  order: 2;
		  padding: 0.3rem 2rem 0 2rem;
		  color: var(--color-darkgreen);
		  margin: 0 0 -3.2rem 0;
		  background: none;
		  text-align: left;
		  font-weight: 500;
		}
		
		/* Anlesetext ausblenden */
		.listelement p:not(.derbutton) {
		  display: none !important;
		}
		
		/* Button-Position (ganz unten, rechtsbündig) */
		p.derbutton {
		  order: 3;
		  margin: 0 1rem 1rem auto;
		  padding: 1rem;
		  padding-top: 0;
		  text-align: right;
		}
}


body.altpressed nav a:focus {

	border-radius: 0px;
}


body.altpressed a:focus,
body.altpressed button:focus,
body.altpressed input:focus,
body.altpressed select:focus,
body.altpressed i:focus,
body.altpressed .klappgruppe h3.klapp:focus,
.zumachen:focus,
.grid .elem a:focus {
	outline: 2px solid #ff0000 !important;
	outline-offset: 2px !important;
}

body.altpressed .grid .elem a:focus,
body.altpressed .slideshow a:focus {
	border: 2px solid #ff0000 !important;
	outline-offset: 2px !important;
}

iframe select:focus {
	outline: 2px solid #000 !important;
	outline-offset: 2px !important;
}


@media screen and (max-width:800px) {
	.inhalt2spalten.beitrag-kachel {
		flex-direction: column;
	}

	.inhalt2spalten.beitrag-kachel .bild-spalte {
		min-height: 200px;
	}
}


.slideshowundtext {
  margin-bottom: 0rem;
  margin-top: -4.5rem;
}

.modul-bereich {
  display: flex;
  flex-direction: row;
  gap: 5rem;
}

.modul-bereich.modul-position-rechts {
  flex-direction: row;
}

/* Text rechts, Slider links */
.modul-bereich.modul-position-links {
  flex-direction: row;
}

/* Standard (falls kein Wert) */
.modul-bereich {
  display: flex;
  gap: 2rem;
}

/* Rechtes Textfeld */
.bereich {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bereich.modul-text-bereich {
  flex: 1 1 35%;
}

.bereich.modul-text-bereich .innerspalte {
width:70%;

}

.modul-bereich.modul-position-rechts .bereich.modul-text-bereich {

padding-left:7rem;

}

.modul-bereich.modul-position-links .bereich.modul-text-bereich {

padding-left:4rem;

}


.modul-bereich.modul-position-rechts .bereich.modul-text-bereich .innerspalte {
width:70%;

}


.bereich.modul-slideshow-bereich {
  flex: 1 1 45%;
  overflow: hidden; /* verhinder Überlauf der Slides */
  max-height:800px;
}

/* Slideshow-Wrapper – Scroll-Container */
.modul-slideshow-wrapper {
  display: flex;
  flex-direction: row; /* aktives Slide rechts */
  gap: 0rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  scroll-padding-inline-end: 0rem;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  flex-direction: row;
}

.modul-slideshow-wrapper::-webkit-scrollbar {
  display: none;
}

/* Slides */
.modul-slide {
  flex: 0 0 78%; /* 80% Breite, 20% Vorschau möglich */
  scroll-snap-align: end; /* rechts ausrichten */
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
  position: relative;
  margin-left:2em;
  margin-right:0rem;
  transition: 1s ease;
}

.modul-slide-image img {
  width: 100%;
  height: auto;
  display: block;

}

.modul-slide-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 2rem 4rem 2rem 2rem;
  background-color: var(--color-primary);
  color: #fff;
  z-index: 2;
  box-sizing: border-box;
}

.modul-slide-text h2 {
 color: var(--color-bg);
 margin-bottom: .2rem;
 font-weight: 600;
 font-size: 1.5rem;
 margin-top: 0;
}

.modul-slide-text p {
 color: var(--color-bg);
  margin-bottom: 0.1rem;
  margin-top: 0.1rem;
}


/* Steuerung */
.slide-controls {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}

.slide-controls button {
  background: var(--color-yellow);
  border: none;
  color: #fff;
  font-size: 1.4rem;
  padding: 1rem 1.3rem 0.8rem 1.3rem;
  border-radius: 8px;
  cursor: pointer;
  transition: .5s ease;
}

.slide-controls button:hover {
  background: var(--color-darkyellow);
}

/* Mobile Optimierung */
@media (max-width: 800px) {
  .modul-bereich {
    flex-direction: column;
  }

  .bereich {
    flex: 1 1 100%;
  }

  .modul-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .modul-slideshow-wrapper {
    flex-direction: row;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 1rem;
  }
}
/* Mobile Optimierung */
@media (max-width: 800px) {
  .modul-bereich {
    flex-direction: column; /* untereinander statt nebeneinander */
    gap: 2rem; /* etwas Abstand zwischen den Bereichen */
  }
  
  
  
.modul-bereich.modul-position-links {
flex-direction: column;
}

.modul-bereich.modul-position-rechts {
flex-direction: column;
}

  .bereich {
    flex: 0 0 100%; /* volle Breite */
    width: 100%;
    padding-left: 0 !important; /* linke Abstände entfernen */
    padding-right: 0 !important;
  }

  .bereich.modul-text-bereich .innerspalte {
    width: 100%; /* volle Breite für Textinhalt */
    padding-left:1.5rem;
    padding-right:1.5rem;
    box-sizing:border-box;
  }

  .bereich.modul-slideshow-bereich {
    max-height: none; /* keine feste Höhe */
  }

  .modul-slide {
    flex: 0 0 100%;
    margin-left: 0;
    margin-right: 0;
    scroll-snap-align: start;
    height:400px;
  }

  .modul-slide-text {
    padding: 1rem 1.5rem;
  }

  .modul-slideshow-wrapper {
    flex-direction: row;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 1rem;
  }
	.modul-position-links > .modul-slideshow-bereich {
		order:2;
	}

}

input, textarea, button {
	font-family: 'Roboto', sans-serif;

	font-weight: 200;
	font-size: 18px; 
}


#yform-anmeldung_formular-slice_id {
	display:none;
}



/* =========================================================
   GLIGHTBOX – RESPONSIVE (VIDEO PASST IN VIEWPORT)
   ========================================================= */

/* Overlay sauber zentrieren */
#article1 .glightbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding:0!important;
  border-radius:var(--medium-rounded);
}

/* Wichtig: GLightbox Content darf nicht höher als der Viewport werden */
#article1 .glightbox-container .gslide-inner-content,
#article1 .glightbox-container .gslide-media {
  max-height: 100vh !important;
  height:850px!important;
  width:500px!important;
}

#article1 .glightbox-inline-content.ginlined-content {
  height:850px!important;
}

/* =========================================================
   GLIGHTBOX – MOBILE SAFE (ALLES SICHTBAR / SCROLLBAR)
   ========================================================= */

/* Mediencontainer (gslide-media enthält bei dir auch Text) */
#article1 .glightbox-container .gslide-media {
  width: min(800px, 100vw);
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--medium-rounded);
  overflow: visible; /* WICHTIG: nichts abschneiden */
}

/* Text im Popup */
#article1 .glightbox-container .gslide-media p {
  font-size: 18px;
  line-height: 140%;
  margin-bottom: .2rem;
}

/* Bilder */
#article1 .glightbox-container img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Videos & iFrames */
#article1 .glightbox-container iframe,
#article1 .glightbox-container video {
  width: 100%;
  max-width: 100%;
  max-height: 85vh;

  aspect-ratio: 2 / 3; /* falls das Video wirklich Hochkant ist */
  height: auto;

  object-fit: contain;
  border: 0;
}

/* Close-Button */
#article1 .glightbox-container .gclose {
  z-index: 9999;
}

/* =========================================================
   MOBIL: volle Breite + maximale Höhe + Inhalt scrollt
   ========================================================= */
@media (max-width: 768px) {

  /* Der eigentliche sichtbare “Card”-Bereich */
  #article1 .glightbox-container .gslide-content,
  #article1 .glightbox-container .gslide-inner-content {
    width: 100vw;
    max-width: 100vw;
    max-height: 100svh;          /* mobile viewport korrekt */
    padding: 0;
    overflow: hidden;            /* außen sauber */
  }

  /* Hier drin soll alles erreichbar sein */
  #article1 .glightbox-container .gslide-media {
    width: 92vw;
    max-width: 92vw;
    max-height: calc(100svh - 110px); /* Platz für Close/Abstände */
    margin: 0 auto;
    overflow: auto;                 /* ✅ wenn Text länger ist: scroll */
    -webkit-overflow-scrolling: touch;
    border-radius: var(--medium-rounded);
  }

  /* Medien im mobilen Popup etwas niedriger, damit Text noch Platz hat */
  #article1 .glightbox-container iframe,
  #article1 .glightbox-container video,
  #article1 .glightbox-container img {
    max-height: 60svh;
  }
}