/**
 * Block: Historie-Timeline
 *
 * Composite-Block mit Hero + Aufschlag + Epochen-Repeater. Pro Sektion
 * eine eigene SVG-Polyline, die unabhängig animiert (scroll-line.js).
 * So sieht der User die Zeichen-Animation in jeder Sektion, statt nur
 * am Anfang einer überlangen Block-weiten Linie.
 *
 * Hero-Bild ragt via --ht-hero-image-overflow (default 150px) unten in
 * den Aufschlag-Block. Stacking: Aufschlag liegt mit z:2 über Hero
 * (z:1); Aufschlag-Hintergrundfarbe wird per Gradient erst unterhalb
 * der Überlappungs-Höhe sichtbar, sodass das Bild durchscheint.
 */

.block--historie-timeline {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.block--historie-timeline.block--pad-none   { padding-block: 0; }
.block--historie-timeline.block--pad-normal { padding-block: var(--space-16) var(--space-12); }
.block--historie-timeline.block--pad-lg     { padding-block: var(--space-24); }

.block--historie-timeline.block--bg-beige       { background-color: var(--color-beige); }
.block--historie-timeline.block--bg-dunkelbeige { background-color: var(--color-dunkelbeige); }
.block--historie-timeline.block--bg-white       { background-color: var(--color-white); }

/* Sequencer übernimmt die Sektion-für-Sektion-Reihenfolge via transitionend
 * (siehe historie-timeline-line.js → startChain). Kein transition-delay
 * mehr nötig — die nächste Sektion startet direkt, sobald die vorhergehende
 * fertig gezeichnet ist. */

/* ── Slot 1: Hero ──────────────────────────── */

.historie__hero {
    position: relative;
    /* Höchste z-Ebene unter allen Sektionen. So malt das überlappende
     * Hero-Bild ÜBER dem Aufschlag und den ersten Epochen, statt unter
     * einem transparenten Aufschlag-Top zu verschwinden. Analog zum
     * content-hero (wo der ganze Block z-index:2 hat und das Bild über
     * den nächsten ACF-Block malt). */
    z-index: 3;
    overflow: visible;
    /* Kein padding-block-end — der Bottom-Spacing wandert auf den Content-
     * Wrapper (siehe @media unten). */
}

.historie__hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (min-width: 1025px) {
    .historie__hero-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
}

.historie__hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 620px;
}

.historie__hero-eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
}

.historie__hero-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--hero-heading-size);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.historie__hero-body {
    margin-top: 20px;
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

.historie__hero-body > *:first-child { margin-top: 0; }
.historie__hero-body > *:last-child  { margin-bottom: 0; }

.historie__hero-media {
    position: relative;
}

.historie__hero-image-wrap {
    margin: 0;
    overflow: hidden;
}

.historie__hero-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Desktop: Hero-SVG vertikal um die Image-Overflow-Zone + 30 px Atem
 * erweitern — sodass die Linie sichtbar mit dem Bild in den Aufschlag-
 * Block hinein ragt, statt am Hero-Block-Bottom (visuell mitten im
 * Bild) zu enden. Pattern identisch zu content-hero / profile-hero. */
@media (min-width: 1025px) {
    .block--historie-timeline .historie__hero[data-line] > .block__line-svg {
        height: calc(100% + var(--ht-hero-image-overflow, 0px) + 30px);
    }
}

/* Desktop: Bild ragt unten in den Aufschlag-Block hinein. Image-wrap
 * wird absolut positioniert, bottom-Wert negativ um Überlappungsbetrag.
 * Hero hat overflow:visible, sodass das Überstehen sichtbar bleibt.
 *
 * Content-Wrapper bekommt das Bottom-Padding (statt der Hero-Sektion
 * selbst), damit Text genug Atemraum vom nächsten Block hat — ohne dass
 * Hero-Padding die effektive Bild-Überlappung mindert. */
@media (min-width: 1025px) {
    .historie__hero-content {
        padding-bottom: var(--space-12);
    }

    .historie__hero-media {
        height: 100%;
    }

    .historie__hero-image-wrap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(-1 * var(--ht-hero-image-overflow, 0px));
    }

    .historie__hero-image {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }
}

/* Mobile: weniger Überlappung (halbierter Wert), Bild bleibt im Flow. */
@media (max-width: 1024px) {
    .historie__hero-media {
        margin-bottom: calc(-0.5 * var(--ht-hero-image-overflow, 0px));
    }
}

.historie__hero-image-placeholder {
    aspect-ratio: 4 / 3;
    width: 100%;
    background-color: var(--color-dunkelbeige);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-style: italic;
}

