@font-face {
  font-display: swap;
}




*{
	font-family: Roboto, Arial, sans-serif !important;

}



a{
	color: var(--color-text-primary);
	text-decoration:underline;
}


.full-bleed-color2 a,
.full-bleed-color1 a{
	color: #FFFFFF;
}

a:hover{
	color: var(--color-secondary);
}

.full-bleed-color2 a:hover,
.full-bleed-color1 a:hover{
	color: var(--color-secondary);
}


body{
	font-family: Roboto, Arial, sans-serif;
	margin:0;
	background-color: var(--color-main-background);
	color: var(--color-text-primary);
	line-height: 1.6;
	
}



h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 1.5rem 0;
  
}

h1{
	 display: block;
	color:var(--color-secondary);
	margin-bottom: 3rem;
	min-height: calc(2.5rem * 1.25); 
	margin-top: 6rem;
}

h2, h3, h4 {
	color:var(--color-text-highlight);
}


h1 { font-size: 2.5rem;  }   /* 40px */
h2 { font-size: 1.8rem; }   /* 28.8px */
h3 { font-size: 1.8rem; }   /* 28.8px */
h4 { font-size: 1.2rem; }   /* 19.2px */



.hero-title {
  font-size: 2.5vw;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0 0;
	
}


.hero-subtitle {
  font-size: 1.25vw;
  line-height: 1.6;
  margin-top: 1.25vw;
}



p, li {
  font-size: 1rem;   /* 16.8px */
  line-height: 1.6;
  margin-bottom:1.25rem;
  margin-top:1.25rem;
}

p + p {
  margin-top: 1.25rem;
}

ul, ol {
  margin: 0 0 1.25rem 1.25rem;
  padding: 0;
}

li {
  margin-bottom: 0.4rem;
}


.block-text-image .inner h2 {
  margin-bottom: 1.5rem;
}


.block-text-image .btn_content {
 /* margin-top: 0.5rem;*/
  margin-top: 1.5rem;
}


.btn_content,
.hero-cta {
  font-size: 1rem;
  display: inline-block;
  margin-top: 1.5rem;
  background: linear-gradient(
  to bottom,
  #e55813 0%,
  #c64510 100%
);

  border:2px solid #c64510;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
}


.btn_content,
.hero-cta{
	
  padding: 0.75rem 1.5rem;
	
}


.hero-cta {
	
	font-size: 1vw;
margin-top: 1.25vw;
padding: 0.75vw 1.5vw;
min-height: 20px;
  min-width: 48px;


}



.hero-top-cta {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(to bottom, #e55813 0%, #c64510 100%);
  text-decoration: none;
  color: #FFFFFF;
  text-align: center;
}

/* Sticky-Version */
.hero-top-cta-wrapper.sticky {
  position: fixed;
  top: -4px;
  right: 2.5vw;
  z-index: 9999;
}


/* Hover-Effekt wie im Overlay */

.hero-cta:hover,
.hero-top-cta:hover,
.btn_content:hover  {
  background: #FFFFFF;
  border:2px solid #c64510;
  color: var(--color-secondary);
}


.block {
	margin: 0 0 3rem 0;
}



@media (max-width: 600px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.8rem; }
  p  { font-size: 1rem; }

  .block-text-image .innerDiv {
    gap: 1.5rem;
	margin: 0 0 2rem 0;
  }
}



nav a.active {
  font-weight: bold;
  color: #c64510;
}






/*
  // ---------------------------------------------------------
  // Blur-Transition PICTURES 
  // ---------------------------------------------------------
*/

.blur-up {
  filter: blur(20px);
  transition: filter 0.4s ease-out;
}

.blur-up.img-loaded {
  filter: blur(0);
}



/*
  // ---------------------------------------------------------
  // BILDER BREITEN
  // ---------------------------------------------------------
*/

.block-text-image img,
.block-contact-box img,
.block-text-image .image picture,
.block-text-image .image img{
  width: 100%;
  height: 100%;
  display: block;
}

picture {
 position: relative;
  display: block;
  line-height: 0;
}

picture img {
  display: block;
  max-width: 100%;
  height: 100%;
  line-height: 0;
}




/*
  // ---------------------------------------------------------
  // FOOTER RENDERING
  // ---------------------------------------------------------
*/


