/* Allgemeine Stile und Reset */
body {
    margin: 0;
    padding: 0;
    font-family: "Courier New", Courier, monospace; /* Hauptschriftart für Text */
    background-color: #fff; /* Wieder reines Weiß */
    color: #000; /* Wieder reines Schwarz */
    line-height: 1.6; /* Behalten */
    overflow-x: hidden; /* Verhindert horizontale Scrollbars durch Animationen */
    position: relative; /* Behalten */
    /* height: 100vh; /* Entfernt, da wir scrollbaren Inhalt haben */
}

/* Schriftart für Überschriften und Akzente */
h1, h2, h3, h4, .upcoming-title h2, .nerrwo-title, .spacss-title {
    font-family: 'Playfair Display', serif;
    font-weight: normal; /* Playfair Display ist oft schöner ohne Bold */
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 40px 0; /* Original Padding */
    font-size: 14px; /* Original Größe */
    position: relative; /* Behalten */
    width: auto; /* Automatische Breite - Behalten */
    top: auto; /* Behalten */
    left: auto; /* Behalten */
    z-index: auto; /* Behalten */
    background-color: transparent; /* Kein Hintergrund - Behalten */
    mix-blend-mode: normal; /* Behalten */
}

.header-left {
    display: flex;
    flex-direction: column;
    white-space: nowrap; /* Behalten */
}

.header-center {
    text-align: center;
    flex-grow: 1;
    font-style: italic;
    transform: translateX(-40px); /* Original Verschiebung */
    font-size: 14px; /* Original Größe */
}

.header-right {
    text-align: right;
    white-space: nowrap; /* Behalten */
}


/* Main Wrapper für Seiteninhalt */
.main-wrapper {
    position: relative; /* Behalten */
    width: 100%; /* Behalten */
    box-sizing: border-box; /* Behalten */
    /* Padding/Margin top hier hinzufügen, um Platz für den Header zu schaffen, falls er fest ist */
    /* padding-top: 80px; /* Beispiel, falls Header fixed ist und ca. 80px hoch ist */
}


/* --- Bild-Sektion --- */
.center-image {
    display: flex;
    justify-content: center;
    margin-top: 120px;
    margin-bottom: 80px;
    position: relative;
}

.main-image {
    width: 50vw;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    z-index: 3;
}

/* --- Text im Bild-Overlay: Klein, Fein und Courier New --- */
.image-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -25%);
    text-align: center;
    color: white;
    font-size: 22px; /* **NEU: Etwas größer** */
    z-index: 5;
    font-family: "Courier New", Courier, monospace; /* **NEU: Gleiche Schrift wie "Sechster bis Achter"** */
    font-weight: lighter; /* **Behalten: Fein** */
    text-transform: lowercase; /* **Behalten: Klein geschrieben** */
}

.image-text h1 {
    margin: 0;
    font-weight: lighter; /* **Behalten: Fein** */
    text-transform: lowercase; /* **Behalten: Klein geschrieben** */
    font-family: inherit; /* **Sicherstellen, dass die Schriftart vom Elternelement übernommen wird** */
}

.image-text p {
    margin-top: 50px; /* **Zurück auf DEINEN Code** */
    font-size: 1em; /* **NEU: Relative Größe beibehalten** */
    font-weight: lighter; /* **Behalten: Fein** */
    text-transform: lowercase; /* **Behalten: Klein geschrieben** */
    font-family: inherit; /* **Sicherstellen, dass die Schriftart vom Elternelement übernommen wird** */
    font-size: 20px;
}


/* --- Overlay (für Ladeanzeige oder andere Zwecke - wird aktuell nicht für Seitenübergänge verwendet) --- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(173, 216, 230, 0.3); /* Original Farbe */
    z-index: 1000; /* Behalten */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.overlay.visible {
    visibility: visible;
    opacity: 1;
}

/* --- Upcoming Section --- */
.upcoming-section {
    padding: 100px 10%; /* **Zurück auf DEINEN Code** */
    font-family: 'Playfair Display', serif; /* **Zurück auf DEINEN Code** */
    margin-top: 4px; /* **Zurück auf DEINEN Code** */
}


.upcoming-title {
    display: flex;
    align-items: flex-end;
    gap: 20px; /* **Zurück auf DEINEN Code** */
    margin-bottom: 60px; /* Abstand zu den Blöcken */
}

.upcoming-title h2 {
    font-size: 64px; /* **Zurück auf DEINEN Code** */
    margin: 0; /* **Zurück auf DEINEN Code** */
    text-transform: uppercase; /* **Zurück auf DEINEN Code** */
}

.underline {
    height: 4px; /* **Zurück auf DEINEN Code** */
    width: 220px; /* **Zurück auf DEINEN Code** */
    background-color: black; /* **Zurück auf DEINEN Code** */
    margin-bottom: 5px; /* **Zurück auf DEINEN Code** */
}

.upcoming-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* **Zurück auf DEINEN Code** */
    gap: 40px; /* Abstand zwischen den Blöcken */
}

.show-block {
    width: calc(33.333% - 27px); /* Drei Spalten mit Gap-Berücksichtigung */
    min-width: 250px; /* Mindestbreite, damit es bei kleinen Fenstern umbricht */
    margin-bottom: 0; /* Gap ersetzt margin-bottom */
    flex-grow: 1; /* Erlaubt den Blöcken zu wachsen */
}

.show-label {
    font-size: 20px; /* **Zurück auf DEINEN Code** */
    margin-bottom: 5px; /* **Zurück auf DEINEN Code** */
}

.show-date {
    font-size: 24px; /* **Zurück auf DEINEN Code** */
}

.show-time {
    font-style: italic; /* **Zurück auf DEINEN Code** */
}

.show-details {
    margin-top: 10px; /* **Zurück auf DEINEN Code** */
    font-size: 16px; /* **Zurück auf DEINEN Code** */
    line-height: 1.6; /* **Zurück auf DEINEN Code** */
}

.show-details strong {
    font-weight: bold; /* Behalten */
}

.mono {
    font-family: "Courier New", Courier, monospace; /* Behalten */
}

/* Stil für E-Mail-Links im Hauptinhalt (nicht in der Infobar oder About-Seite) */
.email-link {
    color: inherit;
    text-decoration: underline; /* Unterstreichung hinzufügen */
    transition: color 0.3s ease;
    font-family: "Courier New", Courier, monospace; /* Behalten */
}

.email-link:hover {
    color: #1000ec; /* Blau beim Hover - Behalten */
}

/* Stil für E-Mail-Links im Hauptinhalt (besuchter Zustand) */
.email-link:visited {
    color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
    text-decoration: underline; /* Unterstreichung beibehalten */
}


/* --- Narrow + Spaces + Projektbeschreibung --- */
.narrow-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 60px; /* **Zurück auf DEINEN Code** */
    padding-left: 10%; /* **Zurück auf DEINEN Code** */
    padding-right: 10%; /* Auch rechts Padding hinzufügen */
}

/* Titel "NARROW" */
.nerrwo-title {
    font-size: 72px; /* **Zurück auf DEINEN Code** */
    margin: 0; /* **Zurück auf DEINEN Code** */
    line-height: 1; /* **Zurück auf DEINEN Code** */
    text-transform: uppercase; /* **Zurück auf DEINEN Code** */
    text-align: left; /* **Zurück auf DEINEN Code** */
    font-family: 'Playfair Display', serif; /* Behalten */
}

