/* Verhindert horizontales Scrollen durch Full-Width-Elemente */
body {
    overflow-x: hidden;
}

/* Header Override für Detailseiten (kleinerer Abstand als auf Startseite) */
.site-header {
    padding-block: 1rem 2rem; /* 16px oben, 32px unten */
}

/* --- Details Page Grid --- */
.details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Phone: 4 Spalten */
    column-gap: 0.25rem; /* 4px gutter horizontal */
    row-gap: 0; /* Vertikaler Abstand wird manuell gesteuert */
}

/* --- Table of Contents --- */
.toc-section {
    grid-column: 1 / -1; /* Mobile: Nimmt die volle Breite im Grid ein */
    margin-bottom: 4rem;
    margin-top: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.toc-list::before {
    content: "";
    width: 18px; /* Passt sich der Breite des Markers an */
    background-image: radial-gradient(circle at center, var(--sub-black) 1px, transparent 1px);
    background-size: 2px 10px;
    background-repeat: repeat-y;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}

.toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.toc-list li {
    position: relative;
    z-index: 1;
}

.toc-section h2 {
    margin: 0;
    color: inherit;
    font-weight: 600; /* SemiBold */
    font-size: 1.125rem; /* 18px - Optisch wie vorher, aber semantisch korrekt */
}

.toc-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toc-title-wrapper .icon-touch-target {
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0; /* Standardmässig unsichtbar */
    pointer-events: none;
    visibility: hidden; /* Verhindert Fokus wenn unsichtbar */
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out, visibility 0s 0.2s;
    color: var(--black);
}

.toc-title-wrapper .icon-touch-target:hover {
    color: var(--brand);
}

.toc-title-wrapper .icon-touch-target .arrow-icon {
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    display: block;
    fill: currentColor;
}

/* Klasse wird per JS hinzugefügt, wenn die Seite gescrollt ist (> 10px) */
.toc-title-wrapper .icon-touch-target.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out, visibility 0s;
}

.toc-link-wrapper {
    text-decoration: none;
    color: var(--black);
    transition: color 0.2s ease-in-out;
    display: flex;
    position: relative; /* Ermöglicht die Ausdehnung des Links auf den gesamten Wrapper */
    width: fit-content;
    max-width: 100%; /* Verhindert, dass der Wrapper breiter als der Container wird */
    align-items: center; /* Zentriert den Text vertikal */
    min-height: 3rem; /* 48px */
    gap: 0.75rem; /* 12px Abstand zwischen Icon und Text */
}

/* Maus-spezifische Regeln: Kein Sticky-Hover und schnelle Transition */
@media (hover: hover) {
    .toc-link-wrapper {
        transition: color 0.2s ease-in-out; /* Maus: Schneller Wechsel zurück */
    }
    
    .toc-link-wrapper:hover {
        color: var(--brand);
    }

    .toc-link-wrapper:hover .text-title-medium {
        color: var(--brand);
    }

    .toc-link-wrapper:hover .toc-icon {
        fill: var(--brand);
    }
}

