/* ── Timeline-specific overrides & enhancements ── */
body { overflow-x: hidden; }

.history-intro {
    padding: calc(var(--nav-height) + 5rem) 5% 5rem;
    max-width: 800px;
}

.history-intro h1 {
    font-size: clamp(4rem, 10vw, 10rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 0.85;
    color: var(--text-color);
}

.history-intro p {
    margin-top: 2rem;
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.9;
    max-width: 550px;
}

/* Timeline wrapper - positions the center track */
.timeline-wrapper {
    position: relative;
    padding: 0 5% 8rem;
}

/* ── Responsive: on mobile, left-aligned single column ── */
@media (max-width: 900px) {
    .timeline-track {
        left: 2rem;
    }

    .timeline-item {
        display: block !important;
        padding-left: 4rem;
        position: relative;
        margin-bottom: 5rem;
    }

    .tl-center {
        position: absolute !important;
        left: 0 !important;
        top: 0.3rem !important;
        transform: none !important;
    }

    .tl-content {
        grid-column: 1 !important;
        text-align: left !important;
    }

    .tl-content h3,
    .tl-content p { margin-left: 0 !important; }
    .tl-empty { display: none !important; }

    .timeline-item:nth-child(odd) .tl-content,
    .timeline-item:nth-child(even) .tl-content {
        transform: translateX(-20px);
    }

    .timeline-item.in-view .tl-content {
        transform: translateX(0) !important;
    }
}

/* ── Glow pulse animation on active dot ── */
@keyframes dotPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(200,169,110,0.15),
                    0 0 20px rgba(200,169,110,0.5),
                    0 0 40px rgba(200,169,110,0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(200,169,110,0.08),
                    0 0 30px rgba(200,169,110,0.7),
                    0 0 60px rgba(200,169,110,0.25);
    }
}

.tl-dot.in-view {
    animation: dotPulse 3s ease-in-out infinite;
}

/* Connector lines between dot and content */
.tl-connector-left {
    width: 3rem;
    height: 1px;
    background: linear-gradient(to left, transparent, rgba(200,169,110,0.5));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s 0.4s ease;
}

.tl-connector-right {
    width: 3rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,169,110,0.5));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s 0.4s ease;
}

.timeline-item.in-view .tl-connector-left,
.timeline-item.in-view .tl-connector-right {
    transform: scaleX(1);
}

/* Year badge on timeline dot */
.tl-year-badge {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--gold);
    text-align: center;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}

.timeline-item.in-view .tl-year-badge {
    opacity: 1;
    transform: translateY(0);
}

/* Links in den Zeitleisten-Texten */
.tl-content a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(200,169,110,0.3);
    padding-bottom: 1px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.tl-content a:hover,
.tl-content a:focus-visible {
    color: var(--text-color);
    border-bottom-color: var(--gold);
}

/* Image in timeline item */
.tl-image {
    margin: 1.5rem 0 1.75rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-width: 380px;   /* gleiche Breite wie der Text, damit die Kanten fluchten */
}

.timeline-item:nth-child(odd) .tl-image {
    margin-left: auto;
}

.tl-image img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.4) brightness(0.75);
    transition: filter 0.5s, transform 0.5s;
}

/* Logos brauchen eine helle Fläche und bleiben unentsättigt */
.tl-image.is-logo {
    background: #fff;
    padding: 1.1rem 1.3rem;
}

.tl-image.is-logo img,
.timeline-item.in-view .tl-image.is-logo img,
.timeline-item.in-view:hover .tl-image.is-logo img {
    filter: none;
}

.timeline-item.in-view .tl-image img {
    filter: saturate(0.6) brightness(0.85);
}

.timeline-item.in-view:hover .tl-image img {
    filter: saturate(0.8) brightness(0.9);
    transform: scale(1.02);
}

/* Ambient glow behind timeline section */
.timeline-glow {
    position: fixed;
    width: 300px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(200,169,110,0.04) 0%, transparent 70%);
    pointer-events: none;
    top: 30vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

/* =========================================================
   Abspann der History-Seite
   ---------------------------------------------------------
   Gedanke: Die Zeitleiste ist Vergangenheit — datiert, gepunktet,
   belegt. Bei 2026 hört sie auf zu protokollieren und wird zum
   Strahl nach vorn. Derselbe goldene Faden, nur nicht mehr
   festgehalten, sondern in Bewegung.

   Er läuft in den Abspann hinein, trifft auf einen Punkt, läuft
   dort zu einer Horizontlinie auseinander und öffnet sich zu
   einem Schein, aus dem die Überschrift aufsteigt. Der Button
   kommt zuletzt und atmet.
========================================================= */