/* Titel "SPACES" */
.spacss-title {
    font-size: 64px; /* **Zurück auf DEINEN Code** */
    margin: 0; /* **Zurück auf DEINEN Code** */
    line-height: 1; /* **Zurück auf DEINEN Code** */
    text-transform: uppercase; /* **Zurück auf DEINEN Code** */
    text-align: left; /* **Zurück auf DEINEN Code** */
    font-family: 'Playfair Display', serif; /* Behalten */
}

/* Container für Beschreibung + vertikalem Label + Sprachumschalter */
.project-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 60px;
    gap: 40px; /* **Zurück auf DEINEN Code** */
    position: relative; /* **Zurück auf DEINEN Code** */
    width: 100%; /* Volle Breite nutzen */
}

/* Vertikaler Text "ABOUT THE PROJECT" links von der Beschreibung */
.rotated-label {
    writing-mode: vertical-rl; /* **Zurück auf DEINEN Code** */
    transform: rotate(180deg); /* **Zurück auf DEINEN Code** */
    font-family: "Courier New", Courier, monospace; /* **Zurück auf DEINEN Code** */
    font-weight: 600; /* **Zurück auf DEINEN Code** */
    font-size: 20px; /* **Zurück auf DEINEN Code** */
    text-transform: uppercase; /* **Zurück auf DEINEN Code** */
    line-height: 1; /* **Zurück auf DEINEN Code** */
    margin-top: 80px; /* **Zurück auf DEINEN Code** */
    flex-shrink: 0; /* Verhindert, dass das Label schrumpft */
}

/* Projektbeschreibung */
.project-description {
    font-family: "Courier New", Courier, monospace; /* **Zurück auf DEINEN Code** */
    font-size: 16px; /* **Zurück auf DEINEN Code** */
    line-height: 1.7; /* **Zurück auf DEINEN Code** */
    text-align: left; /* **Zurück auf DEINEN Code** */
    max-width: 800px; /* **Zurück auf DEINEN Code** */
    padding-top: 30px; /* **Zurück auf DEINEN Code** */
    flex-grow: 1; /* Erlaubt der Beschreibung zu wachsen */
}

.project-description p {
    margin-bottom: 20px; /* Behalten */
}

.project-description strong {
     font-weight: bold; /* Behalten */
}

/* Sprachumschalter */
.language-toggle {
    position: absolute; /* **Zurück auf DEINEN Code** */
    top: 0; /* **Zurück auf DEINEN Code** */
    right: 0; /* **Zurück auf DEINEN Code** */
    font-family: "Courier New", Courier, monospace; /* **Zurück auf DEINEN Code** */
    font-size: 1.2rem; /* **Zurück auf DEINEN Code** */
    transform: translateX(-10px); /* **Zurück auf DEINEN Code** */
}

.lang-btn {
    cursor: pointer;
    font-weight: normal;
    transition: color 0.2s; /* **Zurück auf DEINEN Code** */
}

.lang-btn.active {
    font-weight: bold;
    color: #000; /* Wieder reines Schwarz */
}

.lang-btn:hover {
    color: #1000ec; /* Blau beim Hover */
}

/* Standardmäßig den DE-Text anzeigen */
.lang-text.lang-de {
    display: block;
}

/* EN-Text standardmäßig ausblenden */
.lang-text.lang-en {
    display: none;
}


/* --- Footer --- */
.footer-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Behalten */
    gap: 30px; /* Original Abstand - Sollte die Lücke schließen */
    background-color: white; /* Wieder reines Weiß */
    padding: 10px 0; /* Original Padding */
    border-top: 1px solid black; /* Wieder reines Schwarz */
    font-family: "Courier New", Courier, monospace;
    position: relative;
    z-index: auto; /* unter Info-Panel - Behalten */
    margin-top: auto; /* Behalten */
}

.footer-item {
    color: black; /* Wieder reines Schwarz */
    font-size: 0.9em;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Transition hinzufügen - Behalten */
    white-space: nowrap; /* **NEU: Verhindert Umbruch und hilft bei Abständen** */
    padding: 5px 10px; /* Padding hinzufügen für größere Klickfläche */
}

/* Hover für alle Footer-Items AUSSER Ferdinand Waltz - Behalten */
.footer-bar a.footer-item:hover,
.footer-bar span.footer-item:not(.author-name):hover { /* Geändert: .author-name statt #name */
    text-decoration: underline;
    color:#1000ec; /* Blau beim Hover */
}

/* Ferdinand Waltz Item - KEIN Hover Effekt - Behalten */
.footer-bar span.author-name:hover { /* Geändert: .author-name statt #name */
     text-decoration: none;
     color: black; /* Bleibt schwarz */
     cursor: default; /* Standard-Cursor statt Link-Cursor */
}

/* Besuchter Zustand für alle Footer-Items AUSSER Ferdinand Waltz */
.footer-bar a.footer-item:visited,
.footer-bar span.footer-item:not(.author-name):visited {
    text-decoration: none; /* Standardmäßig keine Unterstreichung für besuchte Links im Footer */
    color: black; /* Bleiben schwarz */
}


.instagram-icon {
    filter: invert(100%); /* Instagram-Icon wieder schwarz */
    width: 25px;
    height: auto;
    vertical-align: middle;
}


/* --- About Me Seite (about.html) --- */
#about {
    font-family: "Courier New", Courier, monospace;
    color: #111; /* **Zurück auf DEINEN Code** */
    line-height: 1.7; /* Original Zeilenabstand */
    padding: 60px 20px; /* Original Padding */
    max-width: 800px; /* Original Breite */
    margin: 0 auto;
}

#about h2,
#about h3,
#about h4 {
    font-family: "Playfair Display", serif;
    color: #000; /* Wieder reines Schwarz */
    margin-top: 2em; /* Original Abstand */
    margin-bottom: 1em; /* Behalten */
}

/* === Lebenslauf-Heading wie Upcoming gestalten === */
#about h2#lebenslauf {
    font-family: 'Playfair Display', serif; /* **Zurück auf DEINEN Code** */
    font-size: 64px; /* Original Größe */
    text-transform: uppercase;
    margin: 0;
    display: inline-block;
    vertical-align: bottom;
    line-height: 1;
    margin-bottom: 40px;
}

#about h2#lebenslauf::after {
    content: "";
    display: inline-block;
    vertical-align: bottom;
    width: 220px; /* Original Länge */
    height: 4px; /* Original Dicke */
    background-color: black; /* Original Farbe */
    margin-left: 20px; /* Original Abstand */
    margin-bottom: 2px; /* Original Ausrichtung */
}

/* Projekte-Heading im gleichen Stil wie Lebenslauf */
#about h3#projekte {
    font-family: 'Playfair Display', serif; /* **Zurück auf DEINEN Code** */
    font-size: 64px; /* Original Größe */
    text-transform: uppercase;
    margin: 0;
    display: inline-block;
    vertical-align: bottom;
    line-height: 1;
}

#about h3#projekte::after {
    content: "";
    display: inline-block;
    vertical-align: bottom;
    width: 220px; /* Original Länge */
    height: 4px; /* Original Dicke */
    background-color: black; /* Original Farbe */
    margin-left: 20px; /* Original Abstand */
    margin-bottom: 2px; /* Original Ausrichtung */
}

#about h3#contact {
     font-size: 64px; /* Auch Contact als große Überschrift - Behalten */
     text-transform: uppercase;
     margin: 0;
     display: inline-block;
     vertical-align: bottom;
     line-height: 1;
     margin-bottom: 40px; /* Behalten */
     font-family: 'Playfair Display', serif; /* Behalten */
}

#about h3#contact::after {
     content: "";
     display: inline-block;
     vertical-align: bottom;
     width: 220px;
     height: 4px;
     background-color: black;
     margin-left: 20px;
     margin-bottom: 2px;
}


