/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   Zwei feste Vorlagen: das Desktop-Layout (≥1440px, steht in den
   Sektions-Dateien) und das Mobil-Layout (≤599px, hier unten).
   Dazwischen wird interpoliert.

   Breakpoints
     1439px  Laptop        Typo und Abstände ziehen an
     1199px  kleiner Laptop / Tablet quer
      991px  Tablet hoch   zweispaltige Layouts brechen um
      767px  Phablet       Umstieg auf das Mobil-Layout
      599px  Smartphone    Ziel-Viewport 393px, 1:1 zum Figma
      419px  kleines Phone

   Prinzip: Ein Breakpoint überschreibt zuerst die Tokens aus
   tokens.css und danach nur, was sich strukturell ändert.
   ============================================================ */


/* ============================================================
   ≤ 1439px — Laptop
   ============================================================ */
@media (max-width: 1439px) {
  :root {
    /* Typo */
    --fs-display: 88px;
    --lh-display: 1.09;
    --fs-h3: 40px;
    --fs-h4: 30px;
    --lh-h4: 38px;
    --fs-num: 80px;
    --fs-lead: 22px;
    --lh-lead: 30px;
    --fs-countdown: 44px;
    --fs-countdown-title: 34px;

    /* Raster */
    --section-py: 100px;
    /* Rückfall — countdown.js misst den Halbwert zur Laufzeit nach. */
    --countdown-overlap: 88px;

    /* Nav */
    --nav-py: 16px;
    --nav-py-sm: 12px;
    --nav-logo-h: 104px;
    --nav-logo-h-sm: 80px;
    --nav-talents-w: 140px;
    --nav-talents-w-sm: 108px;
    --nav-divider-h: 84px;
    --nav-divider-h-sm: 64px;
    --nav-h: 136px;

    /* Karten-Stapel und Zeitstrahl */
    --stack-top: 100px;
    --step-gap: 96px;
    --pathcard-media: 44%;

    /* Bild- und Aufzählungsspalte ziehen gemeinsam an */
    --about-media: 44%;

    /* Spalte, die das Phone rechts im Hero belegt: seine Breite
       (540px Höhe → 385px) plus 32px Luft. Die Textblöcke darunter
       laufen nie in diese Spalte hinein. */
    --hero-reserve: 417px;
  }

  .hero__visual {
    right: var(--container-px);
    bottom: -150px;
  }

  .hero__phone {
    height: 540px;
  }

  /* Formular und Aufzählung enden vor dem Phone. Solange genug
     Platz ist, bleiben ihre Desktop-Breiten stehen — die Grenze
     greift erst, wenn es sonst zur Überdeckung käme. */
  .hero__form {
    max-width: min(750px, calc(100% - var(--hero-reserve)));
  }

  .features {
    max-width: min(660px, calc(100% - var(--hero-reserve)));
  }

  .countdown {
    padding-inline: 56px;
  }

  .countdown__unit {
    width: 112px;
    height: 112px;
  }

  .about__grid {
    column-gap: 56px;
  }

  .about__media picture img {
    height: auto;
  }

  .usp__item {
    grid-template-columns: 76px 1fr var(--about-media);
    column-gap: 56px;
  }

  .usp__text {
    max-width: none;
  }

  .pathcard {
    column-gap: 40px;
  }

  .pathcard__media picture img {
    width: 100%;
    height: auto;
    aspect-ratio: 556 / 290;
  }

  .pathcard__text {
    max-width: none;
  }

  /* min-width: 0 hebt die automatische Mindestbreite auf — sonst
     zieht die längste Zwischenzeile ihre Etappe breiter als die
     beiden anderen und der Strahl bekommt ungleiche Abstände. */
  .timeline__step {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .timeline__text {
    max-width: none;
  }

  /* Die Zwischenzeile darf weiterhin in den Abstand zur nächsten
     Etappe ragen, hält dort aber 24px Luft. In der letzten Spalte
     endet sie an der Sektionskante. */
  .timeline__what {
    max-width: calc(100% + var(--step-gap) - 24px);
  }

  .timeline__step:last-child .timeline__what {
    max-width: 100%;
  }

  .newsletter__logo {
    top: 64px;
    right: 64px;
    width: 180px;
  }

  .facts {
    gap: 32px 56px;
  }

  .facts__item {
    width: auto;
    max-width: 294px;
  }

  .footer__logo-wp {
    height: 128px;
  }

  .footer__logo-talents {
    width: 196px;
  }

  .footer__divider {
    height: 118px;
    margin-inline: 36px;
  }

  /* Die Social-Buttons ziehen mit dem übrigen Footer an — sonst
     bleiben sie als einziges Element auf Desktop-Maß und wirken
     neben dem kleiner werdenden Lockup zu groß. Das Icon behält
     dabei sein Verhältnis zum Kreis (rund 0.54). */
  .socialbtn {
    width: 48px;
    height: 48px;
  }

  .socialbtn .icon {
    width: 26px;
    height: 26px;
    max-width: 26px;
    max-height: 26px;
  }

  .footer__contact {
    column-gap: 56px;
  }
}


/* ============================================================
   ≤ 1199px — kleiner Laptop / Tablet quer
   ============================================================ */
@media (max-width: 1199px) {
  :root {
    --fs-display: 72px;
    --fs-h3: 36px;
    --fs-h4: 28px;
    --lh-h4: 36px;
    --fs-num: 72px;
    --fs-lead: 21px;
    --lh-lead: 28px;
    --fs-countdown: 40px;
    --fs-countdown-title: 30px;

    --section-py: 88px;
    --container-px: 24px;
    /* Rückfall — countdown.js misst den Halbwert zur Laufzeit nach. */
    --countdown-overlap: 82px;

    /* Zieht mit --container-px mit: die Leiste stand sonst noch auf
       den 32px von oben, während der Inhalt darunter schon bei 24px
       beginnt — Logo und Headline liefen aus der Flucht. Ab 767px
       gehen beide weiter herunter (Nav auf 12px). */
    --nav-px: 24px;

    --nav-py: 14px;
    --nav-py-sm: 10px;
    --nav-logo-h: 88px;
    --nav-logo-h-sm: 68px;
    --nav-talents-w: 118px;
    --nav-talents-w-sm: 92px;
    --nav-divider-h: 72px;
    --nav-divider-h-sm: 56px;
    --nav-h: 116px;

    --hero-veil-h: 400px;
    --stack-top: 88px;
    --step-gap: 64px;

    /* Phone ist jetzt 440px hoch → 314px breit */
    --hero-reserve: 346px;
  }

  .nav__divider {
    margin-inline: 24px;
  }

  .nav__burger {
    --burger-size: 48px;
  }

  .hero__lead {
    max-width: 520px;
  }

  .hero__visual {
    bottom: -120px;
  }

  .hero__phone {
    height: 440px;
  }

  .countdown {
    padding-inline: 40px;
    gap: 24px;
  }

  .countdown__unit {
    width: 100px;
    height: 100px;
  }

  .countdown__sep {
    margin-inline: 8px;
  }

  .usp__item {
    grid-template-columns: 68px 1fr var(--about-media);
    column-gap: 40px;
  }

  .pathcard {
    padding: 24px;
    column-gap: 32px;
  }

  .pathcard__body {
    padding-left: 16px;
  }

  .pathcard__title {
    font-size: 32px;
  }

  .newsletter__logo {
    top: 48px;
    right: 40px;
    width: 150px;
  }

  /* Als Raster: drei feste Spalten statt Umbruch — nebeneinander
     reichen die 294px sonst ab ~1057px nicht mehr und der dritte
     Punkt fällt allein in eine zweite Zeile. */
  .facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__inner {
    column-gap: 32px;
  }

  .footer__logo-wp {
    height: 104px;
  }

  .footer__logo-talents {
    width: 160px;
  }

  .footer__divider {
    height: 96px;
    margin-inline: 28px;
  }

  /* 44px ist die Untergrenze — darunter wird der Kreis auf dem
     Handy zu klein zum Treffen. Kleiner wird ab hier nur noch
     das Icon darin. */
  .socialbtn {
    width: 44px;
    height: 44px;
  }

  .socialbtn .icon {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
  }

  .footer__contact {
    column-gap: 40px;
  }

  .footer__legal {
    gap: 32px;
  }
}


/* ============================================================
   ≤ 991px — Tablet hoch
   ------------------------------------------------------------
   Die Zweispalter bleiben zweispaltig — bis 768px ist dafür
   Platz, und einspaltig würden Bilder riesig und die rechte
   Seitenhälfte leer. Umgebrochen wird erst im Mobil-Layout.
   Was hier greift, sind kleinere Maße und zwei Blöcke, die eine
   andere Aufteilung brauchen: Countdown und Aufzählung.
   ============================================================ */
@media (max-width: 991px) {
  :root {
    /* Stufenlos, damit „dass dich weiterbringt." bis 768px
       einzeilig bleibt (bei festen 60px bricht es ab ~790px um) */
    --fs-display: min(60px, 6.7vw);
    --fs-h3: 32px;
    --fs-h4: 26px;
    --lh-h4: 34px;
    --fs-num: 64px;
    --fs-lead: 20px;
    --lh-lead: 27px;
    --fs-countdown: 36px;
    --fs-countdown-title: 28px;

    --section-py: 72px;
    /* Rückfall — countdown.js misst den Halbwert zur Laufzeit nach. */
    --countdown-overlap: 97px;

    --nav-py: 12px;
    --nav-py-sm: 10px;
    --nav-logo-h: 76px;
    --nav-logo-h-sm: 60px;
    --nav-talents-w: 102px;
    --nav-talents-w-sm: 80px;
    --nav-divider-h: 62px;
    --nav-divider-h-sm: 48px;
    --nav-h: 100px;

    --hero-veil-h: 340px;
    --stack-top: 80px;
    --stack-step: 24px;
    --step-gap: 40px;

    /* Phone-Spalte schrumpft ab ~919px stufenlos mit, damit die
       Eingabezeile links davon nutzbar bleibt. Die Phone-Höhe
       leitet sich daraus ab (456 : 640 = 1 : 1.4035). */
    --hero-reserve: min(317px, 34.5vw);

    /* Die Aufzählung steht ab hier gestapelt, ihr Text läuft über
       die volle Breite — die Bildspalte richtet sich deshalb nur
       noch nach sich selbst. */
    --about-media: 40%;
  }

  /* ---------- Hero ---------- */
  .hero {
    padding-top: calc(var(--nav-h) + 32px);
  }

  /* Das Phone bleibt rechts stehen wie darüber — nur kleiner.
     Im Fluss darunter stünde es allein neben einer leeren
     Sektionshälfte. */
  .hero__visual {
    right: var(--container-px);
    bottom: -110px;
  }

  .hero__phone {
    width: auto;
    height: calc((var(--hero-reserve) - 32px) * 1.4035);
    max-height: none;
  }

  .hero__countdown {
    margin-top: 96px;
  }

  /* Der Absende-Button gibt im schmaleren Formular Platz an die
     Eingabezeile ab. */
  .subscribe__btn {
    padding-inline: 28px;
    font-size: 18px;
  }

  /* ---------- Countdown ----------
     Nebeneinander passt die Zeile nicht mehr, untereinander bliebe
     die halbe Box leer: Text und Button links, Zählwerk rechts. */
  .countdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 32px;
    row-gap: 24px;
    padding: 32px;
  }

  .countdown__timer {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .countdown__unit {
    width: 92px;
    height: 92px;
  }

  .countdown__sep {
    margin-inline: 6px;
  }

  .countdown .btn {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  /* ---------- Das ist talents ---------- */
  .about__grid {
    column-gap: 40px;
    row-gap: 0;
  }

  .about__media picture img {
    width: 100%;
  }

  /* Feste Ziffernspalte: bei `auto` misst jede Aufzählung ihre
     eigene Breite und die Headlines fluchten nicht mehr. */
  .usp__item {
    grid-template-columns: 64px 1fr;
    column-gap: 24px;
    row-gap: 8px;
    align-items: center;
  }

  .usp__num {
    text-align: center;
  }

  .usp__text {
    grid-column: 1 / -1;
  }

  /* ---------- Dein Einstieg ---------- */
  .paths__head {
    flex-wrap: wrap;
    gap: 8px 32px;
  }

  .pathcard {
    grid-template-columns: 1fr 42%;
    column-gap: 32px;
    row-gap: 0;
  }

  .pathcard__body {
    padding-left: 0;
  }

  .pathcard__media picture img {
    aspect-ratio: 556 / 290;
  }

  /* ---------- Der Weg zum 15.09. ----------
     Ab hier sind die Spalten zu schmal, als dass die Zwischenzeile
     noch überhängen könnte — sie bricht jetzt in ihrer Spalte um.
     Das Datum zieht mit: bei 40px passte „15.09.2026" nicht mehr
     in eine Spalte. */
  .timeline__when {
    font-size: 32px;
    margin-bottom: 16px;
  }

  .timeline__what {
    font-size: 21px;
    line-height: 28px;
    max-width: 100%;
  }

  /* ---------- Newsletter ---------- */
  .newsletter {
    padding-top: 72px;
  }

  .newsletter__logo {
    top: 32px;
    right: 24px;
    width: 120px;
  }

  /* Als Raster statt Umbruch — sonst rutscht der dritte Punkt in
     eine zweite Zeile und die erste bleibt halb leer. */
  .facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .facts__item {
    width: auto;
    max-width: none;
  }

  .facts__title {
    font-size: 18px;
  }

  .facts__text {
    max-width: none;
  }

  /* ---------- Footer ----------
     minmax(0, 1fr): die linke Spalte richtet sich nach dem
     Viewport, nicht nach dem breitesten Element darin. Das Lockup
     wird dafür eine Stufe kleiner. */
  .footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px;
    row-gap: 32px;
  }

  .footer__logo-wp {
    height: 76px;
  }

  /* flex: none — sonst schrumpft die Wortmarke im engen Lockup
     bis zur Unkenntlichkeit zusammen. */
  .footer__divider {
    flex: none;
    height: 70px;
    margin-inline: 20px;
  }

  .footer__logo-talents {
    flex: none;
    width: 118px;
  }

  .footer__claim,
  .footer__org {
    max-width: 300px;
    font-size: 18px;
    line-height: 25px;
  }

  .footer__contact {
    column-gap: 32px;
  }

  .footer__legal {
    gap: 16px 32px;
    margin-top: 8px;
  }

  .footer__watermark {
    --footer-mark-w: 720px;
    --footer-mark-y: 40px;
  }
}


/* ============================================================
   ≤ 767px — Umstieg auf das Mobil-Layout
   ------------------------------------------------------------
   Ab hier gilt die Figma-Vorlage für 393px: Sektionsköpfe
   zentriert, Karten mit Bild oben, Zeitstrahl senkrecht,
   Aufzählungen einzeilig. Die Größen stehen im Block darunter
   (≤599px) exakt so, wie sie gemessen wurden — hier laufen sie
   eine Stufe größer, damit der Übergang nicht springt.
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --fs-display: 44px;
    --lh-display: 1.1;
    --fs-h3: 30px;
    --lh-h3: 34px;
    --fs-h4: 24px;
    --lh-h4: 32px;
    --fs-num: 56px;
    --fs-lead: 17px;
    --lh-lead: 24px;
    --fs-body: 16px;
    --lh-body: 23px;
    --fs-countdown: 30px;
    --fs-countdown-title: 26px;

    --section-py: 60px;
    /* Rückfall — countdown.js misst den Halbwert zur Laufzeit nach. */
    --countdown-overlap: 133px;
    --container-px: 16px;

    --nav-px: 12px;
    --nav-py: 12px;
    --nav-py-sm: 10px;

    /* Das Lockup misst bei 64px Logo-Höhe 292px — zusammen mit
       Menü-Button und Abstand braucht die Leiste damit 392px.
       Auf schmaleren Geräten schrumpfen Logos und Trenner im
       selben Verhältnis mit; --nav-fit ist die Breite, die je
       Einheit übrig bleibt. Ab 392px greifen die min()-Deckel und
       es stehen exakt die Figma-Werte. */
    --nav-fit: calc((100vw - 108px) / 284);
    --nav-logo-h: min(64px, calc(64 * var(--nav-fit)));
    --nav-logo-h-sm: min(52px, calc(52 * var(--nav-fit)));
    --nav-talents-w: min(87px, calc(87 * var(--nav-fit)));
    --nav-talents-w-sm: min(72px, calc(72 * var(--nav-fit)));
    --nav-divider-h: min(50px, calc(50 * var(--nav-fit)));
    --nav-divider-h-sm: min(40px, calc(40 * var(--nav-fit)));
    --nav-h: calc(2 * var(--nav-py) + var(--nav-logo-h));

    --hero-veil-h: 280px;

    /* Einrückung der Textblöcke gegenüber der Sektionskante */
    --inset: 12px;
  }

  body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* ---------- NAV ----------
     Gleicher Button wie auf dem Desktop, nur umgefärbt:
     weißer Kreis, Striche in talents-Rot. */
  .nav__divider {
    margin-inline: min(17px, calc(17 * var(--nav-fit)));
  }

  /* Der Abstand wirkt nur als Mindestwert — verteilt wird mit
     space-between. Kleiner gesetzt bleibt auf schmalen Geräten
     Luft für das mitschrumpfende Lockup. */
  .nav__inner {
    gap: 8px;
  }

  .nav__burger {
    background: transparent;
  }

  .nav__burger:hover {
    background: var(--surface-soft);
  }

  .nav__burger span {
    background: var(--brand);
  }

  /* ---------- HERO ---------- */
  .hero {
    padding-top: calc(var(--nav-h) + 52px);
  }

  /* Headline, Lead und Aufzählungen sind gegenüber Formular,
     Hinweis und Trennstrich um --inset eingerückt. */
  .hero__title,
  .hero__lead {
    padding-left: var(--inset);
  }

  .hero__title {
    font-size: 44px;
    line-height: 48px;
    margin-bottom: 24px;
  }

  .hero__date {
    display: block;
  }

  .hero__lead {
    max-width: calc(300px + var(--inset));
    margin-bottom: 24px;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* Formular: Eingabezeile oben, Button in voller Breite darunter */
  .subscribe {
    flex-wrap: wrap;
    height: auto;
    max-width: none;
    padding: 12px;
    border-radius: 24px;
    row-gap: 12px;
  }

  .subscribe__icon {
    margin-left: var(--inset);
  }

  .subscribe__input {
    flex: 1 1 60%;
    height: 34px;
    font-size: var(--fs-body);
  }

  .subscribe__btn {
    flex: 1 0 100%;
    height: 44px;
    padding-inline: 24px;
    font-size: 17px;
  }

  .hero__form {
    margin-bottom: 12px;
  }

  .hero__note {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1;
  }

  /* Trennstrich in voller Breite, Texte darunter eingerückt */
  .features {
    flex-direction: column;
    gap: 20px;
    max-width: none;
    margin-top: 32px;
    padding-top: 32px;
  }

  .features__item {
    padding-left: var(--inset);
    align-items: flex-start;
    gap: 8px;
  }

  .features__icon {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    margin-top: 2px;
  }

  .features__text {
    line-height: 20px;
  }

  .features__text b {
    display: inline;
  }

  /* Phone läuft im Fluss mit, in voller Breite, unten von der
     Countdown-Box beschnitten */
  .hero__visual {
    position: static;
    right: auto;
    bottom: auto;
    display: block;
    height: 370px;
    margin-top: 24px;
    overflow: hidden;
    pointer-events: auto;
  }

  .hero__phone {
    width: 305px;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0 auto;
  }

  .hero__countdown {
    margin-top: 0;
  }

  /* ---------- COUNTDOWN ----------
     Zurück zur Spalte: Text, Zählwerk und Button untereinander. */
  .countdown {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 24px 32px;
  }

  .countdown__title {
    margin-bottom: 12px;
  }

  .countdown__meta {
    font-size: var(--fs-body);
  }

  .countdown__intro {
    margin-bottom: 16px;
  }

  /* Boxen teilen sich die volle Breite, der Abstand bleibt fix */
  .countdown__timer {
    align-self: stretch;
  }

  .countdown__unit {
    flex: 1 1 0;
    width: auto;
    height: 80px;
    aspect-ratio: auto;
  }

  .countdown__value {
    height: var(--fs-countdown);
  }

  .countdown__label {
    font-size: 13px;
  }

  .countdown__sep {
    margin-inline: 13px;
  }

  .hero__countdown .btn {
    width: 100%;
    margin-top: 24px;
    font-size: var(--fs-body);
  }

  /* ---------- SEKTIONSKÖPFE ----------
     Überschrift, Zwischenzeile und Einleitung stehen zentriert. */
  .about__title,
  .about__heading,
  .about__text,
  .about__col .btn,
  .paths__head,
  .paths__lead,
  .roadmap__title,
  .roadmap__subtitle,
  .roadmap__lead,
  .newsletter__title,
  .newsletter__subtitle,
  .newsletter__text,
  .newsletter__cta {
    text-align: center;
  }

  .about__text,
  .paths__lead,
  .roadmap__lead,
  .newsletter__text {
    max-width: 420px;
    margin-inline: auto;
  }

  .about__title,
  .paths__title,
  .roadmap__title,
  .newsletter__title {
    margin-bottom: 16px;
    line-height: var(--lh-display);
  }

  .about__heading,
  .paths__subtitle,
  .roadmap__subtitle,
  .newsletter__subtitle {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    margin-bottom: 24px;
  }

  /* ---------- DAS IST TALENTS ---------- */
  .about__grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .about__text {
    margin-bottom: 24px;
  }

  .about__col .btn {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    font-size: var(--fs-body);
  }

  .about__media picture img {
    border-radius: var(--radius-sm);
  }

  /* Aufzählung: Zahl und Headline nebeneinander, Text darunter.
     Trennstriche laufen bis zur Sektionskante, die Texte sind
     wie die übrigen Blöcke eingerückt. */
  .usp {
    margin-top: 24px;
  }

  /* Der Trennstrich läuft bis zur Sektionskante, der Inhalt ist
     um --inset eingerückt (Padding schiebt die Border nicht ein). */
  .usp__item {
    grid-template-columns: 55px 1fr;
    column-gap: 16px;
    row-gap: 16px;
    padding: 24px var(--inset);
  }

  .usp__num {
    text-align: center;
  }

  .usp__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
  }

  .about__marquee {
    margin-top: 16px;
  }

  .marquee__item {
    font-size: var(--fs-body);
  }

  .marquee__item::after {
    margin-inline: 16px;
  }

  /* ---------- DEIN EINSTIEG ---------- */
  .paths__head {
    display: block;
    margin-bottom: 0;
  }

  .paths__lead {
    margin-bottom: 24px;
  }

  .stack {
    gap: 24px;
  }

  /* Karte einspaltig, Bild oben */
  .pathcard {
    grid-template-columns: 1fr;
    padding: 12px;
    row-gap: 0;
    border-radius: var(--radius);
  }

  /* Der Abstand sitzt an der <figure>, nicht am Bild: Die <figure>
     ist der Bezugsrahmen der KI-Kennzeichnung — am Bild würde er
     das Label um 16px nach unten aus dem Bild schieben. */
  .pathcard__media {
    order: 1;
    margin-bottom: 16px;
  }

  .pathcard__media picture img {
    aspect-ratio: 556 / 290;
    border-radius: var(--radius-sm);
  }

  /* Auf kleinen Bildern wird die KI-Kennzeichnung kleiner und
     rückt näher an die Ecke — gilt für beide Sektionen, nicht
     nur für die Karten. */
  .ai-label {
    right: 12px;
    bottom: 8px;
    height: 16px;
  }

  .pathcard__body {
    order: 2;
    padding: 0 var(--inset) 12px;
  }

  .pathcard__tag {
    font-size: var(--fs-body);
    margin-bottom: 8px;
  }

  .pathcard__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    margin-bottom: 16px;
  }

  .pathcard__text {
    margin-bottom: 24px;
  }

  .paths__cta {
    margin-top: 24px;
    font-size: var(--fs-body);
  }

  /* bricht wie im Layout nach „Der Weg" um */
  .roadmap__title {
    max-width: 240px;
    margin-inline: auto;
  }

  /* ---------- DER WEG ZUM 15.09. ----------
     Zeitstrahl senkrecht: Schiene links, Etappen darunter. */
  .roadmap__lead {
    margin-bottom: 24px;
  }

  /* Der Strahl ist inhaltlich nur so breit wie Punkt + Abstand +
     Textspalte — alles dahinter ist Leerraum. Auf dem Handy fällt
     das nicht auf, auf einem 700px-Viewport klebt der Block sonst
     links und lässt die halbe Sektion frei. Der Deckel entspricht
     genau der gezeichneten Breite und ändert deshalb nichts an der
     Darstellung, er erlaubt nur das Zentrieren.
     (Unter 600px wieder linksbündig — siehe ≤599px.) */
  .timeline {
    max-width: calc(var(--dot-size) + 12px + 300px);
    margin-inline: auto;
  }

  .timeline__steps {
    flex-direction: column;
    gap: 40px;
  }

  /* minmax(0, 1fr): die Textspalte darf schmaler werden als ihr
     längster Titel — sonst schiebt die Zwischenzeile den Strahl
     auf kleinen Phones aus dem Bild. */
  .timeline__step {
    display: grid;
    grid-template-columns: var(--dot-size) minmax(0, 1fr);
    column-gap: 12px;
    max-width: none;
  }

  .timeline__dot {
    margin-bottom: 0;
  }

  /* Schiene läuft senkrecht hinter den Punkten; die genaue Länge
     (erster bis letzter Punkt) setzt timeline.js. */
  .timeline__track {
    top: 0;
    left: calc(var(--dot-size) / 2 - 1px);
    width: 2px;
    height: 100%;
    max-width: none;
  }

  .timeline__fill {
    width: 100%;
    height: calc(var(--progress, 0) * 100%);
    transition: height var(--dur-slow) var(--ease);
  }

  .timeline__when {
    font-size: var(--fs-h4);
    line-height: 1;
    margin-bottom: 12px;
  }

  .timeline__what {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 8px;
  }

  .timeline__text {
    max-width: 300px;
  }

  /* ---------- NEWSLETTER ---------- */
  .newsletter {
    padding-top: var(--section-py);
  }

  /* Signet steht mittig über der Headline */
  .newsletter__logo {
    position: static;
    display: block;
    width: auto;
    height: 24px;
    margin: 0 auto 12px;
  }

  .newsletter__text {
    margin-bottom: 24px;
  }

  .newsletter__cta {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    font-size: var(--fs-body);
  }

  .facts {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
    padding-top: 24px;
  }

  .facts__item {
    width: auto;
    max-width: none;
    padding-left: var(--inset);
    gap: 16px;
  }

  .facts__body {
    margin-top: 4px;
  }

  .facts__title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .facts__text {
    max-width: none;
  }

  /* ---------- FOOTER ----------
     Im Mobil-Layout steht das IDW-Logo unter den Social-Buttons,
     nicht neben dem Lockup — deshalb die eigene Reihenfolge. */
  .footer {
    padding-block: 32px;
  }

  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .footer__idw,
  .footer__org,
  .footer__contact {
    justify-self: start;
    text-align: left;
  }

  .footer__contact {
    justify-content: start;
  }

  .footer__legal {
    justify-content: flex-start;
  }

  .footer__brand {
    order: 1;
  }

  .footer__claim {
    order: 2;
  }

  .footer__social {
    order: 3;
  }

  .footer__idw {
    order: 4;
  }

  .footer__org {
    order: 5;
  }

  .footer__contact {
    order: 6;
  }

  .footer__legal {
    order: 7;
  }

  /* Lockup misst zusammen 320px: das WP-Logo füllt den Rest,
     talents und Trenner bleiben fix. */
  .footer__brand {
    width: 100%;
    max-width: 320px;
  }

  .footer__logo-wp {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
  }

  .footer__divider {
    flex: none;
    height: 60px;
    margin-inline: 16px;
  }

  .footer__logo-talents {
    flex: none;
    width: 107px;
  }

  .footer__claim {
    margin-top: 24px;
    max-width: 300px;
    font-size: 17px;
    line-height: 24px;
  }

  .footer__social {
    margin-top: 16px;
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  /* Newsletter-Button bekommt eine eigene Zeile, bleibt aber so
     breit wie sein Inhalt */
  .footer__social li:last-child {
    flex-basis: 100%;
  }

  .socialbtn--wide {
    width: fit-content;
  }

  .footer__idw {
    margin-top: 48px;
  }

  .footer__idw img {
    height: auto;
    width: 100px;
  }

  .footer__org {
    margin-top: 24px;
    max-width: 300px;
    font-size: 17px;
    line-height: 24px;
  }

  .footer__contact {
    margin-top: 16px;
    column-gap: 48px;
    font-size: var(--fs-body);
  }

  .footer__legal {
    margin-top: 32px;
    gap: 16px 32px;
    font-size: var(--fs-body);
  }

  .footer__watermark {
    --footer-mark-w: 560px;
    --footer-mark-y: 40px;
  }

  /* ---------- MODAL ---------- */
  .modal__head {
    padding: 24px 20px 16px;
  }

  .modal__body {
    padding: 0 20px 24px;
  }

  .modal__title {
    font-size: 22px;
  }

  /* Auf schmalen Screens zählt jede Zeile — die Kapitelabstände
     fallen darum eine Stufe kleiner aus. */
  .modal__body>h3 {
    margin-top: 32px;
    font-size: 19px;
  }

  .modal__body>h4 {
    margin-top: 24px;
  }

  .modal__body>.modal__footnote {
    margin-top: 32px;
  }
}