#footer {
  position: relative;
  background: #262B2F;
  color: #fff;
  padding: 0px 0px;
  margin-top: 0px;
}

#footer a{
	color: #fff;
	text-decoration: none;
}

#footer a:hover{
	color: var(--color-secondary);
}

#footer .footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
  padding-top:5rem;
  padding-bottom:5rem;
}


#footer .footer-logo {
  width: 150px;
  margin: 0 auto;
  padding-bottom: 3rem;
}

#footer .footer-logo img {
  width: 150px;
}

#footer .footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  text-align:center;
}

#footer .footer-column {
  flex: 1 1 200px;
}

#footer .footer-column p{
  margin-top: 0px;
}

#footer .footer-column p:first-child{
  line-height: 1.25;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom:1.5rem;
}


#footer .footer-column h4 {
  margin-bottom: 10px;
}

#footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-links li {
  margin: 0.75rem;
  margin-left:0rem;
  padding-left:0px;
}

#footer .footer-links li:last-child {
  margin-bottom:1.5rem;
}

#footer .footer-links li::before {
  display:none;
}

#footer .footer-links a {

  text-decoration: none;
}



#footer .footer-socials {
  display: flex;
  gap: 0.75rem;
  display: inline-flex;
}

#footer .footer-socials img {
  width: 32px;
  height: 32px;
  /*
  filter: brightness(0) invert(1);
  */
  opacity: 0.8;
  transition: opacity 0.2s;
}

#footer .footer-socials img:hover {
  opacity: 1;
}

#footer .footer-bottom {
  margin-top: 3rem;
  color: #FFF;
  text-align: right;
}


/* -----------------------------------------
   Overlay
----------------------------------------- */
.hero-overlay {
	
  position: absolute;
  top: 70%;
  transform: translateY(-70%);
 
  max-width: 35vw;          /* bleibt optisch konstant */
  min-width: 20vw;
	
  
  
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  
  contain: layout paint style;
  
  z-index:100;
  
}

/* Positionierung */
.hero-pos-left  { 

	left: 0%; 
	border-bottom-right-radius: 9999px;
	border-top-right-radius: 9999px;
 
	padding-bottom: 2.5vw;
	padding-top: 2.5vw;
	padding-left: 2.5vw;
	padding-right: 7vw;


	transform: translateY(-70%) translateX(-20vw);
}



.hero-pos-left.visible {
  opacity: 1;
 transform: translateY(-70%) translateX(0);
}



.hero-pos-right { 

	right: 0%;
	border-bottom-left-radius: 9999px;
	border-top-left-radius: 9999px;

	padding-bottom: 2.5vw;
	padding-top: 2.5vw;
	padding-right: 2.5vw;
	padding-left: 7vw;	
	
	transform: translateY(-70%) translateX(20vw);

 }
 
 
 
.hero-pos-right.visible {
  opacity: 1;
  transform: translateY(-70%) translateX(0);
}


@media (max-width: 841px) and (min-height: 650px)  {

  /* Overlay weiter unten + volle Breite */
  .hero-overlay {
    top: auto;
    bottom: 35vw;
    transform: translateY(0);
    width: 100vw;
    max-width: 100vw;
    padding: 4vw;
  }
  
  .hero-pos-right header{
	  margin-left: 14vw;
	  margin-right: 20px;
  }
  
  .hero-pos-left header{
	  margin-left: 20px;
	  margin-right: 14vw;
  }

  /* LEFT bleibt links */
  .hero-pos-left {
    left: 0vw;
    right: auto;
    transform: translateX(-90vw); /* Startposition */
	border-bottom-right-radius: 9999px;
    border-top-right-radius: 9999px;
	padding-right:0px;
	padding-left:0px;
  }

  .hero-pos-left.visible {
    transform: translateX(0); /* Endposition */
  }

  /* RIGHT bleibt rechts */
  .hero-pos-right {
    right: 0vw;
    left: auto;
    transform: translateX(90vw); /* Startposition */
	border-bottom-left-radius: 9999px;
    border-top-left-radius: 9999px;
	padding-right:0px;
	padding-left:0px;
	
  }		

  .hero-pos-right.visible {
    transform: translateX(0); /* Endposition */
  }

  /* Mobile Typografie */
  .hero-title {
    font-size: 5vw;
  }

  .hero-subtitle {
    font-size: 3.5vw;
    margin-top: 2vw;
  }

  .hero-cta {
    font-size: 3.5vw;
    padding: 2.5vw 4vw;
    margin-top: 3vw;
    border-width: 0.4vw;
  }
  
  
	
  
}






