html, body {
            margin: 0;
            font-family: 'Roboto', sans-serif;
            height: 100vh;

            scroll-behavior: smooth;
        }

        /* Linker Seitenbalken */
        .sidebar {
            background-color: #2E2E2E;
            color: #FFFFFF;
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
        }

        .logo {
            text-align: center;
        }

        .logo img {
            max-width: 80%;
            height: auto;
        }
		.logo-mobil {
		  display: none;
		  text-align: center;
		}
        .menu-item {
            text-decoration: none;
            color: #FFFFFF;
            font-size: 18px;
            margin: 10px 0;
            padding: 10px 0;
            width: 80%;
            text-align: center;
            transition: background-color 0.3s;
			font-family: "Source Serif 4", serif;
        }

        .menu-item:hover {
            background-color: #444;
        }

        /* Hauptinhalt */
        main {
			flex: 1;
			display: flex;
			flex-direction: column;
            margin-left: 25%;
            width: 75%;
        }
		.content {
		padding: 20px;
		background-color: #ffffff;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		margin: 40px;
		max-width: 100%;
		box-sizing: border-box;
		padding: 1em;
		}

		/* Header Container */
		.header {
		  padding: 80px 20px 60px;
		}

		.header-inner {
		  max-width: 1200px;
		  margin: 0 auto;
		  display: flex;
		  flex-wrap: wrap;
		  align-items: center;
		  gap: 40px;
		}

		/* Textbereich */
		.header-text {
		  flex: 1;
		  text-align: left;
		  margin-left: 25px;
		  
		}

		.header h1 {
		  font-size: 2.8rem;
		  line-height: 1.4;
		  margin-bottom: 10px;
		  color: #1e1e1e;
		  font-family: "Source Serif 4", serif;
		}

		.subtitle {
		  font-size: 1.3rem;
		  color: #555;
		  margin-bottom: 40px;
		  font-family: "Funnel Sans", sans-serif;
		}

		/* Zitat */
		blockquote {
		  font-family: 'Playfair Display', serif;
		  font-size: 1.5rem;
		  font-style: italic;
		  color: #2c3e50;
		  border-left: 4px solid #315d8c;
		  padding-left: 20px;
		  margin: 0;
		}

		/* Bildbereich */
		.header-image {
		  flex: 1;
		  text-align: center;
		}

		.header-image img {
		  max-width: 80%;
		  height: auto;
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}


        .section {
            padding: 10px 40px 10px 40px;
        }
		.start2 {
			flex: 1;
			align-self: center;
        }
		p {
			line-height: 1.6; /* Erhöht den Zeilenabstand */
		}
		ul li {
			margin-bottom: 10px; /* Erhöht den Abstand zwischen den Stichpunkten */
		}
/* Themen Box */
		.themen-box {
			background-color: #f9f9f9;
			padding: 30px 40px;
			margin: 40px auto;
			max-width: 1000px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
			box-sizing: border-box;
		}

		.themen-box h2 {
			font-size: 1.6em;
			color: #1e1e1e;
			margin-bottom: 30px;
			text-align: left;
			font-weight: 600;
			font-family: "Source Serif 4", serif;
		}

		.themen-box ul {
			list-style-type: disc;
			padding-left: 20px;
		}

		.themen-box ul li {
			margin-bottom: 16px;
			line-height: 1.6;
			font-size: 1.05em;
			color: #333;
			font-family: "Funnel Sans", sans-serif;
		}
