@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
  }


html {
    font-size: 1vw; /* Basisschriftgröße relativ zur Viewport-Breite */
}



body {
	 font-size: 2vh; /* Basisschriftgröße relativ zur Viewport-Höhe */
  /*   font-size: 16px; Basis-Schriftgröße */
    background-image: url('../icon/hintergrundbild_01.jpg'); /* Hintergrundbild einfügen */
    background-size: cover; /* Hintergrundbild den gesamten Viewport abdecken lassen */
    background-position: center; /* Zentriert das Hintergrundbild */
    background-attachment: fixed; /* Hintergrundbild fixiert */

    overflow-x: hidden; /* Scrollbar immer anzeigen */
}



header {
 	position: fixed;
	top: 0; /* Am oberen Rand ausrichten */
	width: 75vw;
	height: 25dvh; /* Höhe des Headers in Pixeln */
	/* background-color: rgba(0, 0, 0, 0.5); /*Hintergrundfarbe für den Footer mit Transparenz */  */
    /* color: #fff;   */
	display: flex;
   	/* padding: 2em; /* Padding im Header */
	align-items: center;
	 z-index: 100;
	}
	

.kopf {
    padding-left:	8vw;
	padding-top:	10vh;
	}


	
.toggle
    {
    position:fixed;
	
	margin-left:	75vw;
	margin-top:		5.5vh;
	padding-left:	10vw;
	padding-top:	10vh;
	
	
	width: 65px;
    height: 60px;
    background: url('../icon/menue_03_cr_rev-removebg-preview.png');
    background-repeat: no-repeat;
    background-size: 6vw; /* Größe des toggle icons*/
    background-position: center;
    cursor: pointer;
   	}
	
.toggle.active
    {
    background: url('../icon/close_03_cr_rv-removebg-preview.png');
    background-repeat: no-repeat;
    background-size: 6vw; /* Größe des toggle icons*/
    background-position: center;
    cursor: pointer;
	}





.main-container {
	height: 70dvh; /* Höhe des Headers in Pixeln */
	position: fixed;
	margin-top: 28vh; /* Abstand vom Header */ 
    margin-bottom:95vh; /* Abstand zum Footer */
/*	height: calc(100vh - 160px); /* Vollständige Bildschirmhöhe minus Höhe des Headers */
	/* padding: 2em; /* Platz um den Artikel */ 
    margin-right: 0em; /* Abstand zwischen den Artikeln */
    overflow-y: auto; /* Vertikalen Scrollbalken anzeigen, wenn der Inhalt höher als die Höhe des Containers ist */

}


.text {
		padding-left:	8vw;
		padding-right: 	10vw;
		padding-top:	1vh;
		padding-bottom:	8vh;
		height: calc(100vh - 35vh); /* Berechnen Sie die Höhe des Textbereichs, um Platz für den Header zu machen */
		}

.text h3    {
	padding-top:	1vh;
	}	

.wrapper {
    display: flex;


.vertical::-webkit-scrollbar {
  width: 1em;
  background-color: #ddd;
}

.vertical::-webkit-scrollbar-thumb {
  background-color: hsl(0,0%,70%);
}

.vertical {
	height: 30vh;
	scroll-snap-type: y mandatory;
	scroll-snap-type: mandatory;
	overflow-y: scroll;
	scrollbar-color: orange blue; /** Firefox **/			
}

vertical-section {
	scroll-snap-align: start;
}

	
	}

nav {
 	position: float;
	float: left;
    width: 65vw; /* Breite des Nav */
	padding-top: 2vh;
	padding-bottom: 10vh;
}



/* 	Blog / Sidebar */

.content {
    position: fixed;
	right: 0px;
	bottom: 5vh; 
	width: 25vw;
	height: 46vh; /* Feste Höhe für den Artikel */
	padding-left: 2vw;
	padding-right: 3vw; 
	padding-top: 1vh;
	padding-bottom: 1vh;
	overflow-x: hidden; /* Horizontale Überlaufverwaltung */
	/* display: flex;  Flexbox verwenden */
    flex-wrap: nowrap; /* Keine Umbrüche in Flex-Elementen */
    justify-content: space-between; /* Platz zwischen den Elementen */
	background-color: rgba(36, 68, 56, 0.2); /* Hintergrundfarbe */
 	overflow-x: hidden; /* Horizontale Überlaufverwaltung */
	overflow-y: auto; /* Vertikalen Scrollbalken anzeigen, wenn der Inhalt höher als die Höhe des Containers ist */
	   /* margin-left: auto;  */
	}



/* Ende - Blog / Sidebar */


/* 	Fußzeile ----------------------------------------------------------------------------------------------------------------------------------------------------------*/