/* Optionaler Hintergrund */
.hero-bg {
  background: var(--color-secondary);
  color: #FFFFFF;
}

.hero-bg-dark{
  background: var(--color-primary);
  color: #FFFFFF;
}

/* Dark Mode */
.hero-dark .hero-title,
.hero-dark .hero-subtitle{
  color: #FFFFFF;
}


.hero-dark .hero-scroll-hint {
	color:black;
}



/* -----------------------------------------
   Scroll Hint
----------------------------------------- */

.hero-scroll-hint {
  position: fixed;
  bottom: 12vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  opacity: 1;
  animation: scrollHintPulse 1.8s infinite ease-in-out;
  cursor: pointer;
  transition: opacity 0.4s ease-out;
  z-index: 101;
  border: 1px solid black;
  border-radius: 50%;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.8);
  user-select: none;
}

.hero-scroll-hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}


.hero-scroll-hint:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}


.hero-scroll-hint[aria-hidden="true"] {
  pointer-events: none;
}



.hero-scroll-hint.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  display: none;
  animation: none;
}

@keyframes scrollHintPulse {
  0%   { transform: translate(-50%, 0); opacity: 0.4; }
  50%  { transform: translate(-50%, 6px); opacity: 1; }
  100% { transform: translate(-50%, 0); opacity: 0.4; }
}






.hero-small {
	min-height: 50vh;
	max-height: 50vh;
	height: 50vh;
    overflow: hidden;
}

.hero-medium {
	min-height: 70vh;
	max-height: 70vh;
	height: 70vh;
    overflow: hidden;
}


.hero-large {
	min-height: 90vh;
	max-height: 90vh;
	height: 90vh;
    overflow: hidden;
}

.hero-full {   
	min-height: 97dvh;
	max-height: 97dvh;
	height: 97dvh;
    overflow: hidden;
	width: 100vw;
}






/* Mobile: Button fix unten links */
@media (max-width: 1000px) {
 
  /* Sticky-Klasse auf Mobil komplett ignorieren */
  .hero-top-cta-wrapper.sticky {
    position: fixed !important;
    bottom: 1.5vw;
    left: 1.5vw;
    right: auto;
    top: auto;
  }
}

/* Desktop Sticky Animation */
@media (min-width: 1001px) {
	.hero-top-cta-wrapper.sticky {
    animation: slideDownCTA 1s ease-out forwards;
  }
    .hero-top-cta-wrapper {
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  }
}



/* Desktop Slide-Down Animation */
@keyframes slideDownCTA {
  0% {
    transform: translateY(-120%);
    opacity: 0;
  }
  60% {
    transform: translateY(10%);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}



.full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  padding-bottom: 5rem;
  padding-top: 5rem;
  margin-top: 5rem;
  margin-bottom: 5rem;
  

}

.full-bleed ul{
	margin-bottom:0rem;
}

.full-bleed ul li:last-child {
  margin-bottom: 0;
}


.full-bleed-white{
	background-color: #FFF;
	box-shadow: 0 2px 16px 1px #b8b8b8;
}

.full-bleed-color1{
	background-color: var(--color-primary);
	color:#FFF;
}

.full-bleed-color1 h2{
	color:#FFF;
}

.full-bleed-color2{
	background-color: var(--color-secondary);
	color:#FFF;
}

.full-bleed-color2 h2{
	color:#FFF;
}


/* Innerer Content-Container (max 1000px) */
.full-bleed .innerDiv {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}







.block-text-image .innerDiv{
  display: flex;
  gap: 1.5rem;
  
  align-items: center;
	
}

.block-text-image.image-left .image { order: 0; }
.block-text-image.image-left .inner { order: 1; }

.block-text-image.image-right .image { order: 1; }
.block-text-image.image-right .inner { order: 0; }

.block-text-image.no-image .image { display: none; }




.block-text-image.image-left .image,
.block-text-image.image-right .image {
  flex: 0 0 calc(38.2% - 0.75rem);
  max-width: calc(38.2% - 0.75rem);	/*1rem, da gap=1.5rem eingestellt ist*/
}