/* ============================================================
   ≤ 599px — Smartphone, 1:1 zur Figma-Vorlage (393px)
   ============================================================ */
@media (max-width: 599px) {
  :root {
    --fs-display: 40px;
    --lh-display: 48px;
    --fs-h3: 28px;
    --lh-h3: 32px;
    --fs-num: 64px;
    --fs-countdown: 28px;
    --fs-countdown-title: 24px;

    --container-px: 12px;
    --radius-lg: 20px;
  }

  .hero__title {
    font-size: 40px;
  }

  /* Ab hier ist der Viewport so schmal, dass neben dem Zeitstrahl
     nichts mehr frei bleibt — er steht wieder linksbündig wie der
     Rest des Handy-Layouts. Der Deckel darf bleiben, er entspricht
     der gezeichneten Breite. */
  .timeline {
    margin-inline: 0;
  }

  .about__text,
  .paths__lead,
  .roadmap__lead,
  .newsletter__text {
    max-width: 300px;
  }
}


/* ============================================================
   Flache Viewports (Handy quer, kleine Laptops)
   Passt eine Karte nicht mehr ins Bild, wird der Stapel-Effekt
   abgeschaltet — sonst klebt eine angeschnittene Karte fest.
   ============================================================ */
@media (max-height: 720px) {
  .stack__item {
    position: static;
  }
}