/* Dehnt den Klickbereich des Links auf den gesamten Wrapper aus */
.toc-link-wrapper a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Barrierefreiheit: Legt den Fokus-Rahmen um den gesamten Wrapper, nicht nur den Link */
.toc-link-wrapper:has(a:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Verhindert den doppelten Fokus-Rahmen auf dem Link selbst */
.toc-link-wrapper a:focus-visible {
    outline: none;
}

.toc-marker {
    width: auto; /* Passt sich der Breite des Inhalts (Icon) an */
    align-self: stretch; /* Dehnt den Marker auf die volle Höhe für die Linie */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.toc-marker > div {
    width: 100%; /* Alle Kind-Elemente sind standardmässig voll breit */
    background-color: var(--white);
    flex-grow: 1; /* Füllt den verfügbaren Platz */
}

.toc-marker .icon-container {
    height: auto;
    flex-grow: 0; /* Icon-Container wächst nicht */
    display: flex;
    justify-content: center;
    align-items: center; /* Zentriert das Icon vertikal und verhindert das Strecken */
    background-color: var(--white);
}

.toc-icon {
    width: 18px; /* Grösse des Icons */
    height: 18px;
    margin-block: 0.0625rem; /* 1px */
    fill: var(--sub-black); /* Standardfarbe des Icons */
    display: block;
}

/* Truncation für lange Titel im TOC: Fügt "..." hinzu, wenn der Platz nicht reicht */
.toc-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* WICHTIG: Ermöglicht dem Flex-Item, kleiner als sein Inhalt zu werden */
}

/* Überschreibt die globale Transition für den Text im Wrapper */
.toc-link-wrapper .text-title-medium {
    transition: color 0.2s ease-in-out;
    margin-right: 1.25rem; /* 20px */
    color: inherit; /* WICHTIG: Erbt die Farbe vom Wrapper (schwarz), wenn nicht aktiv */
}

/* Fix für Mobile: Verhindert, dass der Link eine eigene Farbe behält (z.B. :focus), wenn er nicht mehr aktiv ist */
.toc-link-wrapper .text-title-medium:focus,
.toc-link-wrapper .text-title-medium:active,
.toc-link-wrapper .text-title-medium:visited {
    color: inherit;
}

/* Force inactive state: Zwingt den Text auf Schwarz, um Sticky-Hover/Focus auf Mobile zu überschreiben */
.toc-link.force-inactive {
    color: var(--black) !important;
}

/* Auf Desktop soll der Hover trotzdem funktionieren, auch wenn er inaktiv ist */
@media (hover: hover) {
    .toc-link-wrapper:hover .toc-link.force-inactive {
        color: var(--brand) !important;
    }
}

@media (hover: hover) {
    .toc-link-wrapper .text-title-medium { transition: 0.2s ease-in-out; }
}

/* Active State (ScrollSpy): Zeigt den aktuellen Abschnitt an */
.toc-link-wrapper.active,
li.active .toc-link-wrapper {
    color: var(--brand);
    transition: color 0.2s ease-in-out;
}

.toc-link-wrapper.active .text-title-medium,
li.active .toc-link-wrapper .text-title-medium {
    color: var(--brand);
    transition: color 0.2s ease-in-out;
}

.toc-link-wrapper.active .toc-icon,
li.active .toc-link-wrapper .toc-icon {
    fill: var(--brand);
}

/* Active (Click) State: Feedback nur während des Klickens */
.toc-link-wrapper:active {
    color: var(--brand);
}

.toc-link-wrapper:active .text-title-medium {
    color: var(--brand);
}

/* Hover State: Icon und Text werden beim Hovern eingefärbt */
.toc-link-wrapper:active .toc-icon {
    fill: var(--brand);
}

/* Wenn das Kapitel eine Timeline IST, sind die Spacer transparent (zeigen die Linie) */
.toc-link-wrapper.is-timeline .top-spacer,
.toc-link-wrapper.is-timeline .bottom-spacer {
    background-color: transparent;
}

/* Ausnahme: Beim ersten Timeline-Kapitel bleibt der obere Spacer weiss (verdeckt die Linie von oben) */
.toc-marker.is-first-timeline .top-spacer {
    background-color: var(--white);
}

/* Ausnahme: Beim letzten Timeline-Kapitel bleibt der untere Spacer weiss (verdeckt die Linie nach unten) */
.toc-marker.is-last-timeline .bottom-spacer {
    background-color: var(--white);
}

/* --- Project Disclaimer Box --- */
.project-disclaimer {
    grid-column: 1 / -1; /* Standard: Volle Breite */
    background-color: transparent;
    padding: 0.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--sub-black);
    color: var(--sub-black); /* Textfarbe auf sub-black geändert */
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.project-disclaimer p.p2 {
    color: var(--sub-black); /* Überschreibt die globale .p2 Farbe für den Disclaimer */
}
.project-disclaimer p { 
    margin: 0; 
    display: block;
    align-self: center;
}
.disclaimer-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    flex-shrink: 0;
}