.block-text-image.image-left .inner,
.block-text-image.image-right .inner {
  flex: 0 0 calc(61.8% - 0.75rem);
  max-width: calc(61.8% - 0.75rem);
}



.btn_content {
  display: inline-block;
  margin-top: 20px;
  padding: 0.75rem 1.5rem;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 10px;
  
  
}

.spacer_15rem{
	height: 1.5rem;
}


.spacer_05rem{
	height: 1.5rem;
}

.btn_content:hover {
  background: #FFFFFF;
  border:2px solid #c64510;
  color: var(--color-secondary);
}




/* TOP & BOTTOM: Bild und Text über volle Breite */
.block-text-image.image-top .innerDiv,
.block-text-image.image-bottom .innerDiv {
  flex-direction: column;
}

.block-text-image.image-top .image,
.block-text-image.image-bottom .image,
.block-text-image.image-top .inner,
.block-text-image.image-bottom .inner {
  flex: none;
  width: 100%;
  max-width: 100%;
}



@media (max-width: 600px) {
  .block-text-image .innerDiv{
    flex-direction: column;
	align-items: normal;
  }

  .block-text-image .image,
  .block-text-image .inner,
.block-text-image.image-left .inner,
.block-text-image.image-right .inner,
.block-text-image.image-left .image,
.block-text-image.image-right .image  {
    max-width: 100%;
    flex: none;
  }
}




/* -----------------------------------------
   MULTI COLUMNS – Grundstruktur
----------------------------------------- */


/* Titel (globaler Block-Titel) */
.multi-columns h2 {
  margin-bottom: 1.5rem; /* wie textImage */
}

.full-bleed-color1.multi-columns h1,
.full-bleed-color1.multi-columns h2,
.full-bleed-color1.multi-columns h3,
.full-bleed-color1.multi-columns h4,
.full-bleed-color2.multi-columns h1,
.full-bleed-color2.multi-columns h2,
.full-bleed-color2.multi-columns h3,
.full-bleed-color2.multi-columns h4{
 color:#FFFFFF;
}

/* Subtitle */
.mc-subtitle {
  margin-top: 1.5rem; /* wie textImage: Titel → Text */
}

.mc-subtitle p{
	margin-bottom:0px;
}

/* Grid */
.mc-grid {
  display: grid;
  gap: 1.5rem; /* wie textImage innerDiv gap */
  align-items: stretch;
}

/* Columns per row */
.mc-grid.cols-1 { grid-template-columns: 1fr; }
.mc-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mc-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Column */
.mc-col {
  display: flex;
  flex-direction: column;
   height: 100%; /* Spalte füllt die Zelle komplett */
   
}



/* Neuer Wrapper */
.mc-inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  
}


.mc-boxbar .mc-inner {
	
  padding-left: 1.5rem;
  padding-right: 1.5rem;
	
}

.mc-image{
	height: 200px;
	max-height: 200px;
    overflow: hidden;
	margin-bottom: 1.5rem;
}


.mc-boxbar .mc-image{
	margin-bottom: 0rem;
}



.mc-inner .btn_content {
  margin-top: auto;
  width: auto;
  align-self: flex-start; /* oder center, wenn du zentrieren willst */
}


.multi-columns .btn_content{
	
	background:#FFFFFF;
	color: var(--color-secondary);
	border: 2px solid var(--color-secondary);
}
.multi-columns .btn_content:hover{
	
	background: linear-gradient(to bottom, #e55813 0%, #c64510 100%);
	color: #FFFFFF;
	border: 2px solid #c64510;
}

.multi-columns.full-bleed-color2 .btn_content:hover{
	background-color:var(--color-primary);
	border: 2px solid var(--color-primary);
}


/* Erster Absatz: kein margin-top */
.mc-text > p:first-child {
  margin-top: 0 !important;
}

/* Letzter Absatz: kein margin-bottom */
.mc-text > p:last-child {
  margin-bottom: 0 !important;
}


/* Icon */
.mc-icon img {
  max-width: 150px;
  margin: 0 auto;
  display: block;
}

/* Image */


.mc-image picture,
.mc-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}


/* Column Text */
.mc-text {
}

/* -----------------------------------------
   STYLE MODES
----------------------------------------- */

/* ICONBAR → alles zentriert */
.mc-iconbar .mc-col {
  text-align: center;
}

