body {
	background-color:#E2E0DE;
	font-family: "Roboto", sans-serif;
	font-weight: 200;
	font-size:16px;
	font-style: normal;
	color:#000000;
	text-align:center;
	line-height: 1.2;
	
	
	
	
}

p {
 margin:0px;
}



		
div.container_main {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: auto;
 margin: 0px;
 padding: 0px;
 z-index:0;
 text-align:center;
 background-color:#E2E0DE;
 

 
}



div.block_1 {
    position:fixed;
  	top:0px;
  	left:0px;
  	width:100%;	
  	border:0px;
  	margin: 0%;		
  	background-color: rgba(0,0,0,0.5);

  	display: inline-block;
  	text-align:center;			
		z-index:200;		
  }
  div.block_1_pages {
    position:fixed;
  	top:0px;
  	left:0px;
  	width:100%;	
  	border:0px;
  	margin: 0%;		
  	background-color: rgba(0,0,0,0.5);

  	display: inline-block;
  	text-align:center;			
		z-index:200;		
  }
	div.navi_link_last {
   padding-right: 0px;
  display: inline-block;
  vertical-align:middle;
  padding-top:10px;
  padding-bottom:10px;
	color:#ffffff;
	font-weight:normal;
  }
	div.navi_link {
       
    padding-right: 40px;
  display: inline-block;
  vertical-align:middle;
  padding-top:10px;
  padding-bottom:10px;
	color:#ffffff;
	font-weight:normal;
  }
  
  div.navi_link_hover {
       padding-left: 0px;
    padding-right: 40px;
  display: inline-block;
  vertical-align:middle;
  padding-top:10px;
  padding-bottom:10px;
	color:#ffffff;
	font-weight:normal;
	/*cursor:pointer;*/
  }
  div.navi_link_hover:hover {
       padding-left: 0px;
    padding-right: 40px;
  display: inline-block;
  vertical-align:middle;
  padding-top:10px;
  padding-bottom:10px;
	color:#ffffff;
	font-weight:normal;
	/*cursor:pointer;*/
	background-color: rgba(125,182,58,0.7);
	
  }
    .hover-show {
    display: none;
    position: absolute;
   top: 100%;
   
    padding: 0px;
    background-color: rgba(125,182,58,0.7);
    color: white;
    text-align:left;
	width: 100%;
	
  
	
  }
  .navi_link_hover:hover .hover-show {
    display: block;
	box-sizing: border-box; /* keep padding/borders inside the width */
  white-space: normal;    /* allow line breaks */
  word-wrap: break-word;  /* break long words if needed */
  max-width:110px;
  padding-left:10px;
  line-height:1.5;
  }
  
  a.navi_link {
   text-decoration:none;
   color:#ffffff;   
  }
  a.navi_link:hover {
   text-decoration:none;
   color:#7DB63A;
  }  
  
    a.sub_navi_link {
   text-decoration:none;
   color:#ffffff;   
  }
  a.sub_navi_link:hover {
   text-decoration:none;
   color:#71706F;
  }  
  
  a.navi_link_ueber {
   text-decoration:none;
   color:#ffffff;   
  }
  a.navi_link_ueber:hover {
   text-decoration:none;
   color:#ffffff;
  } 
  
  
  div.block_2 {
  position: fixed;
	top:0;
	left:0;
  display:block;
	width:100%;	
	height: 100%;
	border:0px;
	margin: 0%;		
	background-color:#ffffff;
	/*padding-top:50px;	*/
}





  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    
    
   
  }

  /* First image */
  .bg-image.image1 {
    
	background-image: url('../images/block_2_img_1_mod.jpg');
     animation: fade1 16s infinite ease-in-out;
  }

  /* Second image */
  .bg-image.image2 {
    
	background-image: url('../images/block_2_img_2_mod.jpg');
   animation: fade2 16s infinite ease-in-out;
  }
  /* Second image */
  .bg-image.image3 {
    
	background-image: url('../images/block_2_img_3_mod.jpg');
   animation: fade3 16s infinite ease-in-out;
  }
.bg-image.image4 {
	background-image: url('../images/page4_img1.jpg');
}
.bg-image.image5 {
	background-image: url('../images/page5_img1.jpg');
}

.bg-image.image6 {
	background-image: url('../images/page6_img1.jpg');
}
.bg-image.image7 {
	background-image: url('../images/page7_img1.jpg');
}
.bg-image.image8 {
	background-image: url('../images/page8_img1.jpg');
}