/* --- Page-specific Overrides --- */

/* --- Back Link --- */
.back-link-outer-wrapper {
    position: relative;
    width: fit-content;
    margin-bottom: 1rem;
    padding-left: 0;
}

.back-link-wrapper {
    width: fit-content;
    min-height: 3rem; /* 48px */
    display: flex;
    align-items: center;
    padding-left: 0;
    text-decoration: none;
    cursor: pointer;
    color: var(--black); /* Default color for the wrapper and its contents */
    transition: color 0.2s ease; /* Smooth transition for color change */
}

.back-link-wrapper:hover {
    color: var(--brand); /* Change to branding color on hover */
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    background-color: var(--white);
    font-weight: 500;
    height: 2rem; /* 32px */
    padding: 0;
    margin: 0;
}

.back-link svg {
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    fill: currentColor;
}

/* --- Project Header Styles --- */
.project-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Phone: 4 Spalten */
    gap: 2rem; /* 32px gutter */
    align-items: start; /* Richtet Bild und Text oben aus */
    margin-bottom: 1rem; /* Abstand zum Inhaltsgrid darunter */
}

.project-header-image,
.about-header-image {
    grid-column: span 4; /* Volle Breite auf Mobilgeräten */
    width: auto;
    margin-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-header-image {
    aspect-ratio: 1 / 1;
}

/* Spezifisches Seitenverhältnis für den Header auf der About-Seite */
.about-header-image {
    aspect-ratio: 3 / 2;
    margin-top: 3rem; /* 40px */
}

.project-header-image img,
.about-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Stellt sicher, dass das Bild den Container füllt */
}

/* Überschreibt die Standardgrösse des Logos, wenn es als Header-Bild verwendet wird */
.project-header-image .site-logo,
.about-header-image .site-logo {
    width: 50%;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Deaktiviert den Hover-Effekt für das Logo auf About/Detail-Headern. */
.project-header-image .site-logo .logo-animation-container .logo-animation-target,
.about-header-image .site-logo .logo-animation-container .logo-animation-target {
    pointer-events: none;
    cursor: default;
}

.project-header-text {
    grid-column: span 4; /* Volle Breite auf Mobilgeräten */
}

.project-header-text h1 {
    font-size: 2rem; /* 32px Mobile */
    line-height: 2.5rem; /* 40px */
    font-weight: 600; /* SemiBold, wie .fluid-headline */
    margin-bottom: 1rem; /* 16px Abstand zum Beschreibungstext */
}

/* --- Project Meta Toggle --- */
/* --- Project Meta Toggle & Tags --- */
.meta-toggle-button {
    scroll-margin-top: 5rem; /* Sorgt für einen angenehmen Abstand zum Rand beim Zuruückscrollen */
}

/* --- Tag Cloud & Tasks Section --- */
.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0rem;
}

.tag {
    background-color: var(--bg-tag);
    padding: 0.25rem 0.5rem; /* Standard für kurze Tags */
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--black);
}

/* Aufgabenbereich innerhalb eines Tags */
.tasks-box {
    padding: 0 0 0 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--black);
    font-weight: normal; /* Deaktiviert Fettung für den gesamten Inhalt */
    font-size: 0.875rem; /* 14px */
}

.project-context-box .tasks-box h3,
.project-context-box .tasks-box li,
.project-context-box .tasks-box .text-highlight {
    font-weight: normal;
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    color: var(--black);
}