.mc-iconbar .mc-title,
.mc-iconbar .mc-text,
.mc-iconbar .btn_content {
  margin-left: auto;
  margin-right: auto;
}

/* Column Title */
.mc-title {
  margin: 0 0 0 0; /* wie textImage */
  /*
  display: flex;
  align-items: bottom;
  */
}


.mc-boxbar .mc-col {
  background: #FFFFFF;	
  
}

/* Wenn die ganze Section full-bleed-white ist → Boxbar heller/weiß */
.full-bleed-white.mc-boxbar .mc-col {
  background: var(--color-main-background);
}


/* BOXBAR – Border-Radius auf die ganze Spalte */
.mc-boxbar .mc-col {
  
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden; /* WICHTIG: Bild wird oben abgerundet */
  /*box-shadow: 0 2px 16px 1px #b8b8b8;*/
}

/* .mc-inner bekommt NUR Padding, NICHT den Hintergrund */
.mc-boxbar .mc-inner {
  background: none;
  border: none;
  padding: 1.5rem;
}



.mc-iconbar .mc-image{
	display:none;
}


.mc-boxbar .mc-icon{
	display:none;
}


.mc-boxbar .mc-grid{
	margin-top: 1.5rem;
}


.mc-iconbar h2{
	text-align: center;
}

.mc-iconbar h3,
.mc-iconbar h4{
	font-size: 1.25rem;
}


.contact-block{
	
	margin-bottom:0px;
}




.contact-block p{
	
	line-height: 1.6;
	margin-bottom:1.25rem;
}

.contact-block-subline{
	line-height:1.25 !important;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-text-highlight);
	margin-bottom: 1.5rem !important;

}

.mc-iconbar .mc-icon picture{
	width: 65px;
	margin: 0 auto;
	padding-bottom: 0.75rem;
}

.mc-default h2{
	margin-bottom: 1.5rem;
	
}

.mc-default h3{
	line-height: 1.25rem;
	margin-bottom: 1rem;
		font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-text-highlight);
	margin-bottom: 0px
}





.contact-block h2,
.contact-block h3{
	
margin-bottom: 1rem;
font-size: 1.8rem;
font-weight: 700;
  line-height: 1.25;
  margin: 0 0 1.5rem 0;
}


/* -----------------------------------------
   RESPONSIVE
----------------------------------------- */

@media (max-width: 1000px) {
  .mc-grid.cols-3,
  .mc-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}



@media (max-width: 600px) {
	
	.contact-block{
		
		text-align:center;
	}
	
  .mc-grid.cols-2,
  .mc-grid.cols-3,
  .mc-grid.cols-4 {
    grid-template-columns: 1fr;
  }
  
  
  .mc-grid{
	gap: 1.5rem;
  }
  
	  



	.contact-block h2,
	.contact-block h3{
	  margin: 0 0 2rem 0;
	}


	
	
	h2,
	h3{
		margin: 0 0 2rem 0;
	}


.block-text-image .inner h2{
	
	margin: 0 0 2rem 0;
}


.mc-default h2,
.multi-columns h2{
	
	margin-bottom: 2rem;
}

  
}





ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0rem;
}

ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}

ul li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0rem;
  color: var(--color-secondary);
  line-height: 1.25;
  font-weight: 700;
  font-size: 1.25rem;
}


.full-bleed-color1 ul li::before,
.full-bleed-color2 ul li::before  {
	color: #FFFFFF;
}


/* Animationen */

.block {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}


.block.visible {
  opacity: 1;
  transform: translateY(0);
}





/* Aufklappbarer FAQ-Bereich */


.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.faq-item > p {
  padding-bottom: 0.5rem;
  cursor: pointer;
}


/* Frage */
.faq-item > p:first-child {
  position: relative;
  padding-left: 1.5rem;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  transition: color 0.2s ease-out;
}


/* Plus-Symbol */
.faq-item > p:first-child::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-secondary);
  transition: transform 0.25s ease-out, color 0.25s ease-out;
  line-height: 1.25;
  font-weight: 700;
  font-size: 1.25rem;
}

  

/* Hover-Effekt */
.faq-item:hover > p:first-child {
  color: var(--color-secondary);
}

.faq-item:hover > p:first-child::before {
  color: var(--color-secondary);
}



