/* ──────────────────────────────────────────────────────────────
   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: var(--border-radius);

    /* 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 {
    position: relative;
    padding: 2rem 0;
}

.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;
    margin-bottom: 4rem;
    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(--color-violet-active, #7c3aed);
}

/* 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);
    padding: calc(var(--space-container-padding) / 2)
        calc(var(--space-container-padding) * 2);
    /* Jahres-Quadrat darf aus der Card herausragen */
    overflow: visible;
}

/* ── Jahreszahl: Quadrat, Mittelpunkt = untere innenliegende Ecke ── */
.ds-timeline__year {
    position: absolute;
    bottom: 0;
    width: var(--space-section-margin);
    height: var(--space-section-margin);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-primary, #e3000f);
    color: #fff;
    font-size: var(--pr-fontsize-medium);
    font-weight: 900;
    line-height: 1;
    font-family: var(--font-family-heading, system-ui);
}

/* --left: Card ist links, innere Seite = rechts → untere rechte Ecke */
.ds-timeline__item--left .ds-timeline__year {
    left: 0;
    transform: translate(-50%, 50%);
}

/* --right: Card ist rechts, innere Seite = links → untere linke 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;
}

/* ── 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%);
    }
}

@media (min-wdith: 1440px) {
    .ds-timeline__item {
        margin-bottom: 0;
    }
}