#about ul {
    list-style: none;
    padding-left: 0; /* Behalten */
    margin-top: 30px; /* Original Abstand */
    margin-bottom: 30px; /* Original Abstand */
}

#about li {
    margin-bottom: 6px; /* Original Abstand */
}

#about p {
    margin-bottom: 30px; /* Original Abstand */
}

#about h4 {
    font-size: 18px; /* Original Größe */
    font-family: 'Playfair Display', serif; /* Behalten */
    margin-top: 2em; /* Original Abstand */
    margin-bottom: 1em; /* Behalten */
}

/* Stil für anklickbare E-Mail-Adresse auf der About-Me-Seite */
/* Sicherstellen, dass das <a> Tag die Klasse about-me-email-link hat */
#about a.about-me-email-link {
    color: inherit; /* Farbe vom Elternelement erben */
    text-decoration: underline; /* Unterstreichung hinzufügen */
    font-family: "Courier New", Courier, monospace; /* Schriftart beibehalten */
    transition: color 0.3s ease; /* Hover-Effekt hinzufügen */
}

#about a.about-me-email-link:hover {
    color: #1000ec; /* Blau beim Hover */
}

/* Stil für anklickbare E-Mail-Adresse auf der About-Me-Seite (besuchter Zustand) */
#about a.about-me-email-link:visited {
    color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
    text-decoration: underline; /* Unterstreichung beibehalten */
}


/* --- Stil für den Namen "Ferdinand Waltz" in der About-Seite --- */
/* Annahme: Der Name ist in einem <span> mit der Klasse "author-name" */
#about .author-name {
    text-decoration: none; /* Keine Unterstreichung */
    color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
    /* display: inline-block; */ /* Kann helfen, wenn es immer noch Probleme gibt */
    /* white-space: nowrap; */ /* Kann auch helfen */
}

#about .author-name:hover {
    text-decoration: none; /* Keine Unterstreichung beim Hover */
    color: inherit; /* Farbe bleibt wie im Normalzustand */
    cursor: default; /* Standard-Cursor statt Link-Cursor */
}


/* --- Side-Panel Infobereich --- */
/* Standard-Stile für die Infobar (für größere Bildschirme) */
.side-info-panel {
    background-color: white; /* **Zurück auf DEINEN Code** */
    z-index: 1002; /* **Zurück auf DEINEN Code** */
    position: fixed; /* **Zurück auf DEINEN Code** */
    top: 0; /* **Zurück auf DEINEN Code** */
    left: -100px; /* **Zurück auf DEINEN Code** */
    width: 80px; /* **Zurück auf DEINEN Code** */
    height: 100%; /* **Zurück auf DEINEN Code** */
    border-right: 1px solid #000; /* **Zurück auf DEINEN Code** */
    transition: left 0.3s ease; /* **Zurück auf DEINEN Code** */
    box-sizing: border-box; /* **Zurück auf DEINEN Code** */
    padding: 4px; /* **Zurück auf DEINEN Code** */
    overflow: hidden; /* **Zurück auf DEINEN Code** */
}

/* Wenn das Panel geöffnet ist */
.side-info-panel.open {
    left: 5px; /* **Zurück auf DEINEN Code** */
}

/* Inhalt im Panel */
.side-info-panel .panel-content {
    display: flex; /* **Zurück auf DEINEN Code** */
    flex-direction: column; /* **Zurück auf DEINEN Code** */
    align-items: flex-start; /* **Zurück auf DEINEN Code** */
    justify-content: space-evenly; /* **Zurück auf DEINEN Code** */
    height: 100%; /* **Zurück auf DEINEN Code** */
    gap: 10px; /* **Zurück auf DEINEN Code** */
}

/* Einzelne Textblöcke im Panel */
.side-info-panel .text-block {
    writing-mode: vertical-rl; /* **Zurück auf DEINEN Code** */
    font-family: "Courier New", Courier, monospace; /* **Zurück auf DEINEN Code** */
    width: 100%; /* **Zurück auf DEINEN Code** */
    flex: 1; /* **Zurück auf DEINEN Code** */
    padding: 5px; /* **Zurück auf DEINEN Code** */
    box-sizing: border-box; /* **Zurück auf DEINEN Code** */
    overflow-wrap: break-word; /* **Zurück auf DEINEN Code** */
    text-align: start; /* **Zurück auf DEINEN Code** */
    background-color: white; /* **Zurück auf DEINEN Code** */
}

/* Text im Block */
.side-info-panel .text-block p {
    margin: 0; /* **Zurück auf DEINEN Code** */
    font-size: 0.7em; /* **Zurück auf DEINEN Code** */
    color: #333; /* **Zurück auf DEINEN Code** */
    font-family: "Courier New", Courier, monospace; /* **Zurück auf DEINEN Code** */
}

/* Stil für die E-Mail in der Infobar */
/* Sicherstellen, dass das <a> Tag die Klasse panel-email-link hat */
.side-info-panel a.panel-email-link {
    color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
    text-decoration: underline; /* Unterstreichung hinzufügen */
    font-family: inherit; /* Schriftart vom Elternelement erben (Courier New) */
    transition: color 0.3s ease; /* Hover-Effekt */
}

.side-info-panel a.panel-email-link:hover {
    color: #1000ec; /* Blau beim Hover */
    text-decoration: underline; /* Unterstreichung beim Hover */
}

/* Stil für die E-Mail in der Infobar (besuchter Zustand) */
.side-info-panel a.panel-email-link:visited {
    color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
    text-decoration: underline; /* Unterstreichung beibehalten */
}


/* Stil für den Instagram-Link im Side-Panel */
.side-info-panel .panel-instagram-link {
    color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
    text-decoration: none; /* Standardmäßig KEINE Unterstreichung für den gesamten Link */
    font-family: inherit; /* Schriftart vom Elternelement erben (Courier New) */
    /* Entferne die transition auf dem Link selbst, da nur der span-Teil farblich reagieren soll */
    /* transition: color 0.3s ease; */
}

/* Stil für das span-Element innerhalb des Instagram-Links, das unterstrichen werden soll */
.side-info-panel .panel-instagram-link .underline-instagram {
    text-decoration: underline; /* Unterstreicht NUR das span-Element */
    color: inherit; /* Behält die Textfarbe des Elternelements (sollte schwarz sein) */
    transition: color 0.3s ease; /* Füge die transition auf das span-Element hinzu */
}

/* Hover-Effekt für NUR den unterstrichenen Text (@ferdinandwaltz) */
.side-info-panel .panel-instagram-link .underline-instagram:hover {
    color: #1000ec; /* Ändert die Farbe NUR des span-Elements zu Blau beim Hover */
}

/* Stelle sicher, dass der gesamte Link beim Hover NICHT blau wird */
.side-info-panel .panel-instagram-link:hover {
     color: inherit; /* Behält die Standardfarbe (schwarz) für den gesamten Link */
}

/* Stelle sicher, dass der unterstrichene Teil beim Hover unterstrichen bleibt */
.side-info-panel .panel-instagram-link:hover .underline-instagram {
    text-decoration: underline; /* Stellt sicher, dass der unterstrichene Teil unterstrichen bleibt */
}

/* Stil für den Instagram-Link im Side-Panel (besuchter Zustand) */
.side-info-panel .panel-instagram-link:visited {
    color: inherit; /* Der gesamte Link bleibt schwarz */
    text-decoration: none; /* Standardmäßig KEINE Unterstreichung für den gesamten Link */
}

/* Stil für das span-Element innerhalb des Instagram-Links (besuchter Zustand) */
.side-info-panel .panel-instagram-link:visited .underline-instagram {
    text-decoration: underline; /* Unterstreicht NUR das span-Element */
    color: inherit; /* Behält die Textfarbe des Elternelements (sollte schwarz sein) */
}