/* Antwort-Container (geschlossen) */
.faq-item > div {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-8px);
  transition:
    max-height 0.45s ease,
    opacity 0.35s ease,
    padding-top 0.45s ease,
    padding-bottom 0.45s ease,
    transform 0.45s ease;
}

/* Antwort-Container (geöffnet) */
.faq-item.open > div {
  max-height: 500px; /* genug für lange Antworten */
  opacity: 1;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transform: translateY(0);
}


.faq-item.open > div > p{
	margin:0;
}


/* Minus-Symbol */
.faq-item.open > p:first-child::before {
  content: "–";
  transform: rotate(180deg);
}

/* Abstand unten entfernen */
.faq-section {
  margin-bottom: 0px;
  margin: 0 0 5rem 0;
}




/* -----------------------------------------
   GOOGLE MAPS – Premium LazyLoad Placeholder
----------------------------------------- */
.gmaps-wrapper {
  position: relative;
  width: 100%;
}

/* Placeholder über iframe */
.gmaps-placeholder {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  background: #FFF;
  border-radius: 10px;

  color: var(--color-text-primary);
  font-size: 1rem;
  font-weight: 700;

  opacity: 1;
  transition: opacity 0.45s ease-out;
}



.gmaps-placeholder::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--color-secondary);
  border-right-color: var(--color-secondary);
  animation: gmaps-spin 0.8s linear infinite;
  margin-right: 0.75rem;
}

@keyframes gmaps-spin {
  to {
    transform: rotate(360deg);
  }
}



/* Placeholder fade-out */
.gmaps-placeholder.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* iframe darunter */
.gmaps-wrapper iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(260px, 56.25vw, 450px);
  border: 0;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.45s ease-out;
}

/* iframe sichtbar */
.gmaps-wrapper iframe.loaded {
  opacity: 1;
}





.text p:last-child {
  margin-bottom: 0rem;
}


.mc-text ul li:first-child {
	margin-top: 0rem;
}
.mc-text ul li:last-child {
	margin-bottom: 0rem;
}
.mc-text ul:last-child {
	margin-bottom: 0rem;
}

.nav-level-2 li{
	margin-top:0rem;
}	



.image-debug-overlay{
	
}




#swr-debug-overlay {
	
	
	display:none;
	
	
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.75);
  color: #0f0;
  font-family: monospace;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  z-index: 999999;
  max-width: 300px;
  pointer-events: none;
  white-space: pre-line;
}


/* ---------------------------------------
   NAVIGATION – Grundlayout
--------------------------------------- */

#navigation {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1000px;
  z-index: 102;
  padding: 0 1.5rem;
  box-sizing: border-box;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background: transparent;
}

.nav-container {
  position: relative;
}

#navigation a{
font-size: 1rem;
}

/* ---------------------------------------
   DESKTOP – Level 1 (Kachel-Menü)
--------------------------------------- */

.nav-level-1 {
  display: grid;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  align-items: end;
}

.nav-item {
  display: flex;
  flex-direction: column-reverse; /* Submenü oben, Kachel unten */
  margin-bottom:0;
}

/* Kachel */
.nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  min-height: 3.5rem;
  line-height: 1.6;

  background: var(--color-main-background);
  border-radius: 10px 10px 0 0;
	/*
  color: var(--color-secondary);
  */
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease-out;
  
  border-bottom:1px solid var(--color-text-primary);
}

.nav-link:hover {
  background: #ececec;
  color: var(--color-secondary);
}

/* Active */
.nav-link.active {
  color: #c64510;
  /*
  background: var(--color-secondary);
  */
}

/* ---------------------------------------
   DESKTOP – Dropdown (Submenü wächst nach oben)
--------------------------------------- */

.nav-level-2 {
  list-style: none;
  margin: 0;
  padding: 0;
  
  background:#fafbfc;

  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);

  transition:
    max-height 0s ease,
    opacity 0s ease,
    transform 0s ease;
}

