@font-face{
	font-family:'Architects Daughter';
	font-weight:400;
	src:url('architectsdaughter-regular-webfont.woff2') format('woff2'),
		url('architectsdaughter-regular-webfont.woff') format('woff');
	
}

html,body{
	  height: 100%;
font-family:arial;
margin: 0 auto;
background-color:#FFDAB9;
}
body {
	display: flex;
	flex-direction: column;
	align-items: center;
		
}



#main{
	flex: 1 0 auto;
	clear: both;
	width:100%;
	overflow-y: auto; /* Übergrößen rechts scrollbar */
	margin: 0 0 0;
}


#main::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

#main::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}

.main_innen {
    display: flex;
	flex-direction: column; 
    align-items: center; /* Zentriert den inneren Container horizontal */
    padding: 20px; /*  Innenabstand */
    box-sizing: border-box; /* Berücksichtigt padding in der Breite */
	background-color:#FFDAB9;
	color:#333333;
	font-family: Arial, sans-serif; /* Schriftart Tahoma */
	font-size:20px;
	position: relative; /* Position relativ zu Header */
    z-index: 1; /* Niedrigerer z-index, damit mobile Menü überlagert */
}

.main_innen p {
    width: 100%;
    max-width: 1000px; /* Begrenzung der maximalen Breite */
    text-align: left; /* Linksbündiger Text */
    margin: 20px 0 0 0; /* Entfernt Standardabstand */
}
.main_innen #map{
	 width: 100%;
    max-width: 1000px; /* Begrenzung der maximalen Breite */
    text-align: left; /* Linksbündiger Text */
    margin: 20px 0 0 0; /* Entfernt Standardabstand */
}


#ueber0{
	font-family:'Architects Daughter',sans-serif;
	font-size:42px;
	line-height:50px;
	margin: 10px 0 10px 0;/* Abstand nach oben und unten */
	
	
}	
#ueber{
	font-family:'Architects Daughter',sans-serif;
	font-size:42px;
	line-height:50px;
	margin: 50px 0 10px 0;/* Abstand nach oben und unten */	
}

#ueber_klein{
	font-family:'Architects Daughter',sans-serif;
	font-size:38px;
	line-height:50px;
	margin: 20px 0 10px 0;/* Abstand nach oben und unten */	
}

#header{
	display: flex;
	align-items: center; /* Vertikale Zentrierung der Inhalte */
	justify-content: center; /* Horizontale Zentrierung */
	height:130px;
	width:100%;
	box-shadow: 0 4px 10px -4px #706F6F;
	position:fixed;
	background-color:white;
	z-index: 100; /* Hoher z-index für Header */
}


#logo{
	
/*width:100%;*/
	background-color:white;	
}

#logo img{
 
height:120px;
	
}

#menue1 {
    display: flex;
    align-items: flex-end; /* Richtet den Inhalt unten im Div aus */
    height: 120px;
    margin-left: 5vw; /* Optionaler Abstand zwischen den Divs */
    color: #706F6F;
    overflow: hidden;
}

#menue1 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Zentriert die Menüpunkte horizontal */
}

#menue1 ul li {
    margin: 0 10px; /* Abstand zwischen den Menüpunkten */
}

#menue1 ul li a {
    display: block;
    color: #706f6f;
    text-align: center;
    padding: 14px 10px;
    text-decoration: none;
    position: relative; /* Notwendig für die Unterstreichung */
}

#menue1 ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #e97132;
    transition: width 0.3s, left 0.3s;
}

#menue1 ul li a:hover::after,
#menue1 ul li a.active::after {
    width: 100%;
    left: 0;
}

#menue1 ul li a:hover,
#menue1 ul li a.active {
    color: #e97132;
}

#footer {

	//top:100%;	
	color:black;
    width: 100%;
	height: 100px;
	//margin-top:-20px;
	/* background-color: #fb8e54;*/
	background-color: white;
	text-align:center;   
	flex-shrink: 0;
}

.image-container {
	margin-top: 120px;
    width: 100%;
	height: 92vh; /* Container soll volle Höhe des Viewports einnehmen */
    overflow: hidden; /* Verhindert Überlauf */

}

.responsive-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild proportional skalieren und Container abdecken */
    object-position:top center; /* Zentriert das Bild innerhalb des Containers */
    max-height: 92vh; /* Verhindert, dass das Bild mehr als 8% in der Höhe reduziert wird */
	
}



:root {
  --primary: #333333;
  --secondary: #ff5252;
  --background: #eee;
  --highlight: #ffda79;
  /* Theme color */
  --theme: var(--primary);
}