/* ── Slot 2: Aufschlag ─────────────────────── */

.historie__intro {
    position: relative;
    /* Niedriger als Hero (z 3), damit Hero-Bild-Überlappung sichtbar
     * ÜBER den Aufschlag malt. Content-Padding-Top schiebt den Aufschlag-
     * Text unter die Überlappungs-Zone, damit nichts überdeckt wird. */
    z-index: 1;
    padding-block-start: calc(var(--ht-hero-image-overflow, 0px) + var(--space-12));
    padding-block-end:   var(--space-12);
}

/* Aufschlag-Hintergrundfarben — solide ab Aufschlag-Oberkante. Hero-Bild
 * malt via höherem z-index ÜBER der Aufschlag-BG, kein transparenter
 * Gradient mehr nötig. */
.historie__intro--bg-beige         { background-color: var(--color-beige); }
.historie__intro--bg-dunkelbeige   { background-color: var(--color-dunkelbeige); }
.historie__intro--bg-white         { background-color: var(--color-white); }
.historie__intro--bg-navy          { background-color: var(--color-navy); }
.historie__intro--bg-rot           { background-color: var(--color-rot); }
.historie__intro--bg-electric-blue { background-color: var(--color-electric-blue); }
.historie__intro--bg-neongelb      { background-color: var(--color-neongelb); }
.historie__intro--bg-violett       { background-color: var(--color-violett); }
.historie__intro--bg-olive         { background-color: var(--color-olive); }
.historie__intro--bg-anthrazit     { background-color: var(--color-anthrazit); }
.historie__intro--bg-black         { background-color: var(--color-black); }

/* Helle Schrift auf dunklen Hintergründen. Neongelb und Beige/Weiß bleiben
 * beim Default (anthrazit) — die haben genug Kontrast für dunklen Text. */
.historie__intro--bg-navy          .historie__intro-eyebrow,
.historie__intro--bg-navy          .historie__intro-heading,
.historie__intro--bg-navy          .historie__intro-body,
.historie__intro--bg-rot           .historie__intro-eyebrow,
.historie__intro--bg-rot           .historie__intro-heading,
.historie__intro--bg-rot           .historie__intro-body,
.historie__intro--bg-violett       .historie__intro-eyebrow,
.historie__intro--bg-violett       .historie__intro-heading,
.historie__intro--bg-violett       .historie__intro-body,
.historie__intro--bg-olive         .historie__intro-eyebrow,
.historie__intro--bg-olive         .historie__intro-heading,
.historie__intro--bg-olive         .historie__intro-body,
.historie__intro--bg-anthrazit     .historie__intro-eyebrow,
.historie__intro--bg-anthrazit     .historie__intro-heading,
.historie__intro--bg-anthrazit     .historie__intro-body,
.historie__intro--bg-black         .historie__intro-eyebrow,
.historie__intro--bg-black         .historie__intro-heading,
.historie__intro--bg-black         .historie__intro-body {
    color: var(--color-white);
}

.historie__intro-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
    /* Keine Einrückung mehr — die Linie läuft im Aufschlag am rechten
     * Block-Rand runter und am Boden zurück nach links, also auf der
     * anderen Seite des Contents. */
}

@media (min-width: 1025px) {
    .historie__intro-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
}

.historie__intro-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 580px;
}

.historie__intro-eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
}

.historie__intro-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-text);
}

.historie__intro-body {
    margin-top: 16px;
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

.historie__intro-body > *:first-child { margin-top: 0; }
.historie__intro-body > *:last-child  { margin-bottom: 0; }

.historie__intro-image-wrap {
    margin: 0;
    overflow: hidden;
}

.historie__intro-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ── Slot 3: Epochen ───────────────────────── */

.historie__eras {
    position: relative;
    display: flex;
    flex-direction: column;
}

.historie__era {
    position: relative;
    /* Eigener Stack-Context — pro Era ein SVG für die Linie, das aus
     * dem Era heraus nicht clipped wird (overflow: visible). */
    overflow: visible;
    min-height: 480px;
    display: flex;
    align-items: center;
    color: var(--color-white);
    padding-block: var(--space-16);
}

.historie__era + .historie__era {
    margin-top: 0;
}

/* BG-Medium als absoluter Hintergrund — Era selbst bleibt im Flow.
 * Trägt Bild, Video oder YouTube/Vimeo-Embed; jeweils cover-cropped. */
.historie__era-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.historie__era-bg-media,
.historie__era-bg-embed > iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

.historie__era-bg-embed {
    width: 100%;
    height: 100%;
}

/* Iframes ignorieren object-fit — wir blasen sie groß auf, sodass
 * die Bildmitte sichtbar bleibt (typisches YouTube-Bild-im-iframe-
 * Center-Crop). */
.historie__era-bg-embed > iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Mind. 16:9 vom Container — egal welches Format der Container hat */
    width: max(100%, calc(100vh * 16 / 9));
    height: max(100%, calc(100vw * 9 / 16));
    pointer-events: none;
}