/* Hover: Submenü fährt nach oben auf */
.nav-item.has-children:hover .nav-level-2 {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

/* Submenü-Links */
.nav-level-2 li a {
  display: block;
  border-bottom: none;
  color: var(--color-text-primary);
  text-decoration: none;
text-align: center;
  padding-left: 10px;
  padding-right: 10px;
padding-bottom: 10px;
  padding-top: 10px;
}

.nav-level-2 li a:hover {
  color: var(--color-secondary);
  background: #ececec;
}

.nav-level-2 li a.active {
  font-weight: normal;
  color: var(--color-secondary);
}


.nav-level-2 li{
	margin-bottom: 0px;
}




.nav-level-2 li:last-child {
  margin-bottom: 40px;
}

/* ---------------------------------------
   MOBILE – Burger
--------------------------------------- */
.burger:hover span {
	/*
  background: var(--color-secondary);
  border: 1px solid var(--color-secondary);
	*/
  background: #ececec;
  
  
}



/* ---------------------------------------
   MOBILE – Offcanvas
--------------------------------------- */

.offcanvas-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9998; /* knapp unter Offcanvas */
  inset: 0;
}

.offcanvas-overlay.visible {
  display: block;
}

.offcanvas {
	display: none;
  position: fixed;
  top: 0;
  width: 80vw; 
  right: -90vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 16px rgba(0,0,0,0.2);
  transition: right 0.3s ease-out;
  z-index: 9999;
  
  
  
}

.offcanvas ul {
	padding: 1.5rem !important;
}


.offcanvas.open {
  right: 0;
}

.offcanvas-close {
background: none;
  border: none;
  font-size: 50px;
  cursor: pointer;
  position: absolute;
  width: 30px;
  height: 32px;
  top: 5px;
  right: 20px;
  color: var(--color-text-primary);
}


.offcanvas-close:hover {
	
  color: red;
	
}

/* Mobile Navigation */
.mobile-nav {
  list-style: none;
  padding: 0;
  margin-top: 4rem;
}

.mobile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-row .mobile-link {
  font-size: 1rem !important;
  text-decoration: none;
  color: var(--color-text-primary);
  font-weight: 700;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  
}

.mobile-item{
  margin-bottom: 0rem;
}


.mobile-submenu a{
	font-size: 1rem !important;
	text-decoration:none;
}

.mobile-row .mobile-link.active {
  color: var(--color-secondary);
}

.mobile-row .mobile-link:hover {
  color: var(--color-secondary);
}

.submenu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  position: relative;
  padding: 0;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid black;
  padding-left: 10px;
}
/* Plus-Zeichen */
.submenu-toggle::before {
  content: "+";
  font-size: 20px;
  display: block;
  font-weight:500;
  transform: rotate(0deg);
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* Minus-Zeichen + Rotation */
.submenu-toggle.open::before {
  content: "–";
  transform: rotate(180deg);
}

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  
  
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    transform 0.35s ease;
}

.mobile-submenu.open {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
  padding: 0px !important;
  margin-top: 0px;
  margin-bottom: 1.25rem;
  padding-left:0.5rem !important;
}

/* ---------------------------------------
   RESPONSIVE
--------------------------------------- */

@media (max-width: 1000px) {
  .nav-level-1 {
    display: none;
  }


  .offcanvas.open + .offcanvas-overlay {
  display: block;
}

  .offcanvas {
    display: block;
  }
  
  
}

/* ---------------------------------------
   RESET globaler UL/LI-Styles
--------------------------------------- */

#navigation ul,
#navigation li,
#navigation ul li::before {
  list-style: none !important;
  padding-left: 0;
  margin-left: 0;
}

#navigation ul li::before {
  content: none !important;
}

.mobile-nav,
.mobile-nav li,
.mobile-nav li::before,
.mobile-submenu,
.mobile-submenu li,
.mobile-submenu li::before {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0;

}

.mobile-submenu li{

  padding-bottom: 0.3rem;
  padding-top: 0.3rem;
  margin-top: 0.5rem;
}


.mobile-submenu li a{

  display: block;
  width: 100%;
}

nav .mobile-submenu a.active{	
font-weight: normal;
  
}


.mobile-nav li::before,
.mobile-submenu li::before {
  content: none !important;
}



.mobile-item ul {

  padding:0px !important;
  padding-left: 0.5rem !important;
}

.submenu-toggle:hover{

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




#page-loader {
  position: absolute;
  display:flex;
  inset: 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}

#page-loader .spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--color-secondary);
  border-right-color: var(--color-secondary);
  animation: spin 0.8s linear infinite;
}

#page-loader.visible {
  opacity: 1;
}


img::before{
	display:none;
}