.tasks-box h3 {
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.tasks-box .task-category:first-child h3 {
    margin-top: 0;
}

.tag-label {
    color: var(--black);
    font-weight: normal;
}

.meta-hide-button {
    margin-top: 0rem;
}

/* Versteckt den Toggle-Link, wenn die graue Box (Projektkontext) bereits sichtbar ist */
.content-wrapper:has(.project-context-box:not(.is-hidden)) .meta-toggle-button {
    display: none;
}

.meta-toggle-button:hover {
    color: var(--brand);
}

.project-context-box.is-hidden,
.project-meta.is-hidden,
.project-meta-details.is-hidden {
    display: none;
}

.project-context-box:not(.is-hidden),
.project-meta:not(.is-hidden),
.project-meta-details:not(.is-hidden) {
    animation: fadeInMeta 0.4s ease-out forwards;
}

.project-meta {
    margin-top: 1.05rem; /* Abstand zum Beschreibungstext */
}

.project-meta-details {
    margin-top: 0; /* Abstand wird nun vom .project-context-box Container gesteuert */
}

.project-context-box {
    position: relative; /* Für absolute Positionierung des Close-Buttons */
}

.close-meta-button {
    position: absolute;
    top: 0.5rem; /* Abstand vom oberen Rand */
    right: 0.5rem; /* Abstand vom rechten Rand */
    background: none;
    border: none;
    cursor: pointer;
    color: var(--black);
    padding: 0.5rem; /* Für besseres Touch-Target */
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    display: flex; /* Stellt sicher, dass das Icon zentriert wird */
    justify-content: center; /* Zentriert das Icon horizontal */
    align-items: center; /* Zentriert das Icon vertikal */
    z-index: 10; /* Stellt sicher, dass der Button über dem Inhalt liegt */
}

.close-meta-button:hover {
    color: var(--brand);
}

.close-meta-button .close-icon {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    fill: currentColor;
}

.project-meta-details h2 {
    margin: 0 0 1.5rem 0; /* Abstand zu den Metadaten darunter */
    color: var(--black);
    /* Erbt den Rest von .text-title-medium */
}

/* --- Project Content Styles --- */
.project-content-row {
    grid-column: 1 / -1; /* Spannt über alle Spalten des Haupt-Grids */
    display: grid;
    grid-template-columns: subgrid; /* Erbt die Spalten von .details-grid */
    gap: inherit; /* Erbt den Abstand von .details-grid */
    row-gap: 0;
}

.chapter-spacer {
    grid-column: 1 / -1;
    height: 4rem;
    background-color: transparent;
}

/* Wrapper für zusammenhängende Timeline-Kapitel */
.timeline-section-wrapper {
    display: grid;
    grid-template-columns: subgrid; /* Erbt die Spalten von .details-grid */
    gap: inherit;
    row-gap: 0;
    grid-column: 1 / -1;
    position: relative; /* Anker für den durchgehenden Timeline-Track */
    margin-bottom: 0;
}

.chapter-title {
    display: block;
}

.chapter-title-wrapper {
    grid-column: 1 / -1; /* Nimmt die volle Breite der Zeile ein */
    display: flex;
    align-items: stretch; /* Dehnt den Marker auf die volle Höhe */
}

/* Neuer Container für den Titel-Inhalt (mit Padding) */
.chapter-title-content {
    padding-block: var(--element-padding-block);
    display: flex;
    align-items: center;
    flex-grow: 1;
}

/* Rückwärtskompatibilität: Wenn h2 direkt im Wrapper liegt (z.B. about.html) */
.chapter-title-wrapper > h2 {
    padding-block: var(--element-padding-block);
    width: 100%;
}

.timeline-title-marker {
    width: 0.5rem; /* 8px */
    margin-right: 0.75rem; /* Abstand zum Titel */
    flex-shrink: 0;
}

.chapter-content {
    grid-column: span 4; /* Volle Breite auf Mobilgeräten */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px - Abstand zwischen Titel (h3) und dem Rest (.chapter-body) */
    padding-top: 0; /* 0px Padding oben */
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein (wichtig, wenn kein chapter-step Wrapper da ist) */
}

/* Wrapper für den Inhalt unterhalb des Titels */
.chapter-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px - Abstand zwischen den Elementen im Body (Text, Bilder, Links) */
}

