:root {
        --tugreen:          #005f50;
        --hintergrund:      #1F2933;
        --lesefarbe:        #1F2933;
        --platin:           #d8d8d8; 
        --schriftart:       'Roboto Light';
        --weiss:            #ffffff;
        --letter-spacing:   0.13vh;
        --Grün:             #043927;
        }
 
/*  #1F2933   Grauschwarz   */
/*  #d8d8d8   Platin        */
/*  #30000A   Rot           */
/*  #005934   Grün          */
/*  #612A6F   Lila          */
/*  #005f50   TU-Green      */


        /* Allgemeine Stilregeln für die gesamte Seite */
        body {
            margin: 0;
            font-family: var(--schriftart);
            background-color: var(--weiss);
            color: var(--platin);
            overflow-y: scroll; /* Aktiviert das vertikale Scrollen */
            scrollbar-width: thin; /* Für Firefox, macht die Scrollbar dünn */
            scrollbar-color: transparent; /* Scrollbar-Farbe für Firefox */
            letter-spacing: var(--letter-spacing);
            }

        /* Stilregeln für den Header */
        header {
            position: relative; /* Ermöglicht das Positionieren der Elemente relativ zum Header */
            padding-bottom: 30px; /* Platz für die Buttons und die Linie */
            border: none; /* Entfernt den Rahmen des Headers */
            box-shadow: none; /* Entfernt den Schatten des Headers */
            margin: 0; /* Entfernt äußeren Abstand des Headers */
            display: flex; /* Flexbox-Layout für die zentrale Ausrichtung */
            flex-direction: column; /* Anordnung der Inhalte in einer Spalte */
            justify-content: center; /* Zentriert die Inhalte vertikal */
            align-items: center; /* Zentriert die Inhalte horizontal */
            text-decoration: none; /* Entfernt die Textdekoration (falls vorhanden) */
            position: fixed; /* Fixiert den Header am oberen Rand der Seite */
            z-index: 1000; /* Stellt sicher, dass der Header über anderen Elementen liegt */
            top: 0; /* Setzt den Header an den oberen Rand der Seite */
            left: 0; /* Setzt den Header an den linken Rand der Seite */
            right: 0; /* Setzt den Header an den rechten Rand der Seite */
            min-height: 16.67vh; /* Mindesthöhe des Headers als Prozentsatz der Viewport-Höhe */
            max-height: 16.67vh; /* Maximale Höhe des Headers als Prozentsatz der Viewport-Höhe */
            background-color: var(--hintergrund); /* Hintergrundfarbe des Headers */
            color: #d8d8d8; /* Textfarbe im Header */
            font-family: var(--schriftart);
            width: 100%; /* Breite des Headers auf 100% des Viewports setzen */
            box-sizing: border-box; /* Padding und Border in die Breite einbeziehen */
            }


        ::-webkit-scrollbar {
            width: 0px; /* Scrollbar-Breite */
            height: 0px; /* Für horizontale Scrollbars */
            width: 0; /* Breite der Scrollbar auf 0 setzen */
            background: transparent; /* Hintergrund transparent */
            overflow: hidden;
            }

        ::-webkit-scrollbar-track {
            background: transparent; /* Hintergrund der Leiste */
            overflow: hidden;
            }        
            
        ::-webkit-scrollbar-thumb {
            background: transparent; /* Der eigentliche "Schieber" */
            overflow: hidden;
            }

        html, body {
                /* Ermöglicht vertikales Scrollen ohne sichtbare Scrollbars */
            overflow-y: scroll; /* Sorgt für konsistentes Scrollverhalten */
                /* Versteckt die Scrollbars */
            scrollbar-width: none;       /* Firefox */
            -ms-overflow-style: none;    /* Internet Explorer & Edge Legacy */
            }
                /* WebKit-Browser (Chrome, Safari, Edge Chromium) */
            html::-webkit-scrollbar,
            body::-webkit-scrollbar {
            display: none; /* Komplett unsichtbar */
            }


        .logoimg {
            max-height: 11vh; /* Feste Höhe für das Logo */
            min-height: 11vh; /* Feste Höhe für das Logo */
            width: auto; /* Breite des Logos proportional zur Höhe */
            position: fixed;
            top: 1%; /* Abstand von der oberen Seite des Viewports in Prozent */
            }

        .nav{
            display: flex; /* Flexbox-Layout für die Navigation */
            gap: 2.6vw; /* Abstand zwischen den Navigationslinks */
            margin-bottom: 1vh; /* Kein zusätzlicher Abstand unten */
            text-decoration: none; /* Entfernt die Textdekoration */
            color: #d8d8d8; /* Textfarbe der Navigation */
            font-size: 2.4vh; /* Schriftgröße der Navigationslinks */
            font-family: var(--schriftart);
            position: absolute; /* Fixiert die Navigation innerhalb des Headers */
            bottom: 0; /* Setzt die Navigation an den unteren Rand des Headers */
            left: 50%; /* Positioniert die Navigation horizontal in der Mitte */
            transform: translateX(-50%); /* Zentriert die Navigation exakt */} 


        .nav a {
            text-decoration: none; /* Entfernt die Textdekoration */
            color: var(--platin); /* Textfarbe der Navigationslinks */
            font-family: var(--schriftart);
            position: fixed;       /* Fixiert die Navigation an einer Stelle im Viewport */
            bottom: 0;             /* Abstand von unten: 0 = direkt am unteren Rand */
            }

        /* Stilregeln für die Linie unter dem Header */
        .line {
            border: none; /* Entfernt den Rahmen der Linie */
            box-shadow: none; /* Entfernt den Schatten der Linie */
            margin: 0; /* Entfernt äußeren Abstand der Linie */
            display: flex; /* Flexbox-Layout für die zentrierte Ausrichtung */
            justify-content: center; /* Zentriert den Inhalt horizontal */
            align-items: center; /* Zentriert den Inhalt vertikal */
            text-decoration: none; /* Entfernt die Textdekoration */
            position: fixed; /* Fixiert die Linie an der angegebenen Position */
            z-index: 1000; /* Stellt sicher, dass die Linie über anderen Elementen liegt */
            top: 16.67vh; /* Positioniert die Linie direkt unterhalb des Headers */
            left: 0; /* Setzt die Linie an den linken Rand der Seite */
            right: 0; /* Setzt die Linie an den rechten Rand der Seite */
            min-height: 3.2vh; /* Mindesthöhe der Linie als Prozentsatz der Viewport-Höhe */
            max-height: 3.2vh; /* Maximale Höhe der Linie als Prozentsatz der Viewport-Höhe */
            background-color: #d8d8d8; /* Hintergrundfarbe der Linie */
            color: var(--hintergrund); /* Textfarbe in der Linie */
            font-family: var(--schriftart);
            box-sizing: border-box; /* Padding und Border in die Höhe einbeziehen */
            }

        .line p {
            margin: 0; /* Entfernt zusätzlichen Margin */
            text-align: center; /* Zentriert den Text in der Linie */
            white-space: nowrap; /* Verhindert das Umbrechen des Textes */
            font-size: 1.6vh; /* Schriftgröße als Prozentsatz der Viewport-Höhe */
            font-family: var(--schriftart);
            }
        
        /* Stilregeln für den Footer */
        .footer {
            position: fixed; /* Fixiert den Footer am unteren Rand der Seite */
            bottom: 0; /* Setzt den Footer an den unteren Rand der Seite */
            left: 0; /* Setzt den Footer an den linken Rand der Seite */
            width: 100%; /* Breite des Footers auf 100% des Viewports setzen */
            line-height: 5vh; /* Zeilenhöhe auf Höhe der Linie setzen */
            background-color: var(--hintergrund); /* Hintergrundfarbe des Footers */
            color: var(--platin); /* Textfarbe im Footer */
            display: flex; /* Flexbox für zentrierte Ausrichtung */
            justify-content: center; /* Zentriert den Inhalt horizontal */
            align-items: center; /* Zentriert den Inhalt vertikal */
            text-align: center; /* Textausrichtung im Footer */
            font-size: 1.3vh; /* Schriftgröße als Prozentsatz der Viewport-Breite */
            font-family: var(--schriftart);
            padding: 1vh; /* Kein Padding, um die Höhe genau zu halten */
            box-sizing: border-box; /* Padding und Border in die Höhe einbeziehen */
            overflow: hidden; /* Verhindert das Überlaufen des Inhalts */
            letter-spacing: var(--letter-spacing);
            }

        .footer a {
            text-decoration: none; /* Entfernt die Textdekoration */
            color: var(--platin); /* Textfarbe der Navigationslinks */
            font-size: 1.2vh; /* Schriftgröße als Prozentsatz der Viewport-Breite */
            font-family: var(--schriftart);
            }

		.separator {
    		margin: 0 5px; /* Abstand links und rechts von dem Trennzeichen */
    		color: var(--platin); /* Optional: Stil für das Trennzeichen */
    		}

        .white {
            padding-top: 22.67vh; /* Innenabstand oben, um Platz für den fixierten Header und die Linie zu schaffen */
            }

        /* Stilregeln für den Hauptinhalt */
        .content {
            display: flex; /* Flexbox Layout für den Inhalt */
            justify-content: center; /* Zentriert den Inhalt horizontal */
            padding-top: 1vh; /* Innenabstand oben, um Platz für den fixierten Header und die Linie zu schaffen */
            padding-bottom: 1vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            color: var(--lesefarbe);
            }
            
        .content-nl {
            display: flex; /* Flexbox Layout für den Inhalt */
            justify-content: center; /* Zentriert den Inhalt horizontal */
            padding-top: 1vh; /* Innenabstand oben, um Platz für den fixierten Header und die Linie zu schaffen */
            padding-bottom: 1vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            color: var(--lesefarbe);
            }

        /* Stilregeln für den Blog-Container */
        .blog-container {
            width: 50%; /* Breite des Containers */
            background-color: var(--weiss); /* Hintergrundfarbe des Containers */
            box-shadow: 0px 0px 0.5vh var(--platin); /* Umrandung */
            padding: 1.5vh 1.5vh 1.5vh 1.5vh;
            margin: 0 auto; /* Zentrieren des Containers */
            overflow-y: auto; /* Ermöglicht vertikales Scrollen */
            padding-top: 1.6vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            padding-bottom: 1vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            }

        .blog-container-nl {
            width: 50%; /* Breite des Containers */
            background-color: var(--weiss); /* Hintergrundfarbe des Containers */
            box-shadow: 0px 0px 0.5vh var(--platin); /* Umrandung */
            padding: 1.9vh; /* Innenabstand des Containers */
            margin: 0 auto; /* Zentrieren des Containers */
            overflow-y: auto; /* Ermöglicht vertikales Scrollen */
            padding-top: 1.6vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            padding-bottom: 1vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            }

        .blog-containerU {
            min-width: 50%; /* Breite des Containers */
            max-width: 50%;
            background-color: var(--weiss); /* Hintergrundfarbe des Containers */
            box-shadow: 0px 0px 0.5vh var(--platin); /* Umrandung */
            padding: 1.9vh; /* Innenabstand des Containers */
            margin: 0 auto; /* Zentrieren des Containers */
            overflow-y: auto; /* Ermöglicht vertikales Scrollen */
            padding-top: 1.6vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            padding-bottom: 1vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            }

        /* Stilregeln für die Scrollbar im Blog-Container */
        .blog-container::-webkit-scrollbar {
            width: 0px; /* Breite der Scrollbar auf 0 setzen */
            }

        .blog-container {
            -ms-overflow-style: none; /* Scrollbar für Internet Explorer/Edge verstecken */
            scrollbar-width: none; /* Scrollbar für Firefox verstecken */
            }

        /* Stilregeln für Blog-Einträge */
        .blog-entry {
            margin-bottom: 30px; /* Abstand nach unten für jeden Blog-Eintrag */
            text-align: justify; /* Blocksatz für den Text */
            color: var(--lesefarbe);
            padding-top: 0.2vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            padding-bottom: 0.2vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            }
            
         .blog-entry-nl {
            margin-bottom: 10px; /* Abstand nach unten für jeden Blog-Eintrag */
            margin-top: 10px; /* Abstand nach unten für jeden Blog-Eintrag */
            text-align: justify; /* Blocksatz für den Text */
            color: var(--lesefarbe);
            padding-top: 0.2vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            padding-bottom: 0.2vh; /* Innenabstand unten, um Platz für den Footer zu schaffen */
            }
        
        .h1{
        	color: var(--lesefarbe);
        	font-family: var(--schriftart);
        	font-size: 50px;
        	text-align: center; /* Überschrift mittig */
        	}
        
        .h3{
            color: var(--lesefarbe);
            font-family: var(--schriftart);
            font-size: 30px;
            text-align: center; /* Überschrift mittig */
            }
        
        .h2{
            color: var(--lesefarbe);
            font-family: var(--schriftart);
            font-size: 19px;
            text-align: center; /* Text horizontal zentriert */
            margin-bottom: 0;
            padding-left: 0;
            }
        
        .h4{
        	color: var(--lesefarbe);  
        	font-family: var(--schriftart);      
            }

        .buttonms{
            margin: 0; /* Entfernt zusätzlichen Margin */
            text-align: center; /* Zentriert den Text in der Linie */
            white-space: nowrap; /* Verhindert das Umbrechen des Textes */
            font-size: 1.6vh; /* Schriftgröße als Prozentsatz der Viewport-Höhe */
            font-family: var(--schriftart);
            background-color: var(--weiss);
            color: var(--weiss);
            overflow-y: scroll; /* Aktiviert das vertikale Scrollen */
            scrollbar-width: thin; /* Für Firefox, macht die Scrollbar dünn */
            scrollbar-color: transparent; /* Scrollbar-Farbe für Firefox */
            letter-spacing: var(--letter-spacing);
            }

        .buttonnav {
            box-sizing: border-box;
            color: var(--platin); /* Textfarbe */
            background-color: var(--hintergrund); /* Hintergrundfarbe des Buttons */
            border: 0px solid var(--hintergrund);
            border-radius: 0px; /* Abgerundete Ecken */
            padding: 0; /* Entferne Padding, da wir Flexbox verwenden */
            cursor: pointer; /* Zeiger bei Hover */
            transition: var(--hintergrund) 0.3s; /* Übergang für Hover-Effekt */
            height: 32px;
            width: auto; /* Breite automatisch */
            text-align: center; 
            display: flex; /* Flexbox aktivieren */
            align-items: center; /* Vertikale Zentrierung */
            justify-content: center; /* Horizontale Zentrierung */
            font-family: var(--schriftart);
            letter-spacing: 0.19vh;
            font-weight: 300;
            font-size: 2.3vh;
            padding: 1vh 0; /* Platz für den Button */
            }

    	.buttonfooter{
    	    text-decoration: none; /* Entfernt die Textdekoration */
            color: var(--platin); /* Textfarbe der Navigationslinks */
            font-size: 1.2vh; /* Schriftgröße als Prozentsatz der Viewport-Breite */
            font-family: var(--schriftart);
			background-color: var(--hintergrund); /* Hintergrundfarbe des Buttons */
            border: 0px solid var(--hintergrund);
            border-radius: 0px; /* Abgerundete Ecken */
            padding: 0; /* Entferne Padding, da wir Flexbox verwenden */
            cursor: pointer; /* Zeiger bei Hover */
            height: 10px;
            letter-spacing: var(--letter-spacing);
            text-align:center; 
			display: flex; /* Flexbox aktivieren */
    		align-items: center; /* Vertikale Zentrierung */
    		justify-content: center; /* Horizontale Zentrierung */
    		text-align: center; /* Text zentrieren */
    		font-family: var(--schriftart)
            }
            
        .buttonfooteraf{
    	    text-decoration: none; /* Entfernt die Textdekoration */
            color: var(--platin); /* Textfarbe der Navigationslinks */
            font-size: 1.2vh; /* Schriftgröße als Prozentsatz der Viewport-Breite */
            font-family: var(--schriftart);
			background-color: var(--hintergrund); /* Hintergrundfarbe des Buttons */
            border: 0px solid var(--hintergrund);
            border-radius: 0px; /* Abgerundete Ecken */
            padding: 0; /* Entferne Padding, da wir Flexbox verwenden */
            cursor: default; /* Zeiger bei Hover */
            height: 10px;
            letter-spacing: var(--letter-spacing);
            text-align:center; 
			display: flex; /* Flexbox aktivieren */
    		align-items: center; /* Vertikale Zentrierung */
    		justify-content: center; /* Horizontale Zentrierung */
    		text-align: center; /* Text zentrieren */
    		font-family: var(--schriftart)
            }
    	    
            
            
        /* Grundlegende Formatierung für alle ul-Elemente */
        ul {
            margin-left: 12px; /* Einzug von der linken Seite */
            margin-bottom: 0; /* Abstand nach unten auf 0 setzen */
            padding-left: 0; /* Kein Padding für ul-Elemente */
            color: var(--lesefarbe);
            font-family: var(--schriftart);
            font-size:19px;
            font-weight: normal;
            }

        /* Formatierung für alle li-Elemente */
        li {
            list-style-type: disc; /* Standard Aufzählungszeichen */
            text-align: left;
            margin-bottom: 1px; /* Abstand zwischen den Listenpunkten */
            font-family: var(--schriftart); /* Schriftart */
            color: var(--lesefarbe); /* Textfarbe */
            margin-left: 39px; /* Einzug von der linken Seite */
            margin-top: 9px;
            font-size: 16px;
            list-style-position: inside;
            text-indent: -1.35em;          /* Indent für die erste Zeile, um die Position des Textes zu korrigieren */
			padding-left: 0em;          /* Einrückung, damit die Textzeilen korrekt nach dem Listenpunkt beginnen */
			font-weight: normal;
            }
            
        .blog-entry h1 {
            text-align: left; /* Überschrift linksbündig */
            margin-top: 10px;
            font-family: var(--schriftart);
            color: var(--lesefarbe);
            }

        .blog-entry h2 {
            text-align: left; /* Überschrift linksbündig */
            margin-top: 6px;
			font-family: var(--schriftart);
            color: var(--lesefarbe);
            }
            
         .blog-entry h3 {
            text-align: center; /* Überschrift mittig */
            margin-top: 16px;
			font-family: var(--schriftart);
            color: var(--lesefarbe);
            }

        .blog-entry p {
            margin: 0; /* Kein zusätzlicher Margin */
            margin-bottom: 0; /* Abstand zwischen den Listenpunkten */
            margin-top: 10px;
            font-family: var(--schriftart);
            color: var(--lesefarbe);
            }

        .blog-entry img {
            display: block; /* Bild als Block-Element anzeigen */
            margin-top: 10px;
            max-width: 100%; /* Bildgröße an die Breite des Containers anpassen */
            min-width: 100%;
            height: auto; /* Höhe des Bildes automatisch anpassen */
            color: var(--lesefarbe);
            font-family: var(--schriftart);
            box-sizing: border-box;
            }
            
		.meinestelletrenner{
			box-sizing: border-box;
			color: var(--weiss); /* Textfarbe */				
	        background-color: var(--lesefarbe); /* Hintergrundfarbe des Buttons */
            border: 1px solid var(--lesefarbe);
            border-color: var(--lesefarbe); 
            border-radius: 5px; /* Abgerundete Ecken */
            padding: 0; /* Entferne Padding, da wir Flexbox verwenden */
            font-family: var(--schriftart);
            font-size: 16px; /* Schriftgröße */
            cursor: default;
            transition: var(--hintergrund) 0.3s; /* Übergang für Hover-Effekt */
            height: 32px;
            width: 100%;
            text-align:center; 
			display: flex; /* Flexbox aktivieren */
    		align-items: center; /* Vertikale Zentrierung */
    		justify-content: center; /* Horizontale Zentrierung */
    		text-align: center; /* Text zentrieren */
			}

		.whitepaper {
    		margin: 0 auto;
			box-sizing: border-box;
			color: var(--platin); /* Textfarbe */	
	        background-color: var(--lesefarbe); /* Hintergrundfarbe des Buttons */
            border: 1px solid var(--lesefarbe);
            border-color: var(--lesefarbe); 
            border-radius: 5px; /* Abgerundete Ecken */
            padding: 0; /* Entferne Padding, da wir Flexbox verwenden */
            cursor: pointer; /* Zeiger bei Hover */
            transition: var(--hintergrund) 0.3s; /* Übergang für Hover-Effekt */
            height: 32px;
            width: 75%;
            text-align:center; 
			display: flex; /* Flexbox aktivieren */
    		align-items: center; /* Vertikale Zentrierung */
    		justify-content: center; /* Horizontale Zentrierung */
    		text-align: center; /* Text zentrieren */
    		font-family: var(--schriftart);
            letter-spacing: 0.2vh;
            font-weight: 300;
            font-size: 1.8vh;
			}

        .whitepaper:hover {
            color: var(--lesefarbe); /* Textfarbe */
            background-color: var(--weiss); /* Hintergrundfarbe des Buttons */
            border-color: var(--lesefarbe); /* Kein Rand */
            }       

		.meinestelle{
			box-sizing: border-box;
			color: var(--platin); /* Textfarbe */	
	        background-color: var(--lesefarbe); /* Hintergrundfarbe des Buttons */
            border: 1px solid var(--lesefarbe);
            border-color: var(--lesefarbe); 
            border-radius: 5px; /* Abgerundete Ecken */
            padding: 0; /* Entferne Padding, da wir Flexbox verwenden */
            cursor: pointer; /* Zeiger bei Hover */
            transition: var(--hintergrund) 0.3s; /* Übergang für Hover-Effekt */
            height: 32px;
            width: 100%;
            text-align:center; 
			display: flex; /* Flexbox aktivieren */
    		align-items: center; /* Vertikale Zentrierung */
    		justify-content: center; /* Horizontale Zentrierung */
    		text-align: center; /* Text zentrieren */
    		font-family: var(--schriftart);
            letter-spacing: 0.2vh;
            font-weight: 300;
            font-size: 1.8vh;
			}
			
        .meinestelle:hover {
            color: var(--lesefarbe); /* Textfarbe */
            background-color: var(--weiss); /* Hintergrundfarbe des Buttons */
            border-color: var(--lesefarbe); /* Kein Rand */
            }