/* ──────────────────────────────────────────────────────────────
   DS Lebenslauf – Timeline
   ────────────────────────────────────────────────────────────── */

:root {
    --color-red-400: #393939;
    --color-red-300: #59353b;
    --color-red-200: #802b36;
    --color-red-100: #ae1928;
    --color-red: #e3000f;
    --color-red--100: #ff2020;
    --color-red--200: #ff4040;
    --color-red--300: #ff6060;
    --color-red--400: #ff8080;

    --color-yellow-muted: #802b36;
    --color-blue-muted: #345995;
    --color-orange-muted: #c16200;
    --color-green-muted: #5b8c5a;
    --color-pink-muted: #f49fbc;

    --color-bg-light: #ffe3dc;
    --color-bg-dark: #121113;

    --color-blue-active: #0c6291;
    --color-orange-active: #f79824;
    --color-green-active: #688e26;
    --color-violet-active: #550527;
    --color-violet-active-dark: #59344f;

    --color-white: #ffffff;

    --color-black-transparent: #00000026;

    /* ── Fluid Type Base — einzige Quelle der Wahrheit ────────
          16 px @ ≤ 320 px (mobile min)
          24 px @ 768 px   (tablet, exakt: 12.8 + 1.46 × 7.68 = 24.0)
          32 px @ ≥ 2560 px (ultra-wide max)
       ─────────────────────────────────────────────────────────── */
    --font-size-base: clamp(16px, 12.8px + 1.46vw, 32px);

    /* Colors */
    --pr-color-brand-primary: #fe3000;
    --pr-color-white: #ffffff;
    --pr-color-black: #1a1a1a;
    --pr-color-gray-100: #f4f4f4;
    --pr-color-gray-800: #333333;

    /*
       10% shades of --pr-color-gray-800
   */

    --pr-color-gray-800-shade-100: #2e2e2e;
    --pr-color-gray-800-shade-200: #292929;
    --pr-color-gray-800-shade-300: #242424;
    --pr-color-gray-800-shade-400: #1f1f1f;
    --pr-color-gray-800-shade-500: #1a1a1a;
    --pr-color-gray-800-shade-600: #141414;
    --pr-color-gray-800-shade-700: #0f0f0f;
    --pr-color-gray-800-shade-800: #0a0a0a;
    --pr-color-gray-800-shade-900: #050505;

    /*
       10% tints of --pr-color-gray-800
   */
    --pr-color-gray-800-tint-100: #474747;
    --pr-color-gray-800-tint-200: #5c5c5c;
    --pr-color-gray-800-tint-300: #707070;
    --pr-color-gray-800-tint-400: #858585;
    --pr-color-gray-800-tint-500: #999999;
    --pr-color-gray-800-tint-600: #adadad;
    --pr-color-gray-800-tint-700: #c2c2c2;
    --pr-color-gray-800-tint-800: #d6d6d6;
    --pr-color-gray-800-tint-900: #ebebeb;

    --footer-bg-color: var(--pr-color-gray-800-shade-700);
    --footer-title-color: var(--pr-color-gray-800-tint-700);
    --footer-title-border-color: var(--pr-color-gray-800-tint-200);
    --footer-link-color-muted: var(--pr-color-gray-800-tint-400);
    --footer-link-color-hovered: var(--pr-color-gray-800-tint-900);
    --footer-link-bg-color-hovered: var(--pr-color-gray-800-tint-100);
    --footer-link-border-color: var(--pr-color-gray-800-tint-100);

    /* ── Type Scale — Major Third (×1.25) ─────────────────────
          Alle Größen leiten sich von --font-size-base ab.
          calc() mit unitlosem --scale-factor ist valides CSS:
            length ÷ number = length  ✓
            length × number = length  ✓

          @ 768 px (Tablet):
            hero  = 24 × 1.25²  = 37.5 px
            l     = 24 × 1.25   = 30.0 px
            m     = 24           = 24.0 px
            s     = 24 ÷ 1.25   = 19.2 px
       ─────────────────────────────────────────────────────────── */
    --scale-factor: 1.68;

    --pr-font-size-s: calc(var(--font-size-base) / var(--scale-factor));
    --pr-font-size-m: var(--font-size-base);
    --pr-font-size-l: calc(var(--font-size-base) * var(--scale-factor));
    --pr-font-size-hero: calc(
        var(--font-size-base) * var(--scale-factor) * var(--scale-factor)
    );

    /* Border Radius */
    --pr-radius-base: 0.25vw;
    --border-radius: 0;

    /* Spacing Scale (rem = --font-size-base, da html { font-size: var(--font-size-base) }) */
    --pr-spacing-1: 0.25rem;
    --pr-spacing-2: 0.5rem;
    --pr-spacing-3: 1rem;
    --pr-spacing-4: 2rem;
    --pr-spacing-5: 4rem;

    /* Brand Semantics */
    --color-brand-primary: var(--pr-color-brand-primary);
    --color-brand-accent: var(--pr-color-black);

    /* ── Kategorie-Farben ──────────────────────────────────────
          Palette abgeleitet von --color-brand-primary (#fe3000)
          Warm-analog: David → Themen → Bundestag
          Komplementär-kühl: Wahlkreis → Service
       ────────────────────────────────────────────────────────── */

    /* David (Lebenslauf, Transparenz) — Tiefrot */
    --color-cat-david: #c1121f;
    --color-cat-david-fg: #ffffff;

    /* Themen (Medien, Kultur, Frieden) — Amber-Orange */
    --color-cat-themen: #f4831f;
    --color-cat-themen-fg: #1a1a1a;

    /* Bundestag (Funktionen, Reden, Besuchergruppen) — Goldgelb */
    --color-cat-bundestag: #e9c46a;
    --color-cat-bundestag-fg: #1a1a1a;

    /* Wahlkreis — Waldgrün */
    --color-cat-wahlkreis: #2a7d5f;
    --color-cat-wahlkreis-fg: #ffffff;

    /* Service (Pressefotos, Presseerklärungen, Team) — Marineblau */
    --color-cat-service: #1b4f8a;
    --color-cat-service-fg: #ffffff;

    /* Functional UI Colors */
    --color-text-main: var(--pr-color-gray-800);
    --color-text-inverse: var(--pr-color-white);
    --color-bg-surface: var(--pr-color-white);
    --color-bg-muted: var(--pr-color-gray-100);

    /* Layout Semantics (Spacings) */
    --space-container-padding: var(--pr-spacing-4);
    --space-element-gap: var(--pr-spacing-2);
    --space-stack-small: var(--pr-spacing-1);
    --space-stack-medium: var(--pr-spacing-3);
    --space-section-margin: var(--pr-spacing-5);
    --space-p-width: calc(var(--pr-font-size-m) * 40);

    /* ── Typography Semantics ──────────────────────────────────
          Primitive → Semantisch (4 Stufen)
       ─────────────────────────────────────────────────────────── */
    --font-size-caption: var(--pr-font-size-s); /* klein   */
    --font-size-body: var(--pr-font-size-m); /* normal  */
    --font-size-heading: var(--pr-font-size-l); /* groß    */
    --font-size-hero: var(--pr-font-size-hero); /* hero    */

    /* Shape Semantics */
    --radius-button: var(--border-radius);
    --radius-card: var(--border-radius);
    /* --border-radius war hier zirkulär auf sich selbst definiert. Das
       machte das Token ungültig, wodurch jedes var(--border-radius) auf
       den Initialwert fiel. Der Wert 0 steht bereits weiter oben. */

    /* Breakpoint Primitives */
    --bp-mobile-max: 767px;
    --bp-tablet-min: 768px;
    --bp-desktop-min: 1440px;
    --bp-ultra-min: 1920px;

    /* Typography Semantics (Erweiterung) */
    --letter-spacing-heading: 0.04em; /* Entspricht 4% */
}