*, *::before, *::after {
  box-sizing: border-box;
}

.tab {
    width: 100%;
}

/* Core styles/functionality */
.tab input {
  position: absolute;
  opacity: 0;
}
.tab__content {
	 overflow: hidden; /* Verhindert Überlauf des Inhalts */
  transition: height 0.35s ease; /* Weicher Übergang bei Höhenänderung */
  height: 0; /* Standardhöhe auf 0 setzen */
}
.tab input:checked ~ .tab__content {
	height: auto; /* Höhe automatisch anpassen, wenn der Tab geöffnet ist */
}

/* Visual styles */
.accordion {
  color: var(--theme);
  border: 2px solid;
  border-radius: 0.5rem;
  overflow: hidden;
  
  width: 100%;
    max-width: 1000px; /* Gleiche maximale Breite wie die Textelemente */
    margin: 10px 0 0 0; /* Gleiche linke Ausrichtung wie #ueber */

}
.tab__label,
.tab__close {
  display: flex;
  color: white;
  background: var(--theme);
  cursor: pointer;
}
.tab__label {
  justify-content: space-between;
  padding: 1rem;
}
.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.tab__content p {
  margin: 0;
  padding: 1rem;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}


/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce .5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}
/* Hamburger Menu Styles */
#hamburger-menu {
    display: none;
    position: relative;
}

#menu-toggle {
    display: none;
}

/* Hamburger Menu Styles */
#hamburger-menu {
    display: none;
    position: absolute; /* Positionieren relativ zum nächsten positionierten Element */
    top: 0; /* Am oberen Rand des Headers */
    right: 0; /* Am rechten Rand des Headers */
    display: flex;
    align-items: center; /* Vertikale Zentrierung innerhalb des Containers */
    height: 100%; /* Höhe an die Höhe des Headers anpassen */
}

/* Hamburger Icon */
.hamburger-icon {
  /*  font-size: 30px;
    cursor: pointer;
    display: none;*/ /* Standardmäßig ausblenden */
   /* padding: 10px;*/
	
	
	 cursor: pointer;
    display: none; /* Standardmäßig ausblenden */
    padding: 10px;
    position: relative;
    width: 30px;
    height: 24px;
    justify-content: center;
    align-items: center;
	top:	95px;
	right: 20px;
}

.hamburger-icon span {
	
    background: #333;
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-icon span:nth-child(1) {
    top: 0;
}

.hamburger-icon span:nth-child(2) {
    top: 10px;
}

.hamburger-icon span:nth-child(3) {
    top: 20px;
}

#menu-toggle:checked + .hamburger-icon span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

#menu-toggle:checked + .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

#menu-toggle:checked + .hamburger-icon span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}


/* Mobile Menu */
#mobile-menu {
    display: none; /* Standardmäßig ausblenden */
    position: absolute; /* Positionieren relativ zum nächstgelegenen positionierten Container */
    top: 130px; /* 130px von oben starten */
    right: 0; /* Rechtsbündig am Hamburger-Icon */
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 200px;
    /*height: calc(100vh - 230px);*/ /* Höhe des Viewports minus 100px */
    transform: translateX(100%); /* Menü außerhalb des Sichtbereichs nach rechts verschieben */
    transition: transform 0.3s ease-in-out; /* Animation für die Einblendung */
    z-index: 101; /* Über anderen Inhalten anzeigen */
}

#mobile-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#mobile-menu ul li {
    margin: 0;
}

#mobile-menu ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #706F6F;
    border-bottom: 1px solid #ccc;
}

#mobile-menu ul li a:hover,
#mobile-menu ul li a.active {
    background: #e97132;
    color: white;
}

/* Media Query für mobile Geräte */
@media (max-width: 950px) {	
	
	#logo{
		margin-right:20px;	/*Für den Abstand zum Hamburger Menü*/
	}
	#logo a{
		pointer-events: none;
        cursor: default;
	}
	
    #menue1 {
        display: none; /* Desktop-Menü ausblenden auf kleinen Bildschirmen */
    }
    #hamburger-menu {
        display: block; /* Hamburger-Menü-Container anzeigen */
    }
    .hamburger-icon {
        display: block; /* Hamburger-Icon anzeigen */
    }
	
	/* Mobile Menu sichtbar machen */
    #mobile-menu {
        display: block; /* Menü sichtbar machen, wenn der Toggle aktiviert ist */
    }
    #menu-toggle:checked ~ #mobile-menu {
        transform: translateX(0); /* Menü in den sichtbaren Bereich verschieben */
    }
}