/* Verringert den Abstand zwischen aufeinanderfolgenden Bildelementen im Chapter-Body */
.chapter-body > .content-image + .content-image,
.chapter-body > .image-row + .image-row,
.chapter-body > .content-image + .image-row,
.chapter-body > .image-row + .content-image {
    margin-top: -0.5rem; /* Kompensiert den 0.75rem Gap auf 0.25rem herunter */
}

/* Dasselbe Verhalten, wenn zwischen zwei Medien nur Screenreader-Text steht */
.chapter-body > .content-image + .sr-only + .content-image,
.chapter-body > .image-row + .sr-only + .image-row,
.chapter-body > .content-image + .sr-only + .image-row,
.chapter-body > .image-row + .sr-only + .content-image,
.chapter-body > .content-image + .visually-hidden + .content-image,
.chapter-body > .image-row + .visually-hidden + .image-row,
.chapter-body > .content-image + .visually-hidden + .image-row,
.chapter-body > .image-row + .visually-hidden + .content-image {
    margin-top: -0.5rem;
}

/* Zitat-Styling */
.chapter-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin: 6rem auto 2rem;
    font-style: italic;
}

.chapter-quote p {
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.3;
    margin: 0;
    max-width: 90%;
}

.chapter-quote .quote-author {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    margin-top: 0.5rem;
}

.chapter-content h3 {
    font-weight: 600; /* SemiBold */
}

.content-image img,
.content-image video,
.content-image iframe {
    width: 100%;
    height: auto !important;
    display: block;
}

.content-image iframe {
    aspect-ratio: var(--video-ratio, 16 / 9);
    border: none;
}

/* Modifier für Bilder/Videos mit feinem Rahmen (z.B. bei weissem Hintergrund) */
.content-image--border img,
.content-image--border video,
.content-image--border iframe {
    border: 1px solid var(--border-color);
}

/* Modifier für Videos mit schwarzem Hintergrund (z.B. bei abweichenden Formaten) */
.content-image--video-dark-bg {
    background-color: #000000;
}

/* Container für zwei Bilder nebeneinander */
.image-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten mit gleicher Breite */
    gap: 0.25rem; /* 4px gutter */
}

/* Modifier: Stapelt Bilder auf Tablet und kleiner (< 992px) */
.image-row--stack-tablet {
    grid-template-columns: 1fr;
    width: 75%; /* Entspricht 3 Spalten (Phone) und 6 Spalten (Tablet) */
}

/* Variante für drei Bilder nebeneinander */
.image-row.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Wrapper für die Timeline-Sektion */
.chapter-section {
    grid-column: span 4; /* Volle Breite auf Mobilgeräten */
    display: flex;
    flex-direction: column;
    position: relative; /* Positionierungskontext für den Streifen */
}

.timeline-section-wrapper .timeline-track {
    width: 0.5rem; /* 8px */
    background-image: radial-gradient(circle at center, var(--sub-black) 1px, transparent 1px);
    background-size: 2px 10px; /* 2px Breite für den Punkt, 10px Abstand im Muster */
    background-repeat: repeat-y;
    background-position: center;
    position: absolute; /* Aus dem Fluss nehmen */
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -1; /* Hinter dem Inhalt */
}

/* Wrapper für die vertikale Anordnung der Schritte */
.chapter-steps {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative; /* Damit z-index greift */
    z-index: 1; /* Vor dem Streifen */
    gap: 3rem; /* Abstand zwischen den gestapelten Sektionen */
}

/* Einzelner Schritt in der Timeline */
.chapter-step {
    display: flex;
    flex-direction: row; /* Elemente nebeneinander anordnen */
    gap: 0.75rem; /* 12px Abstand zwischen Linie und Text */
    padding: 0; /* Innenabstand entfernt */
    position: relative; /* Macht den Container zum Positionierungskontext */
    flex-grow: 1; /* Füllt den restlichen Platz im Wrapper aus */
}

.chapter-step .chapter-content {
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
}

.timeline-marker-col {
    width: 0.5rem; /* 8px */
    flex-shrink: 0; /* Verhindert, dass die Linie schrumpft */
    display: flex;
    flex-direction: column;
}