.bg-image.image10{
	background-image: url('../images/page10_img1.jpg');
}

.bg-image.image11 {
	background-image: url('../images/page11_img1.jpg');
}

  /* Image 1: visible from start, then fades out */
  @keyframes fade1 {
    0%   { opacity: 1; }
    26%  { opacity: 1; }
    33%  { opacity: 0; }
    93%  { opacity: 0; }
    100% { opacity: 1; }
  }

  /* Image 2: fades in after Image 1 */
  @keyframes fade2 {
    0%   { opacity: 0; }
    26%  { opacity: 0; }
    33%  { opacity: 1; }
    59%  { opacity: 1; }
    66%  { opacity: 0; }
    100% { opacity: 0; }
  }

  /* Image 3: fades in after Image 2 */
  @keyframes fade3 {
    0%   { opacity: 0; }
    59%  { opacity: 0; }
    66%  { opacity: 1; }
    93%  { opacity: 1; }
    100% { opacity: 0; }
  }





	
 
  /* -------------- mit 2 Bildern --------------- */
  /*  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .image1 {
    background-image: url('image1.jpg');
    animation: fade1 10s infinite ease-in-out;
  }

  .image2 {
    background-image: url('image2.jpg');
    animation: fade2 10s infinite ease-in-out;
  }

  
  @keyframes fade1 {
    0%   { opacity: 1; }
    40%  { opacity: 1; }
    50%  { opacity: 0; }
    90%  { opacity: 0; }
    100% { opacity: 1; }
  }

  
  @keyframes fade2 {
    0%   { opacity: 0; }
    40%  { opacity: 0; }
    50%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; }
  }
  */



  div.block_3 {
 
	top:0;
	left:0;
  
	width:100%;	
	
	border:0px;
	margin: 0%;		
	background-color:#E2E0DE;
	/*padding-top:50px;	*/
	
	 display: flex;
    gap: 20px; /* 20px space between boxes */
	
	justify-content: center; /* Horizontal center */
    /* align-items: center; */    /* Vertical center */
	
}
.box {
	 width: 320px;
    height: 530px;
    background-color: white;
    border: 0px solid #333;
    /*display: flex;*/
    justify-content: center;
    /*align-items: center;*/
	margin-top:90px;	
	font-size:14px;
	line-height: 1.4;
}
.inner-box {
	width:314px;
	height:fit-content;
	margin-top:3px;
	margin-left:3px;
	background-color: #FEF8DD;
	padding-top:10px;
	padding-left:17px;
	box-sizing: border-box;
	text-align:left;
	padding-bottom: 10px;
	display:block;	
}
.bullets {
	
	display:block;
	text-align:left;
	padding-left: 12px;
	padding-bottom: 7px;
}
.box-image {
	text-align:center;
	
}
.before-bottom-box{
	height:90px; 
	background-color:#E2E0DE;
}
.bottom-box {
     position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
	display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    height: 60px; 
    text-align: center;
	background-color: #851710;
    color: white;	
} 
.bottom-box-content {
	font-weight:400;
	/*width: 995px;*/
    text-align: left;
}


.bottom-box-licht {
     position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
	display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    height: 60px; 
    text-align: center;
	background-color: #851710;
    color: white;	
} 
.bottom-box-content-licht {
	font-weight:800;
	width: 100%;
	font-size:25px;
    text-align: center;
	color: #FEF7D3;
}


 div.block_4 {
 
	top:0;
	left:0;
  
	width:100%;	
	
	border:0px;
	margin: 0%;		
	background-color:#E2E0DE;
	
	/*padding-top:50px;	*/
	
		
}
div.block_4_left {
	width:570px;
	display:inline-block;
	    height: 100vh;
    min-height: fit-content;
	/*margin-top:150px;*/
	text-align:left;
	vertical-align: top;
	background-color:#D6D2D0;
	padding-left: 20px;
	
}
div.block_4_left_cont {
	margin-top:90px;
	/*margin-top:150px;*/
	text-align:left;
	    margin-bottom: 20px;
	
}
div.block_4_right {
	
	display:inline-block;
	    height: 100vh;
    min-height: fit-content;
	/*margin-top:150px;*/
	text-align:left;
	vertical-align: top;
	padding-left: 20px;
	padding-right: 20px;
	background-color:#E2E0DE;
	
}
span.block_4_title {
	font-weight:600;
	color:#81090C;
	font-size:17px;
}
span.block_4_subtext {
	color:#848588;
	font-size:10px;
}
.shadow-image {
    display: block; /* remove inline spacing */
    box-shadow: 
      10px 0 15px -5px rgba(0, 0, 0, 0.5),  /* shadow on the left */
       0 10px 15px -5px rgba(0, 0, 0, 0.5);  /* shadow on the bottom */
  }