.ds-timeline {
    /* Kantenlänge des Jahres-Quadrats. Es sitzt mit seinem Mittelpunkt auf
       der unteren äußeren Card-Ecke, ragt also mit der Hälfte in die Card
       hinein — daraus leitet sich die nötige Freifläche unten ab. */
    --ds-cv-year-size: var(--space-section-margin);
    --ds-cv-year-overlap: calc(var(--ds-cv-year-size) / 2);

    /* Sichtbarer Abstand zwischen zwei Cards derselben Spalte — also der
       Klarabstand zusätzlich zum Überstand des Jahres-Quadrats. */
    --ds-cv-card-gap: var(--space-stack-medium);

    /* Versatz, mit dem die rechte Spalte gegenüber der linken startet. */
    --ds-cv-stagger: var(--space-container-padding);

    /* Mindestversatz zwischen zwei chronologisch aufeinanderfolgenden
       Einträgen. Ohne ihn laufen die Spalten unterschiedlich schnell und
       ein späterer Eintrag kann optisch oberhalb eines früheren landen.
       Überlappung bleibt erlaubt — nur der Startpunkt rückt nach unten. */
    --ds-cv-min-step: var(--space-container-padding);

    /* Marker: gleiche Farbfamilie, je Spalte eine andere Abstufung, damit
       erkennbar ist, welcher Punkt zu welcher Seite gehört. */
    --ds-cv-marker-left: var(--color-violet-active);
    --ds-cv-marker-right: color-mix(
        in srgb,
        var(--color-violet-active) 60%,
        var(--color-white)
    );

    /* Höhe einer Grid-Zeile im Masonry-Modus. Je kleiner, desto feiner
       lassen sich Card-Höhen abbilden — 4px ist ein guter Kompromiss
       zwischen Genauigkeit und Anzahl impliziter Zeilen. */
    --ds-cv-row-unit: 4px;

    position: relative;
    padding-bottom: 2rem;
}

