:root{
    --Hintergrundweiss: white;
    --Hintergrundgrau: #D6DDE6;     /*  Grau von Wand aus Panoramabild */
	--Schriftart: Alegreya Sans;        /* Alegreya Sans; Scope One; Arial; Verdana; Rubik; Georgia; Open Sans; Roboto; Lora; Lato;  */
    --Schriftgrau: #383838;
	--Schriftblau: #232C66;
	--Schriftrot: #800000;
    --navbar-height: 80px;
	--H1gross: 22px;
	--Schriftgross: 20px;
	--H1klein: 20px;
	--Schriftklein: 18px;
	--accent-color: #F1F1F1;
}


    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


	html{
    height: 100%;
	}
	
	body{
    height: 100%;
	background-color: Hintergrundweiss;
    font-size: var(--Schriftgross); 
	font-family: var(--Schriftart);
	}


	
	/* alegreya-sans-regular - latin */
	@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Alegreya Sans';
	font-style: normal;
	font-weight: 400;
	src: url('./fonts/alegreya-sans-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}

	

	a {text-decoration: none;} 

    a:link {
      color: var(--Schriftblau); 
    }
    a:visited {
      color: var(--Schriftblau); 
    }
    a:hover {
      color: var(--Schriftrot); 
      /* text-decoration: underline; /* Unterstreichung hinzufügen */ */
    }
    /* a:active { */
      /* color: blue; /* Wenn der Link angeklickt wird */ */
    /* } */

	.ImpDat a {
	word-break: break-word;
	overflow-wrap: anywhere;
	}

	/* .ImpDat { */
	/* word-wrap: break-word; */
	/* overflow-wrap: anywhere; */
	/* word-break: break-word; */
	/* } */

.wrapper {
	 /* padding-left: 100px; */
     /* padding-right: 100px; */
     width: 90%; /* Legt eine maximale Breite fest */
     margin: 0 auto; /* Zentriert den Wrapper im Browserfenster */
}	

div.balken {
    width: 100%; 
    height: 5px; 
    background-color: var(--Schriftblau); 
    box-sizing: border-box;   /* Stellt sicher, dass Padding und Border zur Breite gehören */
  }


  h1{
    font-size: var(--H1gross);
	font-weight: bold;
	/* font-variant: small-caps; */
	color: var(--Schriftblau);
    }

div.Ueberschrift{
    font-size: var(--H1gross);
	font-weight: bold;
	color: var(--Schriftblau);
	text-align: center; 
	justify-content: center; 
	padding-top: 20px;
	padding-bottom: 20px;
    }


		
	
	 
   img {
         max-width: 100%;
         height: auto;
        }
		
	.responsive-image{
		width: 50%;
		margin: 0 auto; /* Zentriert das Bild */
		max-width: 100%;
		height: auto;
   }
  

  /* Anfang Impressum/Datenschutz  */	
 
    .ImpDat{
		Padding-left:50px;
		Padding-right:50px;
		max-width: 100%;
        }		
		
	.link-container {
		display: flex;
		gap: 20px;
		margin-bottom: 10px;
    }

    .toggle-content {
      display: none;
      margin-bottom: 10px;
      padding: 10px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
    }

    .content {
      margin-top: 20px;
    }

    a.toggle-link {
      cursor: pointer;
      color: blue;
      text-decoration: underline;
    }
    /* Ende Impressum/Datenschutz  */	
	
	
	.centered-list {
	text-align: center; /* zentriert den Block insgesamt */
	}

	.centered-list ul {
	display: inline-block; /* macht die Liste zentriert, aber mit eigenem Block */
	text-align: left;      /* sorgt dafür, dass die Punkte bündig stehen */
	list-style-position: outside;
	padding-left: 50px;   /* etwas Abstand für die Punkte */
	}

div.container {
    display: flex; /* ordnet Kindelemente nebeneinander an */
	justify-content: center;
    }

.bereich1, .bereich2 {
	 Padding-left: 0;
	 Padding-left: 0;	 
	 align-items: center;
     display: inline-block; /* Elemente werden nebeneinander angezeigt */
     width: 50%; /* Jedes Element ist die Hälfte breit */
     box-sizing: border-box; /* Verhindert, dass padding und border die Gesamtbreite überschreiten */
    /* border: 1px solid black;       Rahmen sichtbar */
    }


    .einzelbild-container img {
      width: 60%;
      max-width: 100%;
      height: auto;
    }
	
    .bild-container {
      display: flex;
      flex-direction: row;
      gap: 0px; /* Abstand zwischen Bildern; wenn groesser 0 wird beim umbruch eine Leerzeile eingefügt*/
	  text-align: center;
    }

    .bild-container img {
      width: 90%;
      max-width: 100%;
      height: auto;
	  position: relative; 
	  display: block;
	  padding-top: 20px; 	  
	  margin-top: auto; 
	  margin-left: auto; 
	  margin-right: auto;
	  align-items: center;	 	  
	  z-index: 1;
    }

    .text {
      flex: 1; /* Text nimmt den restlichen Platz ein */
    }

    .bild-wrapper {
      flex: 1;
    }

   .BTcontainer {
      display: flex;
      flex-direction: row; /* Standard: Bild und Text nebeneinander */
      align-items: center;
      gap: 20px; /* Abstand zwischen Bild und Text */
    }

    .BTcontainer img {
      width: 50%;
      height: auto;
	  justify-content: center;
	  align-items: center;
	  text-align: center;
	  Padding: 20px 20px 20px 20px;
    }

    .BTtext {
	  text-align: center;
	  flex: 1; /* Text nimmt den restlichen Platz ein */
    }

    .Textzentriert {
	  text-align: center;
	  flex: 1; /* Text nimmt den restlichen Platz ein */
	  padding-left: 80px;
	  padding-right: 80px;
    }


    /* Auf kleinen Bildschirmen (unter 768px) untereinander */
    @media (max-width: 600px) {
		
	body{font-size: var(--Schriftklein;)}
	
	h1{font-size: var(--H1klein;)}	

	.BTtext{font-size: var(--Schriftklein;)}	

	
    .bild-container {
        flex-direction: column;
		text-align: center;
      }
	  
	.bild-container img {
      width: 90%;
      max-width: 100%;
      height: auto;
	  gap: 0;    /*  kein zusätzlicher Abstand beim Umbruch  */
    }  
	.BTcontainer {
        flex-direction: column;
		text-align: center;
      }
	  
	.BTcontainer img {
      width: 70%;
      height: auto;
	  Padding: 20px 20px 20px 20px;
    }
	  
	.responsive-image {
       width: 90%;
	}  
    .einzelbild-container img {
        width: 80%;
        max-width: 100%;
        height: auto;
      }
	  
    .ImpDat{
		Padding-left:10px;
		Padding-right:10px;
		width: 100%;
        } 

    .Textzentriert {
	  text-align: center;
	  flex: 1; /* Text nimmt den restlichen Platz ein */
	  padding-left: 20px;
	  padding-right: 20px;
    }		
    }
	


  /* Google link */	
  
	.map-container {
	max-width: 100%;
	margin: 10px 0;
	}

	.map-placeholder {
	background-color: var(--accent-color);
	padding: 20px;
	text-align: center;
	border: 1px solid #ccc;
	}

	.map-placeholder p {
	margin-bottom: 10px;
	}

	.map-placeholder button {
	padding: 10px 20px;
	cursor: pointer;
	}

	.map-responsive {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 ratio */
	height: 0;
	overflow: hidden;
	}

	.map-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	}



     /* Menue */
	 /*-------*/

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 30px 0px;
      background-color: white;
      color: var--(Schriftblau);
      position: relative;
    }

    .logo img {
      height: 75px;
    }

    .menu {
      display: flex;
      gap: 25px;
	  font-size: var(--H1gross)
    }

    .menu a {
      color: var(--Schriftblau);
      text-decoration: none;
      padding: 8px 12px;
      transition: background-color 0,5s;    /* Aenderung für halbe Sekunden */ 
    }

    .menu a:hover {
      background-color: var(--Hintergrundgrau);
	  color: var(--Schriftrot);
      border-radius: 4px;
    }

    .menu-toggle {
      display: none;
      font-size: 28px;
      cursor: pointer;
      background: none;
      border: none;
      color: var(--Schriftblau);
	  text-align: right; 
    }

    /* Responsive */
    @media (max-width: 900px) {
      .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 30px;
        background-color: var(--Hintergrundgrau);
        width: 110px;
        padding: 4px;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);      /* Schatten für das Menue */
        z-index: 1000;
      }

      .menu.active {
        display: flex;
      }

      .menu-toggle {
        display: block;
      }
	  
	  .logo img {
      height: 55px;
	  } 
	
    }