.box-title {
	font-size:16px;
	font-weight:bold;
	color:#851710;
}
li::marker {
    color: #851710;
  }

.e-mail {
 text-decoration:none;
 color: #851710;
	
}

.e-mail-white {
 text-decoration:none;
 color: #ffffff;
	
}

div.team-content{
	position:absolute;
	left:10%;
	top:180px;
	width:fit-content;
	max-width: 749px;
	background-color: rgba(0,0,0,0.8);
	
	padding:20px;
	text-align:left;
}
.team-content-title {
width:100%;
font-size:18px;
font-weight:800;
color:#B49657;
}
.team-content-person {
width:auto;	
padding-top: 25px;	
display: inline-block;
max-width:210px;
font-size:12px;
color:#ffffff;
vertical-align: top;
    line-height: 1.5;

}
.team-content-name {
	color:#B49657;
	font-weight:800;
}
.team-spacer {
	width:50px;
	display:inline-block;
}
.team-content-person-img{
width:210px;	
height:150px;
}


div.geschichte-content{
	position:fixed;
	left:10%;
	bottom:60px;
	width:fit-content;
	max-width: 549px;
	background-color: rgba(0,0,0,0.8);
	
	padding:20px;
	text-align:left;
}
.geschichte-content-title {
width:100%;
font-size:18px;
font-weight:800;
color:#B49657;
}
.geschichte-content-text {
width:auto;	
padding-top: 10px;	
display: inline-block;
max-width:400px;
font-size:12px;
color:#ffffff;
vertical-align: top;
    line-height: 1.5;

}



div.philosophie-content{
	position:fixed;
	left:10%;
	bottom:60px;
	width:fit-content;
	max-width: 600px;
	background-color: rgba(0,0,0,0.8);
	
	padding:20px;
	text-align:left;
}
.philosophie-content-title {
width:100%;
font-size:18px;
font-weight:800;
color:#B49657;
}
.philosophie-content-text {
width:auto;	
padding-top: 10px;	
display: inline-block;

font-size:12px;
color:#ffffff;
vertical-align: top;
    line-height: 1.5;

}
.philosophie-content-subtitle {
	
font-weight:600;
padding-top: 10px;
    padding-bottom: 0px;
    display: inline-block;   

}


div.staerke-content{
	position:fixed;
	left:10%;
	bottom:60px;
	width:fit-content;
	max-width: 549px;
	background-color: rgba(0,0,0,0.8);
	
	padding:20px;
	text-align:left;
}
.staerke-content-title {
width:100%;
font-size:18px;
font-weight:800;
color:#B49657;
}
.staerke-content-text {
width:auto;	
padding-top: 10px;	
display: inline-block;
max-width:400px;
font-size:12px;
color:#ffffff;
vertical-align: top;
    line-height: 1.5;

}
li.staerke::marker {
    color: #ffffff;
	padding-left:0px;
  }
  li.staerke {
    /* list-style-position: inside;*/ /* keeps bullet inside text block */
  margin: 0;                  /* remove default outer spacing */
  padding: 0;  
  }
  ul.staerke {
	 padding-inline-start:0; 
	 margin-top:0;
	 margin-left:10px;
	  
  }
  
  
  
  
  div.kontakt-content{
	position:fixed;
	left:10%;
	bottom:60px;
	width:fit-content;
	max-width: 300px;
	background-color: rgba(0,0,0,0.8);
	
	padding:20px 20px 0px 20px;
	text-align:left;
}
.kontakt-content-title {
width:100%;
font-size:18px;
font-weight:800;
color:#B49657;
}
.kontakt-content-text {
width:auto;	
padding-top: 10px;	
padding-bottom: 5px;
display: inline-block;

font-size:12px;
color:#ffffff;
vertical-align: top;
    line-height: 1.5;

}
.kontakt-content-subtitle {
	
font-weight:600;
padding-top: 10px;
    padding-bottom: 0px;
    display: inline-block;   

}
.kontakt-image {
	width:300px;
	border:0px;
	padding-top:10px;
}


  div.stellen-content{
	position:fixed;
	left:10%;
	bottom:60px;
	width:fit-content;
	max-width: 300px;
	background-color: rgba(0,0,0,0.8);
	
	padding:20px 20px 20px 20px;
	text-align:left;
}
.stellen-content-title {
width:100%;
font-size:18px;
font-weight:800;
color:#B49657;
}
.stellen-content-bigtext {
width:auto;	
font-weight:800;
font-size:16px;
padding-top: 10px;	
padding-bottom: 5px;
display: inline-block;
}
.stellen-content-text {
width:auto;	
padding-top: 10px;	
padding-bottom: 5px;
display: inline-block;

font-size:12px;
color:#ffffff;
vertical-align: top;
    line-height: 1.5;

}
.stellen-content-tel {
font-weight:800;
color:#B49657;

}
.stellen-content-subtitle {
	
font-weight:600;
padding-top: 10px;
    padding-bottom: 0px;
    display: inline-block;   
	color:#B49657;

}





