@charset "UTF-8";

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap; /* Verhindert Long-Flash-of-Unstyled-Text */
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Semibold.ttf') format('truetype');
  font-weight: 600; /* Semibold entspricht oft 600 */
  font-style: semibold;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: bold;
  font-display: swap;
}

body {
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: normal; /* Standard: Regular */
    background-color: #FAF3E0;
    /*  font-family: 'Lora', serif; */
    /* text-align: center; */
	/* color: #333333; */
	display: block;
    margin: 0px;
}
	
header {
	/* font-family: Poppins, Arial, sans-serif; */
	background-color: #FAF3E0;
	margin: 0px;
	padding: 10px;
	/* padding: 15px; */
	border-radius: 0px;
	text-align: center;
	color: #333333;
	/* color: white; */
	/* background: url("Bilder/Hintergrund_vorderseite.png") no-repeat center center fixed; */
	/* background-size: cover; */
	/* display: flex; */
	/* justify-content: space-between; */
	justify-content: center;
	/* align-items: center; */
	align-items: flex-end
	/* background: linear-gradient(0deg, #3A6B35, #5C9D66); */
	/* background: linear-gradient(0deg, #7c7f7c, #bec4bf); */
	max-height: 350px;
	position: relative; /* Sicherstellen, dass Inhalte über dem Hintergrund erscheinen */
	z-index: 3;
	display: block;
    margin: 0px;
}

main {
	/* font-family: Poppins, Arial, sans-serif; */
	background-color: #FAF3E0;
	display: block;
    margin: 0px;
	padding: 0px;
	border-radius: 0px;
	text-align: center;
	color: #333333;
	/* background: url("Bilder/Hintergrund_vorderseite.png") no-repeat center center fixed; */
	/* background-size: auto; */
	position: relative; /* Sicherstellen, dass Inhalte über dem Hintergrund erscheinen */
	z-index: 2;
}

	
footer {
	/* font-family: Poppins, Arial, sans-serif; */
	background-color: #FAF3E0;
	display: block;
    margin: 0px;
	padding: 10px;
	border-radius: 0px;
	text-align: center;
	color: #333333;
}
	
.header {
  display: flex;
  flex-direction: column; /* Stapelt Elemente auf kleinen Screens */
  align-items: center;
  padding: 10px;
}



.header-image {
  flex: 0 50%;        /* Linkes und rechtes Bild nehmen jeweils 20% der Gesamtbreite ein */
  min-height: 200px;         /* Höhe richtet sich nach dem Footer aus */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  background-image: {
	  url("./images/ShivsaAugen.png");
	  url("./images/Header2.png");
  }
  z-index: 1;
} 


.table-center {
  margin: 0 auto;
  border-collapse: collapse; saubere Rahmen
}


/* #hausbesuche table th, */
td {
	text-align: left;          /* Zellinhalt linksbündig */
	padding: 8px 12px;         /* einheitlicher Abstand */  
}

/* 1. Basis: Liste einrücken und Aufzählungszeichen außerhalb platzieren */
#hausbesuche ul {
  list-style-position: outside;  /* Marker außerhalb der Content-Box */
  padding-left: 1.5em;           /* Platz für das Marker-Zeichen */
}

/* 2. Hängende Einrückung: Text vorziehen, so dass Umbrüche unter dem Text starten */
#hausbesuche ul li {
  margin-left: 0.5em;            /* leichter Offset für das erste Textfragment */
  text-indent: -0.5em;           /* negativer Einzug zieht die erste Zeile zurück */
}

.highlight-paket {
  background-color: #f0f8ff;
  font-weight: bold;
}

.footer {
  display: flex;
/* 	  padding-top: auto;
  padding-bottom: auto; */
  align-items: center;  /* Vertikale Zentrierung */
  height: auto;        /* Feste Höhe als Beispiel – passt sich deinem Design an */
  justify-content: center;
}