.timeline-marker-col .timeline-mask-top {
    height: 0.4375rem; /* 7px */
    width: 100%;
}

.timeline-marker-col .timeline-dot-wrapper {
    background-color: var(--white);
    padding-block: 1px; /* 1px Padding oben und unten */
    width: 0.5rem; /* 8px, Breite passend zur Linie */
}

.timeline-marker-col .timeline-dot-wrapper .timeline-dot {
    width: 0.5rem; /* 8px */
    height: 0.5rem; /* 8px */
    background-color: var(--sub-black);
    border-radius: 50%;
}

.timeline-marker-col .timeline-mask-bottom {
    width: 100%;
    flex-grow: 1; /* Füllt den restlichen vertikalen Platz */
}

/* --- Spezifische Einfärbung im Timeline-Wrapper --- */

/* 1. Erstes Title-Marker: Weiss (verdeckt die Linie von oben) */
.timeline-section-wrapper .timeline-track + .project-content-row .timeline-title-marker {
    background-color: var(--white);
}

/* 2. Erstes Mask-Top: Weiss (Start der Linie im ersten Kapitel) */
.timeline-section-wrapper .timeline-track + .project-content-row .chapter-step:first-child .timeline-mask-top {
    background-color: var(--white);
}

/* 3. Letztes Mask-Bottom: Weiss (Ende der Linie im letzten Kapitel) */
.timeline-section-wrapper .project-content-row:last-of-type .chapter-step:last-child .timeline-mask-bottom {
    background-color: var(--white);
}

/* 4. Letzter Spacer: Weiss (Abschluss der Sektion) */
.timeline-section-wrapper .project-content-row:last-of-type .chapter-spacer {
    background-color: var(--white);
}

/* --- Mobile TOC Dropdown (Sticky) --- */
.custom-dropdown {
    display: none; /* Standardmässig versteckt, wird per JS eingeblendet */
}

.custom-dropdown.visible {
    display: block;
}

.custom-dropdown .dropdown-options li a {
    text-decoration: none;
    color: var(--sub-black);
    display: block;
}

.custom-dropdown .dropdown-options li.active a {
    color: var(--brand);
    font-weight: 600;
}

/* --- Responsive Details Page Styles --- */

@media (min-width: 600px) {
    .details-grid {
        grid-template-columns: repeat(8, 1fr); /* Tablet: 8 Spalten */
        /* gap bleibt 32px */
    }
    .project-header {
        grid-template-columns: repeat(8, 1fr); /* Passt den Header an das 8-Spalten-Grid an */
    }
    .project-header-image,
    .about-header-image,
    .project-header-text {
        grid-column: span 8; /* Volle Breite auf Tablets (8 von 8) */
    }
    .about-header-image {
        margin-top: 0;
    }
    .chapter-title {
        grid-column: span 8; /* Volle Breite auf Tablets, wie auf Phone */
    }
    .chapter-content {
        grid-column: span 8; /* Volle Breite auf Tablets, wie auf Phone */
    }
    .chapter-section {
        grid-column: span 8; /* Volle Breite auf Tablets, wie auf Phone */
    }
    .project-header-text h1 {
        font-size: 2.5rem; /* 40px Tablet+ */
        line-height: 3rem; /* 48px */
    }
    .chapter-quote p {
        font-size: 2rem; /* 32px */
    }
}