/* Optional: Stelle sicher, dass der Hover-Effekt auf :visited Links funktioniert */
.side-info-panel .panel-instagram-link:visited .underline-instagram:hover {
    color: #1000ec;
}


/* --- Text-Overlays (Info, About Me/Current Works) --- */

/* Standard (Desktop) Stile */
.overlay-text {
    position: fixed; /* Standard: Fixed */
    top: 50%; /* Standard: Vertikal zentriert */
    transform: translateY(-50%); /* Standard: Vertikal zentriert */
    font-family: "Courier New", Courier, monospace;
    font-size: 14px; /* Original Größe */
    color: black; /* Wieder reines Schwarz */
    text-decoration: none;
    z-index: 10; /* Standard Z-Index */
    cursor: pointer;
    white-space: nowrap; /* Behalten */
    transition: color 0.2s ease; /* Behalten */
    padding: 10px; /* Padding für größere Klickfläche */
}

/* Besuchter Zustand für die Overlay-Links */
.overlay-text:visited {
    color: black; /* Bleiben schwarz */
    text-decoration: none; /* Keine Unterstreichung */
}


.overlay-text:hover {
    color: #1000ec; /* Blau beim Hover - Behalten */
    text-decoration: none; /* Keine Unterstreichung beim Hover (falls :visited unterstreicht) */
}


.info-text {
    left: 40px; /* Standard Position */
    text-align: left; /* Standard Ausrichtung */
}

.about-me-text {
    right: 40px; /* Standard Position */
    text-align: right; /* Standard Ausrichtung */
}

/* Plus-Dekoration */
.overlay-text.info-text::after {
    content: "+";
    margin-left: 20px; /* Original Abstand */
    font-family: "Courier New", Courier, monospace;
    font-size: 18px; /* Original Größe */
    vertical-align: middle;
    color: inherit; /* Behält Farbe des Elternelements */
}

.overlay-text.about-me-text::before {
    content: "+";
    margin-right: 20px; /* Original Abstand */
    font-family: "Courier New", Courier, monospace;
    font-size: 18px; /* Original Größe */
    vertical-align: middle;
    color: inherit; /* Behält Farbe des Elternelements */
}


/* Container für die Overlay-Links auf Mobilgeräten */
.overlay-links-container {
    display: none; /* Standardmäßig versteckt */
}


/* --- Responsivität --- */

/* Tablet und größere Handys (Querformat) */
@media (max-width: 992px) {
    .header {
        padding: 15px 30px 0;
        font-size: 1.3em; /* Größer */
    }
     .header-left, .header-right, .header-center { /* Alle Header-Elemente */
        font-size: 1em; /* Gleiche Größe wie das Header-Elternteil */
     }
     .header-center {
         transform: translateX(-30px);
     }


    .center-image {
        margin-top: 60px;
        margin-bottom: 60px;
        padding: 0 20px;
    }

    .main-image {
        width: 80vw;
        max-height: 70vh; /* Höher */
    }

    .image-text {
        font-size: 28px; /* Größer */
    }

    .image-text h1 {
         font-size: 1.1em; /* Größer */
     }

    .image-text p {
        margin-top: 40px; /* Größer */
        font-size: 24px; /* Größer */
    }

    /* Overlay-Links auf Tablets (Standard Fixed Position behalten, Größe anpassen) */
    .overlay-text {
        font-size: 1.5em; /* Größer */
        left: 30px;
        right: 30px;
         padding: 15px; /* Größer */
         /* Standard (fixed) Position bleibt: */
         position: fixed;
         top: 50%;
         transform: translateY(-50%);
         width: auto; /* Breite automatisch */
    }

     /* Besuchter Zustand für die Overlay-Links auf Tablets */
    .overlay-text:visited {
        color: black; /* Bleiben schwarz */
        text-decoration: none; /* Keine Unterstreichung */
    }


     .overlay-text.info-text::after,
     .overlay-text.about-me-text::before {
         font-size: 1.3em; /* Größe anpassen */
         margin: 0 20px; /* Abstand anpassen */
     }


    .upcoming-section {
        padding: 80px 8%;
    }

    .upcoming-title h2 {
        font-size: 72px; /* Größer */
    }

    .underline {
        width: 250px; /* Länger */
    }

     .upcoming-blocks {
        gap: 40px; /* Größer */
     }

    .show-block {
         width: calc(50% - 20px); /* Zwei Spalten */
         min-width: 300px; /* Mindestbreite erhöhen */
         font-size: 1.3em; /* Größer */
         line-height: 1.8;
    }

    .show-label {
        font-size: 1.2em; /* Größer */
    }

    .show-date {
        font-size: 1.4em; /* Größer */
    }

    .show-details {
        font-size: 1.1em; /* Größer */
    }

    .narrow-section {
        padding-left: 8%;
        padding-right: 8%;
    }

    .nerrwo-title {
        font-size: 76px; /* Größer */
    }

    .spacss-title {
        font-size: 68px; /* Größer */
    }

    .project-container {
        gap: 40px;
    }

    .rotated-label {
        font-size: 1.3em; /* Größer */
        margin-top: 80px;
    }

    .project-description {
        font-size: 1.2em; /* Größer */
        padding-top: 30px;
        line-height: 1.9;
    }

    .language-toggle {
         font-size: 1.4rem; /* Größer */
    }

    .footer-bar {
        gap: 30px;
    }

    .footer-item {
        font-size: 1.2em; /* Größer */
         padding: 8px 12px; /* Padding anpassen */
    }

     .instagram-icon {
        width: 30px; /* Größer */
     }


    #about {
        padding: 80px 40px; /* Größer */
    }

    #about h2#lebenslauf,
    #about h3#projekte,
    #about h3#contact {
        font-size: 72px; /* Größer */
    }

    #about h2#lebenslauf::after,
    #about h3#projekte::after,
    #about h3#contact::after {
        width: 250px; /* Länger */
        margin-left: 20px;
    }

     #about h4 {
        font-size: 1.4em; /* Größer */
     }

     #about p, #about ul {
         font-size: 1.2em; /* Größer */
         line-height: 1.9;
     }

     /* Stil für anklickbare E-Mail-Adresse auf der About-Me-Seite (besuchter Zustand) auf Tablets */
    #about a.about-me-email-link:visited {
        color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
        text-decoration: underline; /* Unterstreichung beibehalten */
    }


    .side-info-panel {
        width: 150px; /* Breiter */
        left: -160px;
    }

    .side-info-panel.open {
        left: 5px;
    }

    .side-info-panel .panel-content {
        gap: 25px; /* Größer */
    }

    .side-info-panel .text-block p {
        font-size: 0.9em; /* Größer */
    }

    /* Stil für die E-Mail in der Infobar (besuchter Zustand) auf Tablets */
    .side-info-panel a.panel-email-link:visited {
        color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
        text-decoration: underline; /* Unterstreichung beibehalten */
    }

    /* Stil für den Instagram-Link im Side-Panel auf Tablets */
    /* Der gesamte Link bleibt schwarz */
    .side-info-panel .panel-instagram-link {
        text-decoration: none; /* Sicherstellen */
        color: inherit; /* Sicherstellen */
    }
    /* Nur der unterstrichene Teil wird unterstrichen und beim Hover blau */
    .side-info-panel .panel-instagram-link .underline-instagram {
        text-decoration: underline; /* Unterstreichung beibehalten */
        transition: color 0.3s ease; /* Transition für Farbe */
    }
    .side-info-panel .panel-instagram-link:hover .underline-instagram {
        color: #1000ec; /* Farbe beim Hover */
    }
    /* Der gesamte Link bleibt beim Hover schwarz */
    .side-info-panel .panel-instagram-link:hover {
        color: inherit;
    }
     /* Stil für den Instagram-Link im Side-Panel (besuchter Zustand) auf Tablets */
    .side-info-panel .panel-instagram-link:visited {
        color: inherit; /* Der gesamte Link bleibt schwarz */
        text-decoration: none; /* Standardmäßig KEINE Unterstreichung für den gesamten Link */
    }
    /* Stil für das span-Element innerhalb des Instagram-Links (besuchter Zustand) auf Tablets */
    .side-info-panel .panel-instagram-link:visited .underline-instagram {
        text-decoration: underline; /* Unterstreicht NUR das span-Element */
        color: inherit; /* Behält die Textfarbe des Elternelements (sollte schwarz sein) */
    }
}