/* Tab Container */
		.tab-container {
		  max-width: 1000px;
		  margin: 50px auto;
		  padding: 30px;
		  background-color: #f9f9f9;
		  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
		  font-family: sans-serif;
		  box-sizing: border-box;
		}

		.tabs {
		  display: flex;
		  justify-content: center;
		  margin-bottom: 40px;
		  gap: 30px;
		}

		.tab {
		  padding: 10px 20px;
		  background-color: #e0e7ef;
		  border: none;
		  font-size: 1em;
		  cursor: pointer;
		  transition: background-color 0.3s ease;
		  color: #002a32;
		  font-family: "Funnel Sans", sans-serif;
		}

		.tab:hover {
		  background-color: #d0d8e3;
		}

		.tab.active {
		  background-color: #315d8c;
		  color: #fff;
		}

		.tab-content-wrapper {
		  position: relative;
		  min-height: 250px;
		}

		.tab-content {
		  display: none;
		  opacity: 0;
		  transition: opacity 0.5s ease;
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		}

		.tab-content.active {
		  display: block;
		  opacity: 1;
		  position: relative;
		}

		.tab-content p {
		  line-height: 1.8;
		  font-size: 1.05em;
		  color: #333;
		  text-align: justify;
		  hyphens: auto;
		  word-break: break-word;
		  font-family: "Funnel Sans", sans-serif;
		}
		.tab-content h2 {
		  margin-top: 10px;
		  margin-bottom: 20px;
		  font-size: 1.6em;
		  color: #1e1e1e; /* oder deine Akzentfarbe */
		  font-weight: 600;
		  font-family: "Source Serif 4", serif;
		}
/* Einheitliches Box-Design wie bei Tabs oder Themenboxen */
		.box {
		  background-color: #f9f9f9;
		  padding: 30px;
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		  max-width: 1000px;
		  margin: 0 auto;
		  box-sizing: border-box;
		}

		/* Titel der Sektion */
		.section-title {
		  font-size: 1.6em;
		  margin-bottom: 20px;
		  font-weight: 600;
		  color: #1e1e1e;
		  font-family: "Source Serif 4", serif;
		}

		/* Lebenslauf-Tabelle */
		.lebenslauf-container {
		  overflow-x: auto;
		  margin-bottom: 20px;
		}

		.lebenslauf {
		  width: 100%;
		  border-collapse: collapse;
		  margin: 20px 0;
		  font-size: 1rem;
		  line-height: 1.5;
		  color: #333;
		  font-family: "Funnel Sans", sans-serif;
		}

		.lebenslauf tr {
		  border-bottom: 1px solid #ccc;
		}

		.lebenslauf td {
		  padding: 12px 8px;
		  vertical-align: top;
		}

		.lebenslauf td:first-child {
		  white-space: nowrap;
		  font-weight: 600;
		  color: #555;
		  min-width: 120px;
		}
/* === Qual-Block Container === */
		.qualifikationen-wrapper {
		  display: flex;
		  gap: 40px;
		  max-width: 900px;
		  margin: 20px auto;
		  flex-wrap: wrap;
		}
		.qualifikationen-block {
			 flex: 1 1 400px;
		  box-sizing: border-box;
		}

		.qualifikationen-block h3 {
		  font-size: 1.2em;
		  color: #002A32;
		  margin-bottom: 15px;
		  margin-top: 30px;
		  font-family: "Source Serif 4", serif;
		      font-weight: 600;
		}

		.qualifikationen-block ul {
		  list-style-type: disc;
		  padding-left: 20px;
		  margin-bottom: 20px;
		}

		.qualifikationen-block ul li {
		  margin-bottom: 12px;
		  line-height: 1.4;
		  font-size: 1.0em;
		  color: #333;
		  font-family: "Funnel Sans", sans-serif;
		}