footer {
    position: fixed; /* Footer wird am unteren Rand des Viewports fixiert */
    bottom: 0; /* Am unteren Rand ausrichten */
    width: 65vw; /* Volle Breite des Viewports */
    height: 10dvh; /* Höhe des Footers in Pixeln */
    /* background-color: rgba(0, 0, 0, 0.5); /*Hintergrundfarbe für den Footer mit Transparenz */  
    /* color: #fff;   */
    display: flex; /* Flexbox verwenden */
    align-items: center; /* Elemente vertikal zentrieren */
}

.social a {
    margin-left: 7rem; /* Linksabstand anpassen */
	
	padding-top: 0rem;
	display: inline-block;
    filter: invert(1); 
    transform: scale(0.45);
}

.social a:hover {
    transition: 0.6s;
    transform: scale(0.55);
    filter: none; /* Aufhebung der Invertierung */ 
}


/* Ende	Fußzeile -------------------------------------------------------------------------------------------------------------------------------------------------------*/


/* 	Sidebar */


.menu-container {
   	position: absolute;
	padding-left:	90vw; 
	padding-right: 	4vw;
	padding-top:	1vh;
	padding-bottom:	2vh;
	align-items: center;
	}

.menu.active {
    right: 0; /* Menü wird beim Einblenden rechtsbündig zum Viewport verschoben */
	}


.menu {
    
	display: flex;
	align-items: center; /* Vertikale Zentrierung */  
	position: fixed;
    margin-top: 0vh; /* Abstand vom Header */ 
    margin-bottom: 25vh; /* Abstand zum Footer */
 /* 	height: 100%; /* Vollständige Bildschirmhöhe minus Höhe des Headers */

	height: calc(100vh - 51vh); /* Vollständige Bildschirmhöhe minus Höhe des Headers */
	/* top: 92px; Menü beginnt 60px unterhalb des oberen Bildrands (entspricht der Höhe des Headers) */
    
	right: -25vw; /* Menü ist standardmäßig ausgeblendet (Breite des Menüs beachten) */
    width: 25vw; /* Breite des Menüs */
    /* height: calc(100vh - 184px); /* Höhe des Menüs (Viewport-Höhe abzüglich Header- und Footer-Höhe) */ 
	background-color: rgba(36, 68, 56, 1.0);
  	/* background-color: #244438; */
	overflow-y: auto; /* Sorgt für eine vertikale Scrollbar, wenn der Inhalt zu groß ist */
    transition: right 0.3s ease; /* Fügt eine sanfte Animation hinzu */
	z-index: 10;
	}




.menu ul li
	{
	margin-left: 3vw;
	margin-bottom: 5px;
	padding-top: 15px;
    padding-right: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
		list-style: none;
 	/*line-height: 0.5em;  /*Zeilenabstand  */ 
	z-index: 10;
	}
	
.menu ul li a
	{
	text-decoration: none;
 	list-style: none;
	font-weight: 300;
	color: #fff;
	}
	
.menu ul li a:hover
	{
	color: #CDE1D6;
	letter-spacing: 0.9px;
	font-weight: 500;
	text-decoration: underline;
	transition: 0.5s;
	z-index: 10;
	}




/* 	Ende- Sidebar */



@media screen and (max-width: 767px) {

header 	{
 		width: 50vw;
		}

	.kopf {
 	padding-top:	0vh;
		}
	
	.kopf h1 {
		padding-top:	4vh;
		}
		
	.toggle {
		background-size: 18vw;
       	}
	
	.toggle.active {
		background-size: 18vw;
    	}

	.main-container {
		margin-top: 15vh; /* Abstand vom Header */ 
		margin-bottom: 20vh; 
		}


    .wrapper {
        flex-direction: column; /* Elemente in einer Spalte anzeigen */
		}

    nav {
        position: relative; /* Positionierung ändern */
        float: left;
        width: 80vw; /* Breite des Nav */
        padding-top: 2vh;
        padding-bottom: 10vh;
		}

    /* Blog / Sidebar */
    .content {
        position: relative;
        margin-right: 0em; /* Abstand zwischen den Artikeln */
		padding-left:	1vw;
		padding-right: 	10vw;
		padding-top:	1vh;
		padding-bottom:	8vh;
		width: 80vw;
		height: calc(100vh - 35vh); /* Berechnen Sie die Höhe des Textbereichs, um Platz für den Header zu machen */
		}
	
	.menu {
		right: -40vw; /* Menü ist standardmäßig ausgeblendet (Breite des Menüs beachten) */
		width: 40vw; /* Breite des Menüs */
		}

	footer {
		height: 15vh; /* Höhe des Footers in Pixeln */
		}	

	.social a {
		transform: scale(0.3);
		padding-top: 15rem;
		}		
		}