/* Handys (Hochformat) - Angepasste Größen für natürlicheres Layout */
@media (max-width: 768px) {
     body {
        /* Füge Padding oben und unten hinzu, um Header und Footer Platz zu geben, falls sie fest sind */
        /* padding-top: 100px; /* Beispiel */
        /* padding-bottom: 200px; /* Beispiel */
     }

    /* Header */
    .header {
        flex-direction: column; /* Elemente untereinander */
        align-items: center;
        padding: 20px 20px; /* Padding anpassen */
        font-size: 1.4em; /* Header-Text Größe ANPASSEN */
    }
    .header-left,
    .header-center,
    .header-right {
        text-align: center;
        width: 100%; /* Volle Breite */
        margin-bottom: 15px; /* Abstand zwischen den Elementen anpassen */
        padding: 10px 0; /* Padding für Klickfläche anpassen */
        box-sizing: border-box;
        font-size: 1em; /* Gleiche Größe wie das Header-Elternteil */
    }
     .header-left {
         margin-bottom: 20px; /* Etwas mehr Abstand nach dem Namen */
     }
     .header-right {
         margin-bottom: 0; /* Kein Abstand nach dem letzten Element */
     }

    .header-center {
        transform: none; /* Ursprüngliche Verschiebung entfernen */
        order: -1; /* Zentriertes Element (Titel) nach oben verschieben */
    }

    /* Hauptbild */
    .center-image {
        margin-top: 60px; /* Abstand anpassen */
        margin-bottom: 60px;
        padding: 0 20px; /* Whitespace an den Rändern */
        box-sizing: border-box;
    }

    .main-image {
        width: 100%; /* Bild 100% Breite */
        max-height: 70vh; /* Maximale Höhe anpassen */
        object-fit: cover; /* Bild kann beschnitten werden */
    }

    /* Text-Overlay im Bild */
    .image-text {
        font-size: 2.5em; /* Textgröße anpassen */
        top: 30%; /* Position anpassen */
        padding: 0 20px; /* Padding anpassen */
        line-height: 1.2;
    }
     .image-text h1 {
        font-size: 1em; /* H1 im Bild anpassen (relative Größe) */
        margin-bottom: 10px; /* Abstand anpassen */
     }
     .image-text p {
        font-size: 0.7em; /* P im Bild anpassen (relative Größe) */
        margin-top: 20px; /* Abstand anpassen */
     }


    /* Overlay-Links (Info, About Me/Current Works) auf Mobilgeräten */
    .overlay-links-container {
        display: flex; /* Container anzeigen */
        position: fixed; /* Fixiert am Bildschirmrand */
        /* bottom: 100px; */ /* Position oberhalb des Footers (ggf. anpassen) */
        top: 50%; /* **NEU: Vertikal mittig positionieren** */
        transform: translateY(-50%); /* **NEU: Vertikal zentrieren** */
        left: 0;
        width: 100%; /* Volle Breite */
        justify-content: space-between; /* Abstand zwischen den Links */
        padding: 0 20px; /* Abstand von den Rändern */
        box-sizing: border-box;
        z-index: 20; /* Z-Index erhöhen */
        align-items: center; /* Vertikal zentrieren */
    }

    /* Originale Overlay-Links auf Mobilgeräten verstecken */
    .overlay-text:not(.overlay-links-container .overlay-text) {
        display: none;
    }


    /* Stile für die Links INNERHALB des Containers */
     .overlay-links-container .overlay-text {
         position: static; /* Positionierung im Flex-Container */
         top: auto;
         transform: none;
         font-size: 1.4em; /* Textgröße WEITER ANPASSEN */
         padding: 10px 0; /* Padding für Klickfläche WEITER ANPASSEN */
         width: 48%; /* Breite anpassen */
         box-sizing: border-box;
         white-space: normal; /* Umbruch erlauben */
         text-align: center; /* Text im Link zentrieren */
         display: flex; /* Für vertikale Zentrierung des Plus-Zeichens */
         justify-content: center; /* Horizontal zentrieren des Textes */
         align-items: center; /* Vertikal zentrieren */
         gap: 5px; /* Abstand zwischen Text und Plus WEITER ANPASSEN */
     }

    /* Besuchter Zustand für die Overlay-Links auf Mobilgeräten */
    .overlay-links-container .overlay-text:visited {
        color: black; /* Bleiben schwarz */
        text-decoration: none; /* Keine Unterstreichung */
    }


    .overlay-links-container .info-text {
        justify-content: flex-start; /* Text linksbündig */
        text-align: left; /* Text linksbündig */
    }

    .overlay-links-container .about-me-text {
        justify-content: flex-end; /* Text rechtsbündig */
        text-align: right; /* Text rechtsbündig */
    }

     /* Plus-Dekorationen auf Mobilgeräten */
     .overlay-links-container .overlay-text.info-text::after {
         content: "+"; /* Plus-Zeichen wieder anzeigen */
         font-size: 0.8em; /* Größe WEITER ANPASSEN */
         margin-left: 10px; /* Abstand WEITER ANPASSEN */
     }

     .overlay-links-container .overlay-text.about-me-text::before {
         content: "+"; /* Plus-Zeichen wieder anzeigen */
         font-size: 0.8em; /* Größe WEITER ANPASSEN */
         margin-right: 10px; /* Abstand WEITER ANPASSEN */
         order: 1; /* Plus-Zeichen nach dem Text anzeigen */
     }


    /* Upcoming Section */
    .upcoming-section {
        padding: 80px 20px; /* Padding anpassen */
    }

    .upcoming-title {
        flex-direction: column; /* Titel und Unterstrich untereinander */
        align-items: flex-start; /* Links ausrichten */
        gap: 10px; /* Abstand anpassen */
        margin-bottom: 40px; /* Abstand zu den Blöcken anpassen */
    }

    .upcoming-title h2 {
        font-size: 3em; /* Größe anpassen */
        line-height: 1.1;
    }

    .underline {
        width: 200px; /* Länge anpassen */
        height: 4px; /* Dicke anpassen */
        margin-bottom: 0;
    }

    .upcoming-blocks {
        flex-direction: column; /* Blöcke untereinander */
        gap: 20px; /* Abstand zwischen den Blöcken ANPASSEN */
    }

    .show-block {
        width: 100%; /* Volle Breite */
        min-width: auto; /* Mindestbreite entfernen */
        font-size: 1.1em; /* Textgröße im Block ANPASSEN */
        line-height: 1.7; /* Zeilenabstand ANPASSEN */
        padding: 15px 0; /* Padding für bessere Lesbarkeit ANPASSEN */
        border-bottom: 1px dashed #ccc; /* Trennlinie anpassen */
    }
     .show-block:last-child {
         border-bottom: none; /* Keine Trennlinie unter dem letzten Block */
     }


    .show-label {
        font-size: 1em; /* Größe ANPASSEN (relativ zum Block) */
        font-weight: bold;
        margin-bottom: 10px; /* Abstand ANPASSEN */
    }

    .show-date {
        font-size: 1.1em; /* Größe ANPASSEN */
        margin-bottom: 10px; /* Abstand ANPASSEN */
    }

     .show-time {
        font-size: 0.9em; /* Größe ANPASSEN */
        font-style: normal; /* Kursiv entfernen */
     }

    .show-details {
        font-size: 0.9em; /* Größe ANPASSEN */
        line-height: 1.6;
        margin-top: 10px; /* Abstand ANPASSEN */
    }


    /* Narrow + Spaces + Projektbeschreibung */
    .narrow-section {
        padding-left: 20px; /* Padding anpassen */
        padding-right: 20px; /* Padding anpassen */
        margin-top: 80px; /* Abstand anpassen */
        margin-bottom: 120px; /* Mehr Abstand zum Footer (ggf. anpassen) */
    }

    .nerrwo-title {
        font-size: 3em; /* Größe anpassen */
        line-height: 1.1;
    }

    .spacss-title {
        font-size: 2.5em; /* Größe anpassen */
        line-height: 1.1;
        margin-left: 0; /* Keine Verschiebung */
    }

    .project-container {
        flex-direction: column; /* Elemente untereinander */
        gap: 30px; /* Abstand anpassen */
        margin-top: 40px; /* Abstand anpassen */
        position: static; /* Positionierung entfernen */
        padding-left: 0; /* Padding entfernen */
    }

    .rotated-label {
        writing-mode: horizontal-tb; /* Horizontaler Text */
        transform: none; /* Rotation entfernen */
        font-size: 1.5em; /* Größe anpassen */
        margin-top: 0;
        margin-bottom: 20px; /* Abstand zur Beschreibung anpassen */
        font-weight: bold;
    }

    .project-description {
        font-size: 1em; /* Größe anpassen für bessere Lesbarkeit */
        line-height: 1.8; /* Zeilenabstand anpassen */
        max-width: 100%; /* Volle Breite */
        padding-top: 0; /* Padding entfernen */
    }
     .project-description p {
         margin-bottom: 20px; /* Abstand zwischen Absätzen anpassen */
     }


    .language-toggle {
        position: static; /* Positionierung entfernen */
        margin-bottom: 20px; /* Abstand zur Beschreibung anpassen */
        transform: none;
        font-size: 1.1em; /* Größe anpassen */
    }

    /* Footer */
    .footer-bar {
        flex-direction: column; /* Standardmäßig untereinander */
        gap: 15px; /* Abstand anpassen */
        padding: 20px 20px; /* Padding anpassen */
         border-top: 1px solid black; /* Rand anpassen */
         position: relative; /* Kann helfen, wenn es Probleme gibt */
         bottom: auto;
         left: auto;
         width: auto;
    }

    .footer-item {
        font-size: 1em; /* Größe anpassen */
        text-align: center; /* Zentrieren */
        padding: 15px 0; /* Padding für Klickfläche anpassen */
        width: 100%; /* Volle Breite für leichtere Klickbarkeit */
    }

    /* Footer-Flexbox für bestimmte Elemente nebeneinander */
    .footer-row {
        display: flex; /* Elemente nebeneinander */
        justify-content: space-around; /* Gleichmäßiger Abstand */
        align-items: center;
        width: 100%; /* Volle Breite */
        gap: 10px; /* Kleinerer Abstand zwischen Elementen in der Reihe */
    }

    /* Spezifische Footer-Items, die in einer Reihe sein sollen */
    .footer-row .footer-item {
        width: auto; /* Breite automatisch */
        padding: 0 5px; /* Kleineres Padding */
        white-space: nowrap; /* Nicht umbrechen */
    }


     .instagram-icon {
        width: 30px; /* Größe anpassen */
     }


    /* About Me Seite */
    #about {
        padding: 80px 20px; /* Padding anpassen */
        margin-top: 60px;
    }

    #about h2#lebenslauf,
    #about h3#projekte,
    #about h3#contact {
        font-size: 3em; /* Größe anpassen */
        flex-direction: column; /* Elemente untereinander */
        align-items: flex-start; /* Links ausrichten */
        margin-bottom: 30px; /* Abstand anpassen */
    }

    #about h2#lebenslauf::after,
    #about h3#projekte::after,
    #about h3#contact::after {
        width: 200px; /* Länge anpassen */
        height: 4px; /* Dicke anpassen */
        margin-left: 0; /* Keine Verschiebung */
        margin-top: 10px; /* Abstand zum Titel anpassen */
        margin-bottom: 0;
    }

    #about ul {
        list-style: disc; /* Punkte wieder hinzufügen */
        padding-left: 25px; /* Einrückung anpassen */
        margin-top: 20px; /* Abstand anpassen */
        margin-bottom: 20px; /* Abstand anpassen */
        font-size: 1em; /* Größe anpassen */
        line-height: 1.8; /* Zeilenabstand anpassen */
    }
     #about li {
         margin-bottom: 10px; /* Abstand zwischen Listenelementen anpassen */
     }


     #about h4 {
        font-size: 1.2em; /* Größe anpassen */
        margin-top: 30px; /* Abstand anpassen */
        margin-bottom: 15px; /* Abstand anpassen */
     }

     #about p {
        margin-bottom: 20px; /* Abstand anpassen */
        font-size: 1em; /* Größe anpassen */
        line-height: 1.8; /* Zeilenabstand anpassen */
     }

    /* Stil für anklickbare E-Mail-Adresse auf der About-Me-Seite (besuchter Zustand) auf Handys */
    #about a.about-me-email-link:visited {
        color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
        text-decoration: underline; /* Unterstreichung beibehalten */
    }

    /* Side-Panel */
    .side-info-panel {
        /* Standard-Stile für größere Bildschirme bleiben oben */
    }

    .side-info-panel.open {
        /* Offen-Stile für größere Bildschirme bleiben oben */
    }

    .side-info-panel .panel-content {
       /* Stile für größere Bildschirme bleiben oben */
    }

    .side-info-panel .text-block {
       /* Stile für größere Bildschirme bleiben oben */
    }

     /* Text im Block */
    .side-info-panel .text-block p {
        /* Stile für größere Bildschirme bleiben oben */
    }

    /* Stil für die E-Mail in der Infobar */
    .side-info-panel a.panel-email-link {
       /* Stile für größere Bildschirme bleiben oben */
    }

    .side-info-panel a.panel-email-link:hover {
       /* Stile für größere Bildschirme bleiben oben */
    }

    /* Stil für die E-Mail in der Infobar (besuchter Zustand) auf Handys */
    .side-info-panel a.panel-email-link:visited {
        color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
        text-decoration: underline; /* Unterstreichung beibehalten */
    }


    /* Stil für den Instagram-Link im Side-Panel auf Handys */
    /* Der gesamte Link bleibt schwarz */
    .side-info-panel .panel-instagram-link {
        text-decoration: none; /* Sicherstellen */
        color: inherit; /* Sicherstellen */
    }
    /* Nur der unterstrichene Teil wird unterstrichen und beim Hover blau */
    .side-info-panel .panel-instagram-link .underline-instagram {
        text-decoration: underline; /* Unterstreichung beibehalten */
        transition: color 0.3s ease; /* Transition für Farbe */
    }
    .side-info-panel .panel-instagram-link:hover .underline-instagram {
        color: #1000ec; /* Farbe beim Hover */
    }
    /* Der gesamte Link bleibt beim Hover schwarz */
    .side-info-panel .panel-instagram-link:hover {
        color: inherit;
    }
     /* Stil für den Instagram-Link im Side-Panel (besuchter Zustand) auf Handys */
    .side-info-panel .panel-instagram-link:visited {
        color: inherit; /* Der gesamte Link bleibt schwarz */
        text-decoration: none; /* Standardmäßig KEINE Unterstreichung für den gesamten Link */
    }
    /* Stil für das span-Element innerhalb des Instagram-Links (besuchter Zustand) auf Handys */
    .side-info-panel .panel-instagram-link:visited .underline-instagram {
        text-decoration: underline; /* Unterstreicht NUR das span-Element */
        color: inherit; /* Behält die Textfarbe des Elternelements (sollte schwarz sein) */
    }


    /* Media Query für Handys (unter 768px) - Anpassung der Infobar */
    /* Hier machen wir die Infobar kleiner als die Hälfte der Seite */
    .side-info-panel {
        width: 65vw; /* Breite ANPASSEN (nur etwas mehr als die Hälfte) */
        left: 0; /* Startet am linken Rand */
        transform: translateX(-65vw); /* Nach links aus dem Bildschirm schieben */
        transition: transform 0.3s ease; /* Transformation animieren */
        padding: 20px; /* Padding anpassen */
        border-right: none;
        border-bottom: none; /* Kein Rand unten */
        top: 0; /* Oben positionieren */
        height: 100%; /* Volle Höhe des Viewport */
        overflow-y: auto; /* Scrollbar, falls nötig */
    }

    .side-info-panel.open {
        transform: translateX(0); /* Ins Bild schieben */
    }

    .side-info-panel .panel-content {
        flex-direction: column; /* Blöcke untereinander */
        justify-content: flex-start; /* Oben ausrichten */
        gap: 30px; /* Abstand zwischen Blöcken anpassen */
        height: auto; /* Höhe an Inhalt anpassen */
        padding-top: 20px; /* Padding anpassen */
        padding-bottom: 20px; /* Padding anpassen */
    }

    .side-info-panel .text-block {
         writing-mode: horizontal-tb; /* Horizontaler Text */
         width: 100%; /* Volle Breite */
         padding: 0; /* Padding entfernen */
         border-bottom: 1px dashed #ccc; /* Trennlinie anpassen */
         padding-bottom: 20px; /* Abstand unter der Trennlinie anpassen */
         font-size: 1em; /* Größe anpassen */
         line-height: 1.8; /* Zeilenabstand anpassen */
         text-align: left; /* Text linksbündig */
    }

     .side-info-panel .text-block:last-child {
         border-bottom: none; /* Keine Trennlinie unter dem letzten Block */
         padding-bottom: 0;
     }

     .side-info-panel .text-block p {
        font-size: 1em; /* Größe anpassen (relativ zum Block) */
        color: #000; /* Farbe anpassen */
        margin-bottom: 15px; /* Abstand anpassen */
     }

     /* Titel im Sidepanel (falls vorhanden und sichtbar gemacht) */
    .side-info-panel h3 {
        font-size: 1.5em; /* Größe anpassen */
        margin-bottom: 20px; /* Abstand anpassen */
    }
}