.ds-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: currentColor;
    opacity: 0.15;
    transform: translateX(-50%);
}

.ds-timeline__item {
    display: flex;
    align-items: flex-start;
    /* Abstand zur nächsten Card, zweiteilig:

       1. --ds-cv-year-size * 0.5 — das Jahres-Quadrat sitzt mit bottom: 0
          plus translateY(50%) an der Card und ragt daher mit genau seiner
          halben Höhe darunter hinaus. Dieser Teil wird nur überdeckt, er
          erzeugt keinen sichtbaren Abstand.
       2. --ds-cv-card-gap — der tatsächlich sichtbare Klarabstand zwischen
          dem Quadrat und der nächsten Card.

       Nur Teil 1 allein hieße: Quadrat-Unterkante trifft exakt auf die
       Oberkante der nächsten Card, der Abstand wäre also null.

       Das ist zugleich die einzige Quelle für den vertikalen Abstand: das
       Grid unten setzt row-gap: 0, und ds-lebenslauf.js liest diesen Wert
       per getComputedStyle aus, statt ihn nochmal zu kennen. */
    margin-bottom: calc(var(--ds-cv-year-size) * 0.5 + var(--ds-cv-card-gap));
    position: relative;
    width: 50%;
}

.ds-timeline__item--left {
    padding-right: 3rem;
    margin-left: 0;
}

.ds-timeline__item--right {
    padding-left: 3rem;
    margin-left: 50%;
}

/* ── Marker: Kugel in --color-violet-active, Mitte auf Mittellinie ── */
.ds-timeline__marker {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--ds-cv-marker-left, #7c3aed);
}

/* Jeder zweite Punkt gehört zur rechten Spalte und bekommt die hellere
   Abstufung — so ist auf der Achse ablesbar, zu welcher Seite er zeigt. */