.open-contact {
	font-weight:600;
	text-decoration:none;
	font-size:16px;
	color:#ffffff;
}







 /* Overlay (versteckt standardmäßig) */
 
    :root{
      --overlay-bg: rgba(0,0,0,0.8); /* halbtransparentes Grau/Schwarz */
      --modal-bg: #ffffff;
      --accent: #0066cc;
      --max-width: 480px;
    }
 
 
    .overlay {
      position: fixed;
      inset: 0; /* top:0; right:0; bottom:0; left:0; */
      display: none; /* sichtbar machen mit .is-open */
      align-items: center;
      justify-content: center;
      background: var(--overlay-bg);
      z-index: 1000;
      padding: 1rem; /* Abstand auf kleine Bildschirme */
    }

    .overlay.is-open {
      display: flex;
      animation: fadeIn 160ms ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Modal / Dialog */
    .modal {
      background: var(--modal-bg);
      width: 100%;
      max-width: var(--max-width);
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      padding: 1.25rem;
      box-sizing: border-box;
      position: relative;
    }

    .modal header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.5rem;
    }

    .modal h2 {
      margin: 0;
      font-size: 1.125rem;
    }

    .close-btn {
      background: transparent;
      border: none;
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
    }

    /* Form styles */
    .contact-form {
      display: grid;
      gap: 0.75rem;
	  text-align: left;
    }
	
	.contactsubtext{
		font-size: 0.9rem;
		    text-align: left;
    padding-bottom: 10px;
	}

    .contact-form label {
      font-size: 0.9rem;
    }

    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 0.6rem;
      border: 1px solid #d0d0d0;
      border-radius: 6px;
      font: inherit;
      box-sizing: border-box;
    }

    .contact-form textarea {
      min-height: 120px;
      resize: vertical;
    }

    .contact-form .actions {
      display: flex;
      gap: 0.5rem;
      justify-content: flex-end;
      margin-top: 0.25rem;
    }

    .btn {
      padding: 0.6rem 0.9rem;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      font: inherit;
    }

    .btn-primary {
      background: #222222;
      color: white;
    }

    .btn-secondary {
      background: transparent;
      border: 1px solid #ccc;
    }

    /* Kleine Ansicht: Modal etwas größer (nimmt mehr Platz) */
    @media (max-width: 420px) {
      .modal { padding: 1rem; border-radius: 8px; }
    }

    /* Hilfsklasse, wenn Modal offen: Seiten-Scroll deaktivieren */
    body.modal-open {
      overflow: hidden;
    }
	
	 .error-message {
    color: red;
    font-size: 0.8rem;
  }
  
  /* ----------- END OVERLAY --------------- */
  
  
  
  /* -------------- Image Gallery ----------------- */
  
  
  .carousel-container {
        position: relative;
        height: 100%;
        width: 100%;
    }
    .carousel-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    .carousel-image.active {
        opacity: 1;
    }
    /* Remove fade on first image */
    .carousel-image.first-load {
        transition: none;
    }
    .arrow-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(133, 23, 16, 0.7); /* Gray circle */
        color: #FEF7D3;
        border: none;
        font-size: 2em;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 2;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s;
    }
    .arrow-btn:hover {
        background: rgba(133, 23, 16, 0.9);
    }
    .left-btn {
        left: 20px;
    }
    .right-btn {
        right: 20px;