.footer-image {
  flex: 0 0 20%;        /* Linkes und rechtes Bild nehmen jeweils 20% der Gesamtbreite ein */
  min-height: 100px;         /* Höhe richtet sich nach dem Footer aus */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.footer-image.left {
  background-image: url('../images/w.png');
}

.footer-image.right {
  background-image: url('../images/m.png');
}
/* } */

#container1 {
	display: flex;
	/* background-color: #cdffd8; */
	/* background: linear-gradient(to right, #5de0e6, #004aad); */
	/* font-family: Poppins, Arial, sans-serif; */
	justify-content: space-around;
	/* align-items: baseline; */
}
#container2 {
    background: none; /* Alternativ: background-color: transparent; */
	display: flex;
	border : 0;
	padding: 0;
	/* font-family: Poppins, Arial, sans-serif; */
	justify-content: space-around;
}
#container3 {
    background: none; /* Alternativ: background-color: transparent; */
	display: flex;
	width: 80%;
	border : 0px;
	padding: 0px;
	margin: 0 auto;
	/* font-family: Poppins, Arial, sans-serif; */
	justify-content: space-around;
}
#container4 {
    background: none; /* Alternativ: background-color: transparent; */
	display: flex;
	border : 0;
	padding: 0;
	/* font-family: Poppins, Arial, sans-serif; */
	font-weight: 200;
	font-style: normal;
	justify-content: space-around;
}
	
a[href^="http"] {
	color: #3A6B35;
	/*font-family: Poppins, Arial, sans-serif;*/
	font-size: 1.2rem;
	text-decoration: none; /* Unterstreichung entfernen */
	text-shadow: 0 0 18px #000; /* Leuchteffekt */
	background-color: rgba(100, 100, 100, 0.5);
}

a[href^="http"]:hover {
	color: #3A6B35;
	text-shadow: 0 0 8px #3A6B35; /* Leuchteffekt */
}
a[href^="http"]:visited {
	color: #3A6B35;	
}
a[href^="http"]:active {
	color: #3A6B35;
	text-shadow: 0 0 8px #3A6B35; /* Leuchteffekt */
}

a[href^="./"] {
	color: #3A6B35;
	/*font-family: Poppins, Arial, sans-serif;*/
	font-size: 1.2rem;
	text-decoration: none; /* Unterstreichung entfernen */
	/* text-shadow: 0 0 8px #000; /* Leuchteffekt */ */
}

a[href^="./"]:hover {
	color: #3A6B35;
	text-shadow: 0 0 18px #3A6B35; /* Leuchteffekt */
}
a[href^="./"]:visited {
	color: #3A6B35;	
}
a[href^="./"]:active {
	color: #3A6B35;
	text-shadow: 0 0 8px #3A6B35; /* Leuchteffekt */
}

.container {
	display: flex;
	/*background-color: rgba(100, 100, 100, 0.5);
	/*background: linear-gradient(to right, #5de0e6, #004aad);*/
	/* font-family: Poppins, Arial, sans-serif; */
	justify-content: space-around;
	/* align-items: baseline; */
}

.shadow-box {
	display: inline-block;
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5); /* Schatteneffekt */
	border: 0px solid #ddd; /* Rahmen um das Bild */
	border-radius: 0px; /* Abgerundete Ecken */
}

.menu {
    display: none;
    flex-direction: column;
    background: #3A6B35;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 10px;
}

.menu.show {
    display: flex;
}