.history-outro {
    position: relative;
    /* sichtbar, weil der Strahl von oberhalb der Kante kommt */
    overflow: visible;
    /* oben und unten gleich viel Luft — dadurch sitzt der Text mittig
       im Block, und die Kante bleibt für die Horizontlinie frei */
    padding: 11rem 5%;
}

/* Der eigene Schein des Banners würde sich mit dem Aufblühen
   überlagern — hier übernimmt die Animation. */
.history-outro::before { display: none; }

.outro-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ── Der Strahl: Fortsetzung der Zeitleiste ─────────────── */
.outro-beam {
    position: absolute;
    top: -11rem;            /* oberhalb der Kante, im dunklen Bereich darüber */
    left: 50%;
    width: 1px;
    height: 11rem;
    transform: translateX(-50%);
    overflow: hidden;
}

.outro-beam-line {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(200, 169, 110, 0.55) 0%,
        rgba(200, 169, 110, 0.30) 55%,
        rgba(200, 169, 110, 0.12) 100%);
    transform: scaleY(0);
    transform-origin: top;
    /* Kein Übergang: die Höhe wird beim Scrollen direkt gesetzt.
       Ein Übergang würde der Bewegung sichtbar hinterherlaufen. */
}

/* Ein Lichtimpuls, der immer wieder nach unten wandert —
   die Zeitleiste läuft weiter, auch wenn nichts mehr datiert ist. */
.outro-beam-pulse {
    position: absolute;
    top: 0;
    left: -1px;
    width: 3px;
    height: 5rem;
    background: linear-gradient(to bottom,
        transparent,
        rgba(200, 169, 110, 0.9),
        transparent);
    filter: blur(1px);
    opacity: 0;
}

.is-lit .outro-beam-pulse {
    animation: outroPulse 6.5s cubic-bezier(0.45, 0, 0.25, 1) 0.4s infinite;
}

@keyframes outroPulse {
    0%        { transform: translateY(-5rem); opacity: 0; }
    12%       { opacity: 1; }
    72%       { opacity: 1; }
    100%      { transform: translateY(11rem); opacity: 0; }
}

/* ── Der Aufschlagpunkt ─────────────────────────────────── */
/* Kein Jahr mehr, sondern die Raute, die auf "About Us" für die
   Werte steht — das Zeichen des Hauses statt einer Zahl. */