/* ============================================================
   ≤ 419px — kleines Smartphone
   ============================================================ */
@media (max-width: 419px) {
  .footer__contact {
    column-gap: 32px;
  }
}


/* ============================================================
   Handy quer — Mobil-Layout auf flachem Viewport
   ------------------------------------------------------------
   Ab 768px stehen Bild und Text ohnehin nebeneinander; die
   meisten Handys landen quer über dieser Grenze (844, 851, 932).
   Darunter bleiben die kleineren Geräte (667, 736, 740) im
   Mobil-Layout — und dort ist gestapelt eine Karte bei 375px
   Bildhöhe 555px hoch, das Bild allein schon 318px. Man sieht
   also nur das Bild und muss zum Text scrollen.

   Ausschlaggebend ist die Höhe, nicht die Breite: ein 700px
   breites Fenster mit 900px Höhe ist gestapelt völlig in
   Ordnung. Deshalb hängt der Block an `max-height` — wie schon
   der Karten-Stapel weiter oben. 500px trennt Handy quer
   (320–430px) sauber von Tablet quer (768px) und Desktop.

   `orientation: landscape` grenzt echtes Querformat von einem
   schmalen, flachen Fenster ab: bei 393×500 wären zwei Spalten
   nur noch 176px breit und würden nichts verbessern.

   Er steht bewusst am Dateiende: gleiche Spezifität wie die
   Regeln im ≤767px-Block, die Reihenfolge entscheidet.
   ============================================================ */
@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {

  /* ---------- Das ist talents ---------- */
  .about__grid {
    grid-template-columns: 1fr var(--about-media);
    column-gap: 24px;
    row-gap: 0;
  }

  /* min-width: 0 — sonst hält die Textspalte ihre Mindestbreite
     und schiebt die Bildspalte aus dem Raster. */
  .about__col {
    min-width: 0;
  }

  /* Zentriert steht der Fließtext nur, solange er allein in einer
     schmalen Spalte liegt. Neben dem Bild wird er linksbündig. */
  .about__heading,
  .about__text {
    text-align: left;
  }

  .about__text {
    max-width: none;
    margin-inline: 0;
  }

  .about__col .btn {
    margin-inline: 0;
  }

  /* ---------- Dein Einstieg ---------- */
  .pathcard {
    grid-template-columns: 1fr 42%;
    column-gap: 24px;
  }

  .pathcard__body {
    order: 1;
    min-width: 0;
    padding: 0 0 0 var(--inset);
  }

  .pathcard__media {
    order: 2;
    margin-bottom: 0;
  }
}