.menu-toggle {
    font-size: 14px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

h1, h2, h3 {
    /* font-family: Poppins, Arial, sans-serif; */
    color: #3A6B35;
	/* font-weight: 700;  /* Überschriften in Bold */
}

summary {
    /* font-family: Poppins, Arial, sans-serif; */
	font-size: 1.3em;
    color: #3A6B35;
	font-weight: 700;  /* Überschriften in Bold */
}

details summary { cursor: pointer; padding: .5em; background: #fff; }
details div { padding: .5em 1em; }
details[open] summary { font-weight: bold; }


/* .logo { */
	/* width: 450px; */
	
	/* h1 { */
    /* font-family: Poppins, Arial, sans-serif; */
    /* color: #fab504; */
	/* font-style: italic; */
	/* } */
	/* h2, h3 { */
    /* font-family: Poppins, Arial, sans-serif; */
    /* color: black; */
	/* font-style: italic; */
	/* text-shadow: 0 0 18px white; /* Leuchteffekt */ */
	/* } */
/* } */

em, .italic {
	font-style: italic;
}

.semibold {
  font-weight: 600;
}

p {
	font-style: normal;
}

section {
    width: 80%;
    margin: 40px auto;
    padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
    padding-right: 30px;
	/* width: 100%; */
    /* margin-right: 0px; */
    /* margin-left: 0px; */
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
	display: block;
	unicode-bidi: isolate;
}

section-woBG {
    width: 80%;
    margin: 20px auto;
    padding-top: 20px;
	/* padding-bottom: 30px; */
	padding-left: 30px;
    padding-right: 30px;
	/* width: 100%; */
    /* margin-right: 0px; */
    /* margin-left: 0px; */
    /* background-color: #fff; */
    /* box-shadow: 0px 4px 8px rgba(0,0,0,0.1); */
    border-radius: 10px;
	display: block;
	unicode-bidi: isolate;
}

/* Header-Bereich spezifisch für den "header-main"-Section */
#header-main {
	width: 100%;
	background-color: #faf3e0;
	box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
	/* color: #fff; */
	/* padding: 20px 0; */
}

/* #header-main h1 { */
  /* text-align: center; */
  /* margin-bottom: 10px; */
/* } */

/* #header-main nav ul { */
  /* list-style: none; */
  /* display: flex; */
  /* justify-content: center; */
  /* padding: 0; */
/* } */

/* #header-main nav ul li { */
  /* margin: 0 15px; */
/* } */

/* #header-main nav ul li a { */
  /* color: #fff; */
  /* text-decoration: none; */
  /* transition: color 0.3s ease; */
/* } */

#header-main nav ul li a:hover {
  color: #ff6600;
}

button {
    background-color: #E1B12C;
    color: white;
    padding: 12px 18px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    /* background-color: #D0A125; */
	text-shadow: 0 0 8px #3A6B35; /* Leuchteffekt */
}
.image-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.image-container img {
    width: 45%;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}

ul {
    /* list-style: none;      /* Entfernt Standard-Bullets */ */
    padding: 0;
    margin: 20px auto;     /* Zentriert den UL-Container horizontal */
    display: inline-block; /* Der UL-Container passt sich dem Inhalt an */
    text-align: left;      /* Innere Texte sind linksbündig, damit Check-Zeichen gut erscheinen */
}

ul li {
    /* font-size: 1.0rem; */
    line-height: 1.6;
    padding: 10px 0;       /* Abstand zwischen den Listeneinträgen */
}

ul li::before {
    content: "";         /* Setzt das Check-Icon als Bullet */
    color: #3A6B35;        /* Harmonisches Grün */
    margin-right: 10px;
}

/* Entferne Standard-Aufzählungszeichen */
.methoden ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Jedes Listenelement erhält links Platz für das Icon */
.methoden li {
  position: relative;
  padding-left: 25px; /* Abstand für das Icon */
  margin-bottom: 10px;
}

/* Das Pseudoelement fügt vor jedem Listeneintrag einen Haken ein */
.methoden li::before {
  content: "\2713"; /* Unicode für den Check-Icon (✓) */
  color: green;     /* Farbe des Icons */
  position: center;
  left: 0;
  top: 0;
  font-weight: bold;
}

.ohneAufzaehlung ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.columns {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;             /* Abstand zwischen den Spalten */
	justify-content: center;
}

.columns .column {
	flex: 1 1 45%;         /* Nimmt ca. 45% der Breite ein */
	max-width: 45%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	overflow: hidden;
}

.columns .column img {
	width: 100%;
	height: auto;
	display: block;
}

.flex-container {
    display: inline-flex;
    justify-content: center; /* Zentriert das Bild horizontal */
    align-items: center; /* Zentriert optional auch vertikal */
    height: 100%; /* Optional: Höhe des Containers einstellen */
	max-width: 800px; /* Auch bei breiteren Bildschirmen nicht größer */
	
}

.flex-container-ham {
    display: flex;
    justify-content: left; /* Zentriert das Bild horizontal */
    align-items: center; /* Zentriert optional auch vertikal */
    height: 100%; /* Optional: Höhe des Containers einstellen */
	justify-content: space-between;
}

.flex-container-header {
    display: flex;
    justify-content: center; /* Zentriert das Bild horizontal */
    align-items: center; /* Zentriert optional auch vertikal */
    height: 100%; /* Optional: Höhe des Containers einstellen */
	max-height:150px;
}