.outro-mark {
    position: absolute;
    top: 0;                 /* genau auf der Kante */
    left: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    font-size: 0.8rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0;
    text-shadow: 0 0 12px rgba(200, 169, 110, 0.7);
    transition: opacity 0.55s ease,
                transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-lit .outro-mark {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0s;
    animation: outroMarkBreath 5.5s ease-in-out 1.8s infinite;
}

@keyframes outroMarkBreath {
    0%, 100% { text-shadow: 0 0 12px rgba(200, 169, 110, 0.55); }
    50%      { text-shadow: 0 0 22px rgba(200, 169, 110, 0.95); }
}

/* ── Der Horizont: der Strahl läuft auseinander ─────────── */
.outro-horizon {
    position: absolute;
    top: 0;                 /* die Kante selbst wird zur Linie */
    left: 50%;
    width: min(78vw, 940px);
    height: 1px;
    transform: translateX(-50%) scaleX(0);
    background: linear-gradient(to right,
        transparent,
        rgba(200, 169, 110, 0.06) 12%,
        rgba(200, 169, 110, 0.42) 50%,
        rgba(200, 169, 110, 0.06) 88%,
        transparent);
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-lit .outro-horizon {
    transform: translateX(-50%) scaleX(1);
    transition-delay: 0s;
}

/* ── Das Aufblühen hinter der Überschrift ───────────────── */
.outro-bloom {
    position: absolute;
    top: 50%;               /* mittig hinter Überschrift und Button */
    left: 50%;
    width: min(150vw, 1600px);
    height: 34rem;
    transform: translate(-50%, -50%) scale(0.55);
    background:
        radial-gradient(ellipse 50% 42% at 50% 50%,
            rgba(200, 169, 110, 0.15) 0%,
            rgba(200, 169, 110, 0.06) 38%,
            transparent 70%);
    opacity: 0;
    transition: opacity 1.6s ease,
                transform 1.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-lit .outro-bloom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.1s;
}

/* ── Staub im Licht ─────────────────────────────────────── */
/* Sehr zurückhaltend: 2 px, unscharf, kaum sichtbar. Es soll wie
   Atmosphäre wirken, nicht wie Konfetti. */
.outro-motes i {
    position: absolute;
    bottom: 22%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    filter: blur(0.5px);
}

.is-lit .outro-motes i {
    animation: outroDrift var(--dur, 16s) linear var(--delay, 0s) infinite;
}

@keyframes outroDrift {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    12%  { opacity: 0.5; }
    75%  { opacity: 0.28; }
    100% { transform: translateY(-15rem) translateX(var(--drift, 12px)); opacity: 0; }
}

.outro-motes i:nth-child(1) { left: 22%; --dur: 15s; --delay: 2.6s;  --drift:  14px; }
.outro-motes i:nth-child(2) { left: 31%; --dur: 19s; --delay: 5.2s;  --drift: -10px; }
.outro-motes i:nth-child(3) { left: 39%; --dur: 13s; --delay: 3.9s;  --drift:   8px; }
.outro-motes i:nth-child(4) { left: 46%; --dur: 21s; --delay: 7.4s;  --drift: -16px; }
.outro-motes i:nth-child(5) { left: 54%; --dur: 17s; --delay: 1.8s;  --drift:  11px; }
.outro-motes i:nth-child(6) { left: 61%; --dur: 14s; --delay: 6.1s;  --drift:  -9px; }
.outro-motes i:nth-child(7) { left: 69%; --dur: 20s; --delay: 4.3s;  --drift:  15px; }
.outro-motes i:nth-child(8) { left: 78%; --dur: 16s; --delay: 8.7s;  --drift: -12px; }

/* ── Überschrift: steigt hinter einer Kante hervor ──────── */
.history-outro .container { position: relative; z-index: 2; }

.history-outro h2 {
    margin-bottom: 2.5rem;
}

.outro-reveal {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;   /* Unterlängen der Kursiven nicht abschneiden */
}

.outro-reveal > span,
.outro-reveal > em {
    display: block;
    transform: translateY(115%);
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-lit .outro-reveal:nth-of-type(1) > span,
.is-lit .outro-reveal:nth-of-type(1) > em { transition-delay: 0s; transform: translateY(0); }

.is-lit .outro-reveal:nth-of-type(2) > span,
.is-lit .outro-reveal:nth-of-type(2) > em { transition-delay: 0.12s; transform: translateY(0); }

/* ── Der Button kommt zuletzt ───────────────────────────── */
.outro-action {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease,
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-lit .outro-action {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.95s;
}

.history-outro .btn-primary {
    border-color: rgba(200, 169, 110, 0.45);
    color: var(--gold);
}

.is-lit .outro-action .btn-primary {
    animation: outroButtonBreath 6s ease-in-out 2.6s infinite;
}

@keyframes outroButtonBreath {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 169, 110, 0); }
    50%      { box-shadow: 0 0 26px -6px rgba(200, 169, 110, 0.42); }
}

.history-outro .btn-primary:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg-color);
    animation: none;
    box-shadow: 0 0 34px -6px rgba(200, 169, 110, 0.55);
}

/* ── Kleine Bildschirme ─────────────────────────────────── */
@media (max-width: 900px) {
    .history-outro { padding: 7rem 5%; }
    .outro-beam    { top: -7rem; height: 7rem; left: 2rem; transform: none; }
    .outro-mark    { left: 2rem; }
    .outro-bloom   { height: 26rem; }

    @keyframes outroPulse {
        0%   { transform: translateY(-5rem); opacity: 0; }
        12%  { opacity: 1; }
        72%  { opacity: 1; }
        100% { transform: translateY(7rem); opacity: 0; }
    }
}

/* ── Reduzierte Bewegung ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .history-outro .outro-beam-line,
    .history-outro .outro-horizon,
    .history-outro .outro-reveal > span,
    .history-outro .outro-reveal > em,
    .history-outro .outro-action,
    .history-outro .outro-bloom,
    .history-outro .outro-mark {
        transition-duration: 0.01ms;
        transition-delay: 0ms;
    }

    .history-outro .outro-beam-pulse,
    .history-outro .outro-motes i,
    .history-outro .outro-mark,
    .history-outro .outro-action .btn-primary {
        animation: none;
    }

    .history-outro .outro-motes i { opacity: 0; }
}