@media (min-width: 992px) {
    .details-grid {
        grid-template-columns: repeat(12, 1fr); /* Laptop: 12 Spalten */
    }   
    .custom-dropdown {
        display: none !important; /* Auf Desktop immer ausblenden */
    }
    .toc-section {
        grid-column: 1 / 5; /* 1/3 der Breite (4 von 12 Spalten) */
        grid-row: 1 / span 100; /* Erstreckt sich vertikal über alle Zeilen */
        position: sticky;
        top: 4rem; /* Abstand zum oberen Rand */
        align-self: start;
        margin-bottom: 4rem;
        z-index: 10;
        margin-top: 4.625rem; /* 74px */
        width: fit-content;
        max-width: 100%;
        display: flex;
    }
    .project-header {
        grid-template-columns: repeat(12, 1fr); /* Passt den Header an das 12-Spalten-Grid an */
        margin-bottom: 4rem;
    }
    .project-header-image,
    .about-header-image,
    .project-header-text {
        grid-column: span 6; /* Halbe Breite auf Laptops/Desktops */
    }
    .project-header-text {
        margin-top: 0;
    }
    /* Wenn kein Disclaimer da ist (H1 ist erstes Element), behalten wir den ursprünglichen Abstand bei */
    .project-header-text h1:first-child {
        margin-top: 2rem;
    }
    .project-content-row {
        grid-column: 5 / -1; /* 2/3 der Breite (8 von 12 Spalten) */
    }
    .timeline-section-wrapper {
        grid-column: 5 / -1;
    }
    /* Wenn Rows im Wrapper liegen, sollen sie die volle Breite des Wrappers nutzen */
    .timeline-section-wrapper .project-content-row {
        grid-column: 1 / -1;
    }
    .timeline-section-wrapper .chapter-spacer {
        grid-column: 1 / -1;
    }
    .chapter-content {
        grid-column: 1 / -1; /* Nimmt die volle Breite des Subgrids ein */
    }
    .chapter-section {
        grid-column: 1 / -1; /* Nimmt die volle Breite des Subgrids ein */
    }
    .project-disclaimer {
        grid-column: 5 / -1; /* Desktop: Rechts neben TOC positioniert */
    }
    .image-row--stack-tablet {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

/* --- Similar Projects --- */
.similar-projects {
    padding-top: 2rem;
    padding-bottom: 0;
}

.similar-projects h4 {
    margin-bottom: 1rem;
    font-weight: 600;
}

.similar-projects-placeholder {
    min-height: 20rem; /* Reserviert Platz, damit der Footer beim Refresh nicht springt */
    width: 100%;
}

.grid-loading .project-tile {
    opacity: 0;
}

/* --- Page Load Animation --- */
/* Versteckt den Inhalt initial, solange JS noch lädt */
html.loading .site-header,
html.loading main {
    opacity: 0;
}

/* Animiert den Inhalt herein, sobald .loading entfernt wurde */
html:not(.loading) .site-header {
    animation: fadeInContent 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.1s;
}

html:not(.loading) main {
    animation: fadeInContent 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.2s;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInMeta {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Optimierung: Content nutzt die volle verfügbare Breite (kein 400px Limit) */
@media screen and (max-width: 599px) {
    .content-wrapper {
        max-width: 100%;
    }
    .custom-dropdown .dropdown-header-wrapper {
        max-width: 100%;
    }
    .custom-dropdown .dropdown-content-aligner {
        max-width: 100%;
    }
}

/* --- Lightbox Styles --- */
.lightbox {
    position: fixed;
    inset: 0;
    background-color: var(--lightbox-bg);
    z-index: 100; /* Über allem anderen */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox.visible {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto; /* Ermöglicht Scrollen wenn gezoomt */
}

.lightbox-image {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.2s ease;
    margin: auto; /* Zentriert das Bild, wenn es kleiner als der Viewport ist */
}

.lightbox-image.zoomed {
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}

.lightbox-close {
    position: absolute;
    top: 0.9375rem; /* 15px */
    left: 1.25rem; /* 20px */
    background-color: var(--white);
    border: none;
    color: var(--black);
    cursor: pointer;
    z-index: 101;
    padding: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: color 0.2s ease;
}

.lightbox-close:hover {
    color: var(--brand);
}

.lightbox-close svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
}

/* Trigger Image auf der Seite */
.lightbox-trigger {
    cursor: zoom-in;
}

/* --- Visueller Hinweis für zoombare Bilder (Lupe) --- */
/* Nutzt :has(), um den Container zu stylen, wenn das Bild die Trigger-Klasse hat */
.content-image:has(.lightbox-trigger) {
    position: relative;
    display: block;
}

.content-image:has(.lightbox-trigger)::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--sub-black);
    /* SVG Lupe mit Plus als Data-URI */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M13.0281 13.718L8.84095 9.53067C8.50762 9.80589 8.12429 10.0213 7.69095 10.1768C7.25762 10.3324 6.80934 10.4102 6.34612 10.4102C5.20668 10.4102 4.24234 10.0157 3.45312 9.22667C2.6639 8.43767 2.26929 7.47356 2.26929 6.33433C2.26929 5.19522 2.66379 4.23078 3.45279 3.441C4.24179 2.65133 5.2059 2.2565 6.34512 2.2565C7.48423 2.2565 8.44868 2.65111 9.23845 3.44033C10.0281 4.22956 10.423 5.19389 10.423 6.33333C10.423 6.80944 10.3431 7.26417 10.1833 7.6975C10.0234 8.13083 9.81012 8.50772 9.54345 8.82817L13.7306 13.0153L13.0281 13.718ZM6.34612 9.41033C7.20512 9.41033 7.93268 9.11222 8.52879 8.516C9.12501 7.91989 9.42312 7.19233 9.42312 6.33333C9.42312 5.47433 9.12501 4.74678 8.52879 4.15067C7.93268 3.55444 7.20512 3.25633 6.34612 3.25633C5.48712 3.25633 4.75956 3.55444 4.16345 4.15067C3.56723 4.74678 3.26912 5.47433 3.26912 6.33333C3.26912 7.19233 3.56723 7.91989 4.16345 8.516C4.75956 9.11222 5.48712 9.41033 6.34612 9.41033ZM5.84612 8.12817V6.83333H4.55129V5.83333H5.84612V4.5385H6.84612V5.83333H8.14095V6.83333H6.84612V8.12817H5.84612Z'/%3E%3C/svg%3E");
    background-size: 1.25rem;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0%;
    pointer-events: none; /* Klick geht durch auf das Bild */
}

/* --- Emoji Lists --- */
.text-list-emoji {
    list-style: none;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    margin-top: 0.25rem;
}

.text-list-emoji > li {
    position: relative;
    margin-bottom: 0.5rem;
}

.text-list-emoji > li::before {
    content: attr(data-emoji);
    position: absolute;
    left: -1.5rem;
    top: 0;
    width: 1.5rem;
    text-align: left;
}

/* --- Indented Lists without bullets --- */
.text-list-indented {
    list-style: none;
    padding-left: 2rem; /* Einrückung für die erste Ebene (1. 2. 3.) */
    margin-bottom: 0.75rem;
    margin-top: 0.25rem;
}

.text-list-indented.indented-level-2 {
    padding-left: 1.5rem; /* Zusätzliche Einrückung für die zweite Ebene (a. b. c.) */
}

.text-list-indented li {
    margin-bottom: 0.375rem; /* Etwas mehr Luft zwischen den Zeilen */
}

/* --- Ordered Lists (Numbered & Alphabetical) --- */
.text-list-numbered,
.text-list-alpha {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.text-list-numbered { list-style-type: decimal; }
.text-list-alpha { list-style-type: upper-alpha; }

.text-list-numbered li,
.text-list-alpha li {
    margin-bottom: 0.25rem;
}

/* Styling für die Aufgabenkategorien (z.B. "Requirements & Discovery") */
.text-meta dd dl dt {
    color: var(--black);
    font-weight: normal; /* Angepasst auf normalen Schriftgrad */
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
    margin-bottom: 0.25rem;
    padding-left: 0;
}

/* Korrektur für die Bullet-Position bei 20px Line-Height (14px Text) außerhalb der grauen Box */
.p2.text-list li::before,
.p2 .text-list li::before {
    top: 0.4375rem; /* 7px (Mitte 10px - 3px halbe Bullet-Höhe) */
}