.Hintergrundbild-section {
    background-image: url('./images/IMG_2196.png'); /* Bild für diese Section */
    background-size: cover; /* Volle Größe */

    background-repeat: no-repeat; /* Keine Wiederholung */
	width: 100%; /* Bild nimmt die volle Breite ein */ 
    height: 100vh; /* Volle Höhe */  
	border-radius: 0px;	
    display: flex; /* Flexbox für Zentrierung */
    align-items: flex-end; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
}
.text-overlay {
    color: blue; /* Helle Schrift für Kontrast */
    font-size: 1rem; /* Große Schrift */
    text-align: center; /* Zentrierter Text */
    background-color: rgba(255, 255, 255, 0.5); /* Halbtransparenter Hintergrund */
    padding: 20px; /* Innenabstand */
    border-radius: 10px; /* Sanfte Ecken */
}

.big-image {
    display: block; /* Standardmäßig sichtbar */
}

.small-image {
    display: none; /* Standardmäßig verborgen */
}

/* Für kleine Fenster */
@media (max-width: 500px) {
    .big-image {
        display: none; /* Großes Bild ausblenden */
    }

    .small-image {
        display: block; /* Kleines Bild anzeigen */
    }
	
	.columns .column {
	flex: 1 1 100%;
	max-width: 100%;
	
	}
	body, header, main, footer, div {
    /* display: block; */
    margin: 0px;
	padding: 0px;
	/* width: 100%; */
	}
	section {
		/* width: 88%; */
		/* width: 100%; */
		width: auto;
		border-radius: 0px;
		margin: 40px 0px;
			
	}
	
	.flex-container {
			flex-direction: column;
	}
	
	#container3 {
		width: 100%;
		border-radius: 0px;
			
	}
	
	table { 
		font-size: 12px; /* oder 11px, je nach Bedarf */ } 
		table td, table th { 
			padding: 4px; /* optional: engeres Padding */ 
		} 
	}
}


.navbar {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
	align-items: flex-end;
    padding: 0.5em 1em;
	color: #faf3e0;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1em;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    /*color: #faf3e0;*/
}

.hamburger {
    display: none;
    font-size: 1.5em;
    background: none;
    /* color: #fab504; */
	color: #3A6B35;
    border: none;
    cursor: pointer;
}

.hamburger.fixed {
	display: block;
	position: fixed;      /* ab Scroll-Threshold */
	top: 1rem;
	left: 1rem;
	transform: none;
	z-index: 1000;
}

/*----*/
.nav-links.fixed {
	display: none;
	flex-direction: column;
	position: fixed;
	z-index: 1001;
	top: 1rem;
	left: 4rem;
	background-color: #d0d0d0;
	width: auto;
	border-radius: 5px;
	padding: 1em;
}

.nav-links.show.fixed {
	display: flex;
}
/*----*/

@media (max-width: 500px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
		z-index: 2;
        top: 150px;
        left: 70px;
        background-color: #d0d0d0;
        width: auto;
        border-radius: 5px;
        padding: 1em;
    }

    .nav-links.show {
        display: flex;
    }

    .hamburger {
        display: block;
		font-size: 1.5em;
		background: none;
		/* color: #fab504; */
		color: #3A6B35;
		border: none;
		cursor: pointer;
    }
	.hamburger.fixed {
		/* position: fixed; */
		display: block;
		position: fixed;      /* ab Scroll-Threshold */
		top: 1rem;
		left: 1rem;
		transform: none;
		z-index: 1000;
	}
}

/* Container, der den Impressum-Inhalt zentriert, aber den Text linksbündig formatiert */
.imp-container {
  max-width: 800px;    /* Maximale Breite des Containers – anpassbar nach Bedarf */
  margin: 0 auto;      /* Zentriert den Container horizontal */
  text-align: left;    /* Innerhalb des Containers ist der Text linksbündig */
  padding: 20px;       /* Optional: Innenabstand für mehr Luft um den Inhalt */
}