/* Noch kleinere Handys (unter 480px) - Angepasste Größen */
@media (max-width: 480px) {
    /* Header */
    .header {
        padding: 15px 15px;
        font-size: 1.2em; /* Header-Text Größe ANPASSEN */
    }
    .header-left, .header-center, .header-right { /* Alle Header-Elemente */
        font-size: 1em; /* Gleiche Größe wie das Header-Elternteil */
        padding: 8px 0;
    }
    .header-center {
        /* transform: none; */ /* Transformation bleibt entfernt */
    }


    /* Hauptbild */
    .center-image {
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 0 15px;
    }
    .main-image {
        width: 100%;
        max-height: 70vh; /* Max Höhe anpassen */
    }
    .image-text {
        font-size: 2em; /* Größe anpassen */
        top: 28%;
        padding: 0 15px;
    }
     .image-text h1 {
        font-size: 1em;
        margin-bottom: 8px;
     }
     .image-text p {
        font-size: 0.7em;
        margin-top: 15px;
     }


    /* Overlay-Links auf kleineren Handys */
    /* Container für die Overlay-Links auf kleinen Handys */
     .overlay-links-container {
        /* bottom: 80px; */ /* Position anpassen - wird jetzt von top/transform gesteuert */
        top: 50%; /* **NEU: Vertikal mittig** */
        transform: translateY(-50%); /* **NEU: Vertikal zentrieren** */
        padding: 0 15px; /* Abstand von den Rändern */
     }

    /* Stile für die Links INNERHALB des Containers */
    .overlay-links-container .overlay-text {
        font-size: 1.2em; /* Größe WEITER ANPASSEN */
        padding: 8px 0; /* Größe WEITER ANPASSEN */
         width: 48%; /* Breite anpassen */
    }
     /* Besuchter Zustand für die Overlay-Links auf kleineren Handys */
    .overlay-links-container .overlay-text:visited {
        color: black; /* Bleiben schwarz */
        text-decoration: none; /* Keine Unterstreichung */
    }

     .overlay-links-container .overlay-text.info-text::after,
     .overlay-links-container .overlay-text.about-me-text::before {
         font-size: 0.7em; /* Größe WEITER ANPASSEN */
         margin: 0 6px; /* Abstand WEITER ANPASSEN */
     }


    /* Upcoming Section */
    .upcoming-section {
        padding: 60px 15px; /* Größe anpassen */
    }
    .upcoming-title h2 {
        font-size: 2.5em; /* Größe anpassen */
    }
    .underline {
        width: 180px; /* Länge anpassen */
        height: 3px; /* Dicke */
    }
    .upcoming-blocks {
        flex-direction: column; /* Blöcke untereinander */
        gap: 20px; /* Größe ANPASSEN */
    }
    .show-block {
        font-size: 1em; /* Größe ANPASSEN */
        line-height: 1.6; /* Zeilenabstand ANPASSEN */
        padding: 12px 0; /* Größe ANPASSEN */
         border-bottom: 1px dashed #ccc;
    }
     .show-block:last-child {
         border-bottom: none;
     }

    .show-label {
        font-size: 0.9em; /* Größe ANPASSEN */
        margin-bottom: 8px; /* Abstand ANPASSEN */
    }

    .show-date {
        font-size: 1em; /* Größe ANPASSEN */
        margin-bottom: 8px; /* Abstand ANPASSEN */
    }

     .show-time {
        font-size: 0.8em; /* Größe ANPASSEN */
     }

    .show-details {
        font-size: 0.8em; /* Größe ANPASSEN */
        line-height: 1.5;
         margin-top: 8px; /* Abstand ANPASSEN */
    }


    /* Narrow + Spaces + Projektbeschreibung */
    .narrow-section {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 60px;
        margin-bottom: 100px;
    }
    .nerrwo-title {
        font-size: 2.5em; /* Größe anpassen */
    }
    .spacss-title {
        font-size: 2em; /* Größe anpassen */
    }
    .project-container {
        gap: 25px;
        margin-top: 30px;
    }
    .rotated-label {
        font-size: 1.3em; /* Größe anpassen */
        margin-bottom: 15px;
    }
    .project-description {
        font-size: 0.9em; /* Größe anpassen */
        line-height: 1.7;
    }
     .project-description p {
         margin-bottom: 15px;
     }
    .language-toggle {
        font-size: 1em; /* Größe anpassen */
        margin-bottom: 15px;
    }


    /* Footer */
    .footer-bar {
        flex-direction: column; /* Standardmäßig untereinander */
        gap: 10px; /* Abstand anpassen */
        padding: 15px 15px; /* Größe anpassen */
    }
    .footer-item {
        font-size: 0.9em; /* Größe anpassen */
        text-align: center; /* Zentrieren */
        padding: 10px 0; /* Größe anpassen */
        width: 100%; /* Volle Breite für leichtere Klickbarkeit */
    }

    /* Footer-Flexbox für bestimmte Elemente nebeneinander */
    .footer-row {
        display: flex; /* Elemente nebeneinander */
        justify-content: space-around; /* Gleichmäßiger Abstand */
        align-items: center;
        width: 100%; /* Volle Breite */
        gap: 8px; /* Kleinerer Abstand zwischen Elementen in der Reihe */
    }

    /* Spezifische Footer-Items, die in einer Reihe sein sollen */
    .footer-row .footer-item {
        width: auto; /* Breite automatisch */
        padding: 0 3px; /* Kleineres Padding */
        white-space: nowrap; /* Nicht umbrechen */
        font-size: 0.9em; /* Größe ANPASSEN */
    }

     .instagram-icon {
        width: 25px; /* Größe anpassen */
     }


    /* About Me Seite */
    #about {
        padding: 60px 15px; /* Größe anpassen */
        margin-top: 60px;
    }
    #about h2#lebenslauf,
    #about h3#projekte,
    #about h3#contact {
        font-size: 2.5em; /* Größe anpassen */
        margin-bottom: 25px;
    }
    #about h2#lebenslauf::after,
    #about h3#projekte::after,
    #about h3#contact::after {
        width: 180px; /* Länge anpassen */
        height: 3px;
        margin-top: 8px;
    }
     #about ul {
        margin-top: 15px;
        padding-left: 20px;
        font-size: 0.9em; /* Größe anpassen */
        line-height: 1.7;
     }
     #about li {
         margin-bottom: 8px;
     }
     #about h4 {
        font-size: 1.1em; /* Größe anpassen */
        margin-top: 30px;
        margin-bottom: 10px;
     }
     #about p {
        margin-bottom: 15px;
        font-size: 0.9em; /* Größe anpassen */
        line-height: 1.7;
     }

     /* Stil für anklickbare E-Mail-Adresse auf der About-Me-Seite (besuchter Zustand) auf kleineren Handys */
    #about a.about-me-email-link:visited {
        color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
        text-decoration: underline; /* Unterstreichung beibehalten */
    }


    /* Side-Panel */
    .side-info-panel {
        /* Standard-Stile für größere Bildschirme bleiben oben */
    }

    .side-info-panel.open {
        /* Offen-Stile für größere Bildschirme bleiben oben */
    }

    .side-info-panel .panel-content {
       /* Stile für größere Bildschirme bleiben oben */
    }

    .side-info-panel .text-block {
       /* Stile für größere Bildschirme bleiben oben */
    }

     /* Text im Block */
    .side-info-panel .text-block p {
        /* Stile für größere Bildschirme bleiben oben */
    }

    /* Stil für die E-Mail in der Infobar */
    .side-info-panel a.panel-email-link {
       /* Stile für größere Bildschirme bleiben oben */
    }

    .side-info-panel a.panel-email-link:hover {
       /* Stile für größere Bildschirme bleiben oben */
    }

    /* Stil für die E-Mail in der Infobar (besuchter Zustand) auf kleineren Handys */
    .side-info-panel a.panel-email-link:visited {
        color: inherit; /* Farbe vom Elternelement erben (sollte schwarz sein) */
        text-decoration: underline; /* Unterstreichung beibehalten */
    }


    /* Stil für den Instagram-Link im Side-Panel auf kleineren Handys */
    /* Der gesamte Link bleibt schwarz */
    .side-info-panel .panel-instagram-link {
        text-decoration: none; /* Sicherstellen */
        color: inherit; /* Sicherstellen */
    }
    /* Nur der unterstrichene Teil wird unterstrichen und beim Hover blau */
    .side-info-panel .panel-instagram-link .underline-instagram {
        text-decoration: underline; /* Unterstreichung beibehalten */
        transition: color 0.3s ease; /* Transition für Farbe */
    }
    .side-info-panel .panel-instagram-link:hover .underline-instagram {
        color: #1000ec; /* Farbe beim Hover */
    }
    /* Der gesamte Link bleibt beim Hover schwarz */
    .side-info-panel .panel-instagram-link:hover {
        color: inherit;
    }
     /* Stil für den Instagram-Link im Side-Panel (besuchter Zustand) auf kleineren Handys */
    .side-info-panel .panel-instagram-link:visited {
        color: inherit; /* Der gesamte Link bleibt schwarz */
        text-decoration: none; /* Standardmäßig KEINE Unterstreichung für den gesamten Link */
    }
    /* Stil für das span-Element innerhalb des Instagram-Links (besuchter Zustand) auf kleineren Handys */
    .side-info-panel .panel-instagram-link:visited .underline-instagram {
        text-decoration: underline; /* Unterstreicht NUR das span-Element */
        color: inherit; /* Behält die Textfarbe des Elternelements (sollte schwarz sein) */
    }


    /* Media Query für Handys (unter 480px) - Anpassung der Infobar */
    .side-info-panel {
        width: 80vw; /* Breite ANPASSEN (noch breiter) */
        left: 0;
        transform: translateX(-80vw); /* Nach links aus dem Bildschirm schieben */
        padding: 15px;
    }

    .side-info-panel.open {
        transform: translateX(0);
    }

     .side-info-panel .panel-content {
        gap: 20px; /* Größe anpassen */
        padding-top: 15px;
        padding-bottom: 15px;
     }

    .side-info-panel .text-block {
         padding-bottom: 15px;
         font-size: 0.9em;
         line-height: 1.6;
    }
     .side-info-panel .text-block p {
        font-size: 1em;
        margin-bottom: 8px;
     }
     .side-info-panel h3 {
        font-size: 1.2em;
        margin-bottom: 10px;
     }
}


