/* CSS Document */

html, body {
	
	overflow-x: hidden; /* Versteckt horizontale Scrollbars */
	
	}

.dicker-text {
      font-weight: bold;
	  font-size: 20px;
  }

  /* Standardmäßig ausgeblendet, wird nur für Desktop angezeigt */
  .desktop-layout {
      display: none;
  }

  nav {
	position: relative; /* oder 'absolute', 'fixed', 'sticky', je nach Bedarf */
    z-index: 10; /* Ein hoher Wert, um sicherzustellen, dass es über anderen Elementen erscheint */
}

.nav-begin {
	background-color: #333; /* funktioniert hier nicht, bei .navigation aber schon? */
	}
	
.nav-end {
	box-sizing: border-box;
	bottom: 0;
	width: 100%;
	height: 85px;
	background-color: #d2d2d2;
	position: sticky; /* oder 'absolute', 'fixed', 'sticky', je nach Bedarf */
    z-index: 10; /* Ein hoher Wert, um sicherzustellen, dass es über anderen Elementen erscheint */
	}

.navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.navigation li {
    float: left;
}

.navigation li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navigation li a:hover {
    background-color: #ddd;
    color: black;
}

.nav-table {
      width: 100%;
      border-collapse: collapse;
    }
    
.nav-table td {
      padding: 8px;
      text-align: center;
	  width: 13.7%;
    }
    
.nav-table a {
	  font-weight: bold;
      text-decoration: none;
      color: #333;
      display: none;
    }




/* Hamburger Menü für kleine Bildschirme */
.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 6px 0;
}
  
.mobile-layout {
    display: none;
	font-size: 35px;
}

@media screen and (min-width: 1000px) {
	.header {
		font-family: Arial, sans-serif;
		font-size: 20px;
	}
}

@media screen and (max-width: 768px) {
	body {
		overflow-x: hidden;
		display: block;
		padding: 0;
	}
		
	header {
		/*background-image: url('sonnenaufgang-hintergrund-linie-leer2.jpg'); /* Pfad zum Bild anpassen */
		background-size: cover; /* Bild über den ganzen Header strecken */
		background-position: center center; /* Bild zentrieren */
		background-repeat: no-repeat; /* Wiederholung des Bildes verhindern */
		/*height: 200px; /* Optional: Höhe auf kleineren Bildschirmen anpassen */
		width: 100%;
	}
	
    .header, .footer {
        /*padding: 10px;*/
		/*width: 100%;*/
    }
	
	.footer-link {
        padding: 0 5px;
    }
	
@media screen and (max-width: 768px) {
    .navigation {
		background-color: #333;
        display: none;
    }

    .hamburger {
        display: block;
        padding: 14px 16px;
        background-color: #333;
        color: white;
        text-align: center;
    }

    .navigation.responsive {display: block;}
	
	
	.navigation li {
        float: none;
    }
    .navigation li a {
        display: block;
        text-align: left;
    }
}

/* Media Query für Desktop */
@media only screen and (min-width: 1200px) {
	  
/* Mobile Layout als Standard */
	  
.desktop-layout {
    display: block;
}

.nav-table a {
    display: block;
}