.ds-timeline__item--right .ds-timeline__marker {
    background: var(--ds-cv-marker-right, #9c6b8f);
}

/* left-Item endet an der Mittellinie → left: 100% ist genau die Mittellinie */
.ds-timeline__item--left .ds-timeline__marker {
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* right-Item beginnt an der Mittellinie → left: 0 ist genau die Mittellinie */
.ds-timeline__item--right .ds-timeline__marker {
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* ── Card ── */
.ds-timeline__content {
    flex: 1;
    min-width: 0;
    position: relative;
    background: var(--color-black-transparent, rgba(0, 0, 0, 0.07));
    border-radius: var(--border-radius);
    /* Knapper Innenabstand rundum. Unten so viel, dass .ds-timeline__year
       den Text nicht überdeckt: das Quadrat ragt --ds-cv-year-overlap weit
       in die Card, plus etwas Luft. Damit ist die Freihaltung an die
       Quadratgröße gekoppelt — ändert man --ds-cv-year-size, stimmt das
       Padding automatisch mit. */
    padding: var(--space-stack-medium);
    padding-bottom: calc(var(--ds-cv-year-overlap) + var(--space-stack-small));
    /* Jahres-Quadrat darf aus der Card herausragen */
    overflow: visible;
}

/* Das Theme gibt Überschriften in .page__body ein margin-top mit
   (.page__body h3 { margin-top: var(--space-stack-medium) }). Ohne Bild ist
   der Titel das erste Element und bekommt diesen Abstand zusätzlich zum
   Card-Padding — mit Bild nicht. Dadurch saßen Cards ohne Bild tiefer.
   Hier wird der Abstand nach oben für das erste Element neutralisiert,
   sodass Bild und Text den identischen Rand zur Card-Kante haben. */
.ds-timeline__content > :first-child {
    margin-top: 0;
}

/* Das Theme gibt Absätzen in .page__body ein margin-bottom von
   calc(2rem * 1.68) ≈ 3.4rem mit — für Prosa in voller Lesebreite gedacht,
   in einer Card viel zu viel. Hier reicht ein Zeilenabstand: 1.25em
   entspricht exakt der line-height des Fließtexts unten.

   :not(:last-child) statt "> *", weil die Theme-Regel .page__body p die
   Spezifität (0,1,1) hat. Ein einfaches .ds-timeline__text > * käme nur auf
   (0,1,0) und würde verlieren; mit der Pseudoklasse sind es (0,2,0). */
.ds-timeline__text > :not(:last-child) {
    margin-bottom: 1.25em;
}

/* Kein Leerfeld unter dem letzten Absatz — sonst steht es über dem
   ohnehin schon für das Jahres-Quadrat freigehaltenen Bereich. */
.ds-timeline__text > :last-child {
    margin-bottom: 0;
}

/* ── Jahreszahl: Quadrat, Mittelpunkt = untere außenliegende Ecke ── */
.ds-timeline__year {
    position: absolute;
    bottom: 0;
    width: var(--ds-cv-year-size);
    height: var(--ds-cv-year-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-primary, #e3000f);
    color: #fff;
    /* war var(--pr-fontsize-medium) — dieses Token existiert nicht, die
       Deklaration war damit ungültig und die Größe wurde geerbt.
       --font-size-body entspricht genau dem bisherigen Ergebnis. */
    font-size: var(--font-size-body);
    font-weight: 900;
    line-height: 1;
    font-family: var(--font-family-heading, system-ui);
}

/* --left: Card ist links, Außenseite = links → untere linke Ecke */
.ds-timeline__item--left .ds-timeline__year {
    left: 0;
    transform: translate(-50%, 50%);
}

/* --right: Card ist rechts, Außenseite = rechts → untere rechte Ecke */
.ds-timeline__item--right .ds-timeline__year {
    right: 0;
    transform: translate(50%, 50%);
}

.ds-timeline__img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
    margin-bottom: 1rem;
}

.ds-timeline__title {
    padding-bottom: 1rem;
    font-size: 0.85rem !important;
}

.ds-timeline__text ul,
.ds-timeline__text > * {
    font-size: 0.75rem !important;
    line-height: 1.25;
}

/* ── Zwei verzahnte Spalten ab Tablet ───────────────────────────
   Bisher waren die Items normale Blöcke mit width: 50% — dadurch begann
   das rechte Item erst unterhalb des linken. Als Grid mit zwei Spalten
   teilen sich linkes und rechtes Item eine Zeile und stehen nebeneinander.

   Die Auto-Placement-Regeln setzen Item 1 auf Zeile 1/Spalte 1 und Item 2
   auf Zeile 1/Spalte 2; erst Item 3 rückt in Zeile 2. Zeilenhöhe = höheres
   der beiden Items, die Höhen bleiben also inhaltsabhängig und die
   DOM-Reihenfolge bleibt chronologisch (wichtig für Screenreader).

   align-items: start hält die Item-Höhe bei der Card-Höhe. Ohne das würde
   das Item auf die volle Zeilenhöhe gestreckt und der Marker (top: 50%)
   säße in der Zeilenmitte statt mittig an seiner Card.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 681px) {
    .ds-timeline {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        /* Kein row-gap: der vertikale Abstand kommt aus margin-bottom der
           Items. Sonst gäbe es zwei Quellen, die sich addieren. */
        row-gap: 0;
    }

    /* width und margin-left übernimmt das Grid — die alten Flow-Werte
       müssen hier zurückgesetzt werden. margin-bottom bleibt bewusst
       stehen, es trägt den Abstand zwischen den Cards. */
    .ds-timeline__item {
        width: auto;
        margin-left: 0;
    }

    .ds-timeline__item--left {
        grid-column: 1;
    }

    .ds-timeline__item--right {
        grid-column: 2;
        /* Kein Gleichstand mit dem linken Item, sondern etwas Versatz */
        margin-top: var(--ds-cv-stagger);
    }

    /* ── Masonry: Spalten laufen unabhängig ─────────────────────
       Ohne JS bleibt es beim Zeilen-Grid oben: linkes und rechtes Item
       teilen sich eine Zeile, deren Höhe die höhere Card bestimmt. Ist
       eine Card sehr kurz, entsteht darunter ein großes Loch, weil die
       nächste Card derselben Spalte auf das Zeilenende warten muss.

       Grid kann Zeilen nicht entkoppeln und Floats erzwingen ebenfalls
       monoton steigende Oberkanten — deshalb setzt ds-lebenslauf.js für
       jedes Item eine explizite grid-row und führt dabei je Spalte einen
       eigenen Cursor. Die Zeilen werden dafür auf --ds-cv-row-unit
       verfeinert; Abstand und Versatz übernimmt dann das Script.
       ────────────────────────────────────────────────────────── */
    .ds-timeline.is-masonry {
        grid-auto-rows: var(--ds-cv-row-unit);
    }

    /* Im Masonry-Modus erzeugt das Script den Spaltenversatz selbst, damit
       gemessene und gesetzte Positionen im selben Bezugssystem liegen. */
    .ds-timeline.is-masonry .ds-timeline__item--right {
        margin-top: 0;
    }
}

/* ── Mobile ── */
@media (max-width: 680px) {
    .ds-timeline::before {
        left: 1.25rem;
    }

    .ds-timeline__item,
    .ds-timeline__item--right {
        width: 100%;
        margin-left: 0;
        padding-left: 5rem;
        padding-right: 0;
    }

    /* Mittellinie ist bei 1.25rem → Kugel-Mitte muss dort sitzen:
       left: 0.75rem + 0.5rem (halbe Kugelbreite) = 1.25rem              */
    .ds-timeline__item--left .ds-timeline__marker,
    .ds-timeline__item--right .ds-timeline__marker {
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Mobile: innere Seite = links (Mittellinie ist links) */
    .ds-timeline__item--left .ds-timeline__year,
    .ds-timeline__item--right .ds-timeline__year {
        left: 0;
        right: auto;
        transform: translate(-50%, 50%);
    }
}

/* Der frühere Block hier hatte einen Tippfehler in der Bedingung
   ("min-wdith") und war damit wirkungslos. Sein Zweck — margin-bottom: 0
   auf großen Screens — erledigt jetzt das row-gap des Grids oben. */