:root {
  --orange: #D87605;
  --dunkelorange: #B65A00;
  --nav-beige: #E0D0b6;
  --blau: #253A48;
  --schwarz: #333;
  --weis: #FFFFFF;
}
*{
	margin: 0;
	padding: 0; 
}
html{
	height: 100%;
}
body{
	height: 100%;
	background-color: var(--orange); 
}
			/* Navigationsleiste */
nav{
	/*position: ;*/
  	height:35px;
  	width:100%;
	background-color: var(--nav-beige);
	box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
  	padding: 10px 20px 10px;
}
nav li img{
  width: 30px;
  height: 30px;
  margin-right: 20px;
}

nav li{
  display: inline-block;
  margin-right: 20px;
}
nav li a{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size:25px;
  color: var(--blau);
  text-decoration: none;
}
nav li a:hover{
  color: var(--dunkelorange);
}

nav ul li .activ{
  color: #D87605;
}
nav icon  { 
  float: right;
  align-items: center;
  margin-right: 20px;
  text-decoration: none;}

nav icon a
{text-decoration: none;
font-size: 32;}
.icon{}

.box{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
   }
.instagram {
  position: absolute;
  width: 32px;
  height: 32px;
  background: radial-gradient(
    circle at 30% 110%,
    #ffdb8b 0%,
    #ee653d 25%,
    #d42e81 50%,
    #a237b6 75%,
    #3e57bc 100%
  );
   border-radius: 7px;
   display: flex;
  justify-content: center;
  align-items: center;}

.instagram::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  border: 2px solid #fff;
  height: 20px;
  width: 20px;
  border-radius: 6px;
}
.instagram::before {
  content:"";
  position: absolute;
  top: 9.8px;
  right: 9.8px;
  border: 2px solid #fff;
  height: 9px;
  width: 9px;
  border-radius: 50%;
}
nav icon a span {
  position: absolute;
  display: block;
  top: 8px;
  right: 8px;
  width: 2.4px;
  height: 2.4px;
  background-color: #fff;
  border-radius: 50%;
}


			/*Startseite?*/
main {
	text-align: center;
	margin: 0 Auto;
	padding: 20px ;
	color: #253A48;
}
main
	.klein{ font-size: 16px; }
	.groß { font-size: 40px; }

click-on {
	text-align: center;
  	padding: 40px 40px;
	color: rav (--blau);}
	.klein{ font-size: 16px; }
	.groß { font-size: 40px; 
	font-weight:bold;}

click-on ul { float:center;}
click-on li
	{float: center;
    display: inline-block;
 	margin-right: 40px;}

  .Rahmen {
    width: 250px;
    height: 250px;
    margin: 100px auto;
    background-color: #E0D0b6;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1); 
	position: relative; 
    overflow: hidden;}

  .Rahmen img {
    width: 100%;
    height: 100%;
    object-fit: cover;}

.tooltiptext {
  visibility: hidden;
  width: 250px;
  height: 250px;
  border-radius: 8px;
  background-color: rgba(224, 208, 182, 0.9) /*#E0D0b6*/;
  color:#263B49;
  position: absolute;
  top:0;
  left:50%;
  padding:10px;
  transform: translateX(-50%);
  z-index: 2;
  box-sizing: border-box;
  transition: visibility 0.3s ease, opacity 0.3s ease;
  opacity:0;
  
}

.Rahmen:hover .tooltiptext {
  visibility: visible;
  opacity:1;}
click-on li a {
 	font-family: Arial, Helvetica, sans-serif;
  	text-align: center;
  	vertical-align: bottom;
  	font-weight: bold;
 	font-size:20px;
  	color: #FFFFFF;
  	text-shadow: 
    -1px -1px 0px #253A48, 
    1px -1px 0px #253A48,
    1px 1px 0px #253A48,  
    -1px 1px 0px #253A48; 
   	text-decoration: none;
  	display:flex;
  	position:absolute;
  	bottom:20px;
  	left:10px;
  	right:10px;
  	z-index:3;
	}
  
click-on li a:hover {color: #B65A00;}

			/* Kontakt Seite*/
kontakt
	.kontakt-container {
    float: center;
    max-width: 600px;
    margin: 20px auto;
   	background-color: #E0D0b6;
	padding: 20px 10px 40px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1); }

Kontakt h1 {
    text-align: center;
    color: #263B49; }

	.kontakt-info {
    display: flex;
    align-items: center;
    margin: 20px 0; }

	.icon {
    font-size: 24px;
    margin-right: 15px;
    color: #4CAF50;  }

  .details {
    font-size: 18px; }
/*BLOG*/

Verzeichnis {}

.menu-button {
  position: fixed;
  top: 55px;
  left: 1rem;
  font-size: 2rem;
  cursor: pointer;
  z-index: 1001;
  user-select: none;
  color:white;
}

.nav1 {
  position: fixed;
  top: 55px;
  left: -250px; /* Aus dem sichtbaren Bereich geschoben */
  width: 200px;
  height: 100%;
  background-color: #263B49;
  color: #E0D0b6;
  transition: left 0.3s ease;
  padding-top: 4rem;
  z-index: 1000;
}

.nav1.active {
  left: 0;
}

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

.nav1 ul li {
  margin: 1rem 0;
}

.nav1 ul li a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  display: block;
}
projekt-main {	
  width:100%;
  margin: 0 Auto;
  color: rav(--nav-beige);}

 .Titelbild-container{
  width:90%;
  margin: auto;
  overflow:hidden;
  background-color: var(--nav-beige);
  position: relative;
    
}
 .Titelbild-container img {
   width:100%;
   height:300px ;
   display:block;
 object-fit: cover;


}
.titel-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  background: #D87605;
  padding: 1rem;
  border-radius: 8px
  border: 6px solid #B65A00 ;
}

abschnitt1 {
  font-family: Arial, sans-serif;
  margin-top: 50px;
  padding: 0;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
        }
        
  .iframe-container { 
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  height: 90%;
  width: 90%;
  background-color: #B65A00; 
  position:relative;
        }

abschnitt1 iframe {
  width: 100%;
  height: 100%;
  border: none; /* Kein Rahmen um das iframe */
  position: absolute;
  top:0;
  left:0;
        }