/* === Info-Block Container === */
		.info-blocks {
		  display: flex;
		  margin: 0 auto;
		  gap: 40px;
		  flex-direction: column;
		  max-width: 1000px;
		  box-sizing: border-box;
		}

		/* === Linker und rechter Block === */
		.block {
		  background-color: #f9f9f9;
		  border: 1px solid #B1B1B1;
		  padding: 25px;
		  transition: background-color 0.3s ease, box-shadow 0.3s ease;
		  flex: 1 1 45%;
		  box-sizing: border-box;
		}
		.block h3 {
			 font-family: "Source Serif 4", sans-serif;
		}
		.block p {
			text-align: justify;
			hyphens: auto;
		  word-break: break-word;
		  font-family: "Funnel Sans", sans-serif;
		}
		.block h3 {
			font-family: "Funnel Sans", sans-serif;
			font-weight: 450;
		}
		.block:hover {
		  background-color: #E1E1E1;
		  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
		}
		.block-left {
		  flex: 0 0 50%;
		  min-width: 200px;
		}
		.fas.fa-check-circle {
		  color: #7B9D74; /* schönes Blau */
		}
		/* === Rechte Seite etwas breiter machen === */
		.block.right {
		  flex: 0 0 50%;
		  min-width: 200px;
		  text-align: justify;
		  line-height: 1.3;
		  hyphens: auto;
		  word-break: break-word;
		  font-family: "Funnel Sans", sans-serif;
		}

		/* === Listen im linken Block === */
		.block ul {
		  list-style: none;
		  padding: 0;
		  margin: 0;
		}

		.block li {
		  margin-bottom: 10px;
		  font-size: 1.05rem;
		  font-family: "Funnel Sans", sans-serif;
		  display: flex;
		  align-items: center;
		}

		.block li i {
		  margin-right: 10px;
		  color: #7A9E9F;
		  font-size: 1.1rem;
		}


		/* Textabschnitt unter der Tabelle */
		.übermich p {
		  margin-bottom: 20px;
		  line-height: 1.8;
		  color: #333;
		  text-align: justify;
		  hyphens: auto;
		  word-break: break-word;
		  font-family: "Funnel Sans", sans-serif;
		}

		.impressum {
			margin-top: 40px;
			display: flex; /* Flex-Container aktivieren */
			align-items: center; /* Zentriert die Items vertikal */
			flex-direction: column; /* Richtet die Items in einer Spalte an */
			color: #002A32; /* Schriftfarbe */
			text-align: center; /* Optional: Zentriert den Text */
		}

		.impressum a {
			text-decoration: underline; /* Entfernt Unterstreichung der Links */
			color: #002A32; /* Farbe der Links */
			margin: 10px 0; /* Abstand zwischen den Links */
		}
		
@media (max-width: 768px) {
		main {
			width: 100%;
			margin-left: 0;
		}
		html {
    font-size: 90%; /* oder z.B. 85% */
		}
		.header {
		  padding: 0px 20px 60px;
		}
		.header h1 {
		  margin-top: 0;
		}
		.lebenslauf td:first-child {
		white-space: nowrap;
		font-weight: 600;
		color: #555;
		min-width: 60px;
		}
	  .logo-mobil {
		display: block;
	  }

	  .logo-mobil img {
		max-width: 60%;
		height: auto;
	  }
	  .header-inner {
		flex-direction: column;
		text-align: center;
	  }

	  .header-text {
		text-align: center;
		margin-left: 0;
	  }
	.box {
		padding: 20px;
	}
	.tab-container {
		padding: 20px;
	}
		.themen-box {
        padding: 20px;
		margin: 0 auto;
    }
	  blockquote {
		padding-left: 0;
		border-left: none;
		font-size: 1.3rem;
	  }

	  .header-image img {
		max-width: 70%;
		  }
	.quote-section {
		flex-direction: column-reverse;
				}
	.sidebar {
		display: none;
		}
	.content {
		margin: 20px;
		}
		}

	@media (max-width: 600px) {
		html {
    font-size: 80%; /* oder z.B. 85% */
  }
    .themen-box {
        padding: 20px;
		margin: 0 auto;
    }
	.content {
			margin: 0;
			padding: 0;
			}
	.section {
	padding: 10px;
	}
    .themen-box h2 {
        font-size: 1.4em;
    }

    .themen-box ul li {
        font-size: 1em;
    }
	
	}
		}