/* Gesamtbereich mit reduziertem Abstand oben und schmaleren Seitenrändern */
.video-section {
    padding: 0px 3vw 140px 3vw;/* kleiner Abstand nach oben, wenig Rand links/rechts */
    box-sizing: border-box;
  }
  
  /* Überschrift linksbündig */
  .video-heading {
    text-align: left;
    max-width: 1100px;
    margin: 0 auto 10px auto;
    font-size: 64px;
    padding-top: 0p;
  }
  
  /* Videocontainer mittig und groß */
  .youtube-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
  }
  
  /* Video passt sich dem Container an */
  .youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
  
  /* Unterschrift rechtsbündig unter dem Video */
  .video-caption {
    text-align: right;
    max-width: 1100px;
    margin: 10px auto 0 auto;
    font-size: 0.9rem;
    color: #666;
  }
  
  /* Reduzierter Abstand im Responsive Design */
@media (max-width: 768px) {
    .video-section {
      padding-top: -100px; /* Kleiner Abstand nach oben auf mobilen Geräten */
      padding-bottom: 130px; /* trotzdem genug Luft unter dem Video */
    }
  
    
  
    .video-heading {
      font-size: 2.2rem;
      padding-top: -100px;
    }
  
    .video-caption {
      font-size: 0.85rem;
    }
  
}



.ticket-link {
    color: inherit;
    text-decoration: underline;
    transition: color 0.3s ease;
    font-family: "Courier New", Courier, monospace;
}

.ticket-link:hover {
    color: #1000ec; /* gleiches Blau wie bei .email-link:hover */
}

.ticket-link:visited {
    color: inherit;
    text-decoration: underline;
}