/* Overlay: Farbe per Era überschreibbar via --ht-era-overlay-color
 * (Inline-Style auf .historie__era). Default = Violett. */
.historie__era-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--ht-era-overlay-color, var(--color-violett));
    opacity: var(--ht-overlay-opacity, 0.75);
    mix-blend-mode: multiply;
}

.historie__era-inner {
    position: relative;
    /* z 3 > SVG z 2 (scroll-line.css) — Text/Buttons rendern über der Linie. */
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 1025px) {
    .historie__era-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
}

.historie__era-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Innenabstand links, damit die Linie (sitzt am Container-Rand) nicht
     * gegen die Schrift drückt. Auf Mobile bleibt es bei kleinerem Abstand. */
    padding-inline-start: var(--space-8);
}

@media (max-width: 768px) {
    .historie__era-content {
        padding-inline-start: var(--space-6);
    }
}

/* Text-Position auf Desktop: 50 % links oder 50 % rechts. Auf Tablet/Mobile
 * füllt der Content den ganzen Container (Grid kollabiert zu 1fr). */
@media (min-width: 1025px) {
    .historie__era--align-left  .historie__era-content { grid-column: 1; }
    .historie__era--align-right .historie__era-content { grid-column: 2; }
}

.historie__era-date {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    color: var(--color-white);
}

.historie__era-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-white);
}

.historie__era-body {
    margin-top: var(--space-2);
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--color-white);
}

.historie__era-body > *:first-child { margin-top: 0; }
.historie__era-body > *:last-child  { margin-bottom: 0; }

.historie__era-body a {
    color: var(--color-neongelb);
}

.historie__era-more {
    align-self: flex-start;
    margin-top: var(--space-4);
}

/* ── Modal-System ──────────────────────────── */

.historie__modals {
    /* Ausgangs-Wrapper hat keine eigene Darstellung */
}

.historie__modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.historie__modal.is-open {
    display: flex;
}

.historie__modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--overlay-navy-dark);
    cursor: pointer;
}

.historie__modal-dialog {
    position: relative;
    z-index: 1;
    background-color: var(--color-beige);
    color: var(--color-text);
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--space-12);
    border-radius: 4px;
    box-shadow: 0 24px 64px rgb(var(--color-navy-dark-rgb) / 0.35);
}

.historie__modal-close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    color: var(--color-text);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.historie__modal-close:hover,
.historie__modal-close:focus-visible {
    color: var(--color-navy);
    outline: none;
}

.historie__modal-date {
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    color: var(--color-navy);
    text-transform: uppercase;
}

.historie__modal-title {
    margin: 0 0 var(--space-6) 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-text);
}

.historie__modal-body {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

.historie__modal-body > *:first-child { margin-top: 0; }
.historie__modal-body > *:last-child  { margin-bottom: 0; }

.historie__modal-body p + p {
    margin-top: var(--space-4);
}

body.has-historie-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .historie__modal,
    .historie__modal-dialog {
        transition: none !important;
    }
}

/* ── Mobile-Anpassungen ────────────────────── */

@media (max-width: 1024px) {
    .historie__era {
        min-height: 360px;
        padding-block: var(--space-12);
    }

    /* Linie sitzt im Mobile-/Tablet-Layout 24 px vom rechten Block-Rand
     * (siehe historie-timeline-line.js, MOBILE_RIGHT_PADDING_PX). Damit
     * der Text nicht in die Linie reinläuft, bekommen alle Text-Wrapper
     * rechts ~24 px zusätzlichen Schutz — ergibt zusammen mit dem Linien-
     * Offset ~50 px Atem zwischen Text-Rechtskante und Strich. */
    .historie__hero-content,
    .historie__intro-content,
    .historie__era-content {
        padding-right: var(--space-12);
    }
}

@media (max-width: 768px) {
    .historie__hero-content,
    .historie__intro-content {
        max-width: 100%;
    }

    .historie__era {
        min-height: 320px;
        padding-block: var(--space-8);
    }

    .historie__modal-dialog {
        padding: var(--space-8);
    }

    .historie__modal-title {
        font-size: var(--text-2xl);
    }
}