/* Container, der die Bilder nebeneinander anordnet und bei Bedarf umbrechen lässt */
.gallery {
  display: flex;
  flex-wrap: wrap;              /* Bilder umbrechen, wenn nicht genügend Platz ist */
  justify-content: space-evenly;      /* Optional: Zentriert die Bilder horizontal */
  gap: 10px;                    /* Optional: Abstand zwischen den Bildern */
}

/* Bilder: 100% der Containerbreite, aber maximal 300px breit */
.responsive-img {
  width: 100%;
  max-width: 300px;
  flex: 1 1 auto;
  display: inline-block;
  box-shadow: 10px 10px 15px rgba(90, 90, 0, 0.4); /* Schatteneffekt */
  border: 0px solid #ddd; /* Rahmen um das Bild */
  border-radius: 0px; /* Abgerundete Ecken */
}

.responsive-img2 {
  width: 100%;
  max-width: 600px;
  flex: 1 1 auto;
  display: inline-block;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5); /* Schatteneffekt */
  border: 0px solid #ddd; /* Rahmen um das Bild */
  border-radius: 0px; /* Abgerundete Ecken */
}

/* Alternativ: Bei kleineren Auflösungen kann man eine Spaltenanordnung erzwingen */
@media (max-width: 600px) {
  .gallery {
    flex-direction: column;     /* Bilder werden in einer Spalte angeordnet */
    align-items: center;
  }
}



/* Test Karusell */
.carousel-auto {
  position: relative;
  overflow: hidden;
  max-width: 60%;
  margin: auto;
}

.carousel-auto-hochkant {
  position: relative;
  overflow: hidden;
  max-width: 25%;
  margin: auto;
}
/* Slides setup + Auto-Animation */
.slides {
  display: flex;
  width: 300%;                      /* 3 Slides nebeneinander */
  animation: slideAnim 12s infinite;
}
.slide {
  width: 100%;
  /* max-width: 1080px; */
  flex-shrink: 0;
}
.slide img {
  width: 33%;
  /* max-width: 1080px; */
  height: auto;
  object-fit: cover;
  display: block;
  
}

/* Keyframes für automatisches Durchwechseln */
@keyframes slideAnim {
  0%,   20%  { transform: translateX(0%); }
  25%,  45%  { transform: translateX(-100%); }
  50%,  70%  { transform: translateX(-200%); }
  75%, 100%  { transform: translateX(0%); }
}

/* Stoppt Auto-Loop bei Hover */
.carousel-auto:hover .slides {
  animation-play-state: paused;
}

/* ENDE Test Karusell */
.hausbesuche-section {
  background-color: #fffdf7;
  padding: 30px;
  border-radius: 8px;
  font-family: sans-serif;
  margin-bottom: 40px;
}

.hausbesuche-section h2 {
  color: #2e7d32;
  font-size: 1.8em;
  margin-bottom: 10px;
}

.hausbesuche-section p {
  font-size: 1.1em;
  line-height: 1.6;
}

.hausbesuche-hinweis {
  background-color: #f0f9f5;
  border-left: 6px solid #4CAF50;
  padding: 16px;
  margin: 20px 0;
  border-radius: 4px;
}

.hausbesuche-hinweis h3 {
  margin-top: 0;
  color: #2e7d32;
}

.hausbesuche-hinweis p {
  margin: 8px 0;
  font-size: 1.1em;
}

.hausbesuche-details {
  list-style-type: none;
  padding-left: 0;
  margin-top: 20px;
}

.hausbesuche-details li {
  margin-bottom: 10px;
  font-size: 1em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Booking Button */
.btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  background:#2d6a4f;
  color:#fff;
  border:0;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
}

/* Modal base */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal.is-open { display: flex; }

/* Backdrop */
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

/* Dialog */
.modal__dialog {
  position: relative;
  width: 92%;
  max-width: 1100px;
  max-height: 90vh;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
.modal__header {
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eee;
}
.modal__header h2 { margin: 0; font-size: 1.125rem; }

/* Close Button */
.modal__close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #333;
}

/* Body / iframe */
.modal__body {
  padding: 0;
  flex: 1 1 auto;
  min-height: 60vh;
}
#bookingIframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  min-height: 500px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .modal__dialog { max-width: 98%; max-height: 95vh; border-radius:6px; }
  .modal__header h2 { font-size: 1rem; }
}
/* ENDE Booking Button */