/* Referenzen – Seitenstyles (Split + Filter) */
/* -------------------------------------------------------------------------- */
/* SPLIT SCREEN LAYOUT */
/* -------------------------------------------------------------------------- */
.split-layout {
    display: flex; width: 100%; min-height: 100vh;
}
 .split-visual {
    width: 50%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1;
    background-color: #f0f0f0; overflow: hidden;
}
.split-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 10s ease; }
.split-visual:hover img { transform: scale(1.02); }
 .split-content {
    width: 50%; margin-left: 50%; background-color: var(--surface);
    padding: 140px 4rem 4rem 4rem; min-height: 100vh; position: relative; z-index: 2;
}
.content-constraint { width: 100%; max-width: 800px; margin-right: auto; }

/* TYPO (Team Style) */
h1.page-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.lead-text {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: var(--ink);
    margin-bottom: 3rem;
    font-weight: 400;
    max-width: 600px;
}
 /* -------------------------------------------------------------------------- */
/* FILTER & LIST STYLES */
/* -------------------------------------------------------------------------- */
.filter-container {
    position: sticky; top: 100px; z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    margin-bottom: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex; gap: 1rem;
}
 .filter-btn {
    background: none; border: none; font-family: inherit;
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--muted); cursor: pointer; padding: 0.5rem 0;
    transition: all 0.2s ease; position: relative;
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.active { color: var(--ink); font-weight: 600; }
.filter-btn.active::after {
    content: ''; position: absolute; bottom: -1rem; left: 0; right: 0;
    height: 2px; background: var(--ink);
}

/* New Grouped List Styles */
.ref-list {
    opacity: 1; transition: opacity 0.3s ease;
}
.ref-list.fading { opacity: 0; }
 .year-block {
    display: grid;
    grid-template-columns: 80px 1fr; /* Links Jahr, rechts Inhalt */
    gap: 1.5rem;
    margin-bottom: 3rem; /* Abstand zwischen Jahren */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Optional: feine Linie unter jedem Jahr */
    padding-bottom: 3rem;
}
 .year-block-top {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 3rem; /* Abstand zwischen Jahren */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Optional: feine Linie unter jedem Jahr */
    padding-bottom: 3rem;
}

.year-block:last-child { border-bottom: none; }
 .year-title {
    font-size: 0.9rem; color: var(--muted); 
    font-feature-settings: "tnum"; 
    font-weight: 600; /* Etwas stärker als "Team" <p>, um Struktur zu geben */
    position: static;
}
h4 {
    position: static;
	margin:0;
}


 .year-items {
    display: flex; flex-direction: column; gap: 0.5rem;
}
 .ref-row {
    display: block;
    font-size: 1rem; /* Base size like Team text */
    color: var(--muted); /* Team <p> Style */
    line-height: 1.6;
}

/* Titel etwas hervorheben, aber im "Fließtext"-Stil bleiben */
.ref-title {
    color: var(--ink); /* Wie Team-Namen oder starker Text */
    font-weight: 400; 
}

.ref-loc {
    color: var(--muted);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .split-content { padding-left: 3rem; padding-right: 3rem; }
}
@media (max-width: 900px) {
    .split-layout { flex-direction: column; }
    .split-visual { position: relative; width: 100%; height: 35vh; z-index: 1; }
    .split-content { width: 100%; margin-left: 0; padding: 3rem 2rem 4rem 2rem; min-height: auto; }
    .filter-container { top: 70px; }
    
    .year-block {
        grid-template-columns: 1fr; gap: 0.5rem;
        padding-bottom: 2rem; margin-bottom: 2rem;
    }
    .year-title { position: static; margin-bottom: 0.5rem; }
}

/* -------------------------------------------------------------------------- */
/* FIX: Seiten ohne Intro-Animation */
/* -------------------------------------------------------------------------- */
.content-constraint > *{
  opacity: 1 !important;
  transform: none !important;
}


p { margin-bottom: 1.5rem; color: var(--muted);  }

/* -------------------------------------------------------------------------- */
/* Jahres-Überschriften nicht sticky (global)                                  */
/* -------------------------------------------------------------------------- */
.year-title,
.year-block h4{
  position: static !important;
  top: auto !important;
}