@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --teal: #4f9aa3;
  --orange: #f68b18;
  --pink: #f25175;
  --black: #000;
  --white: #fff;
  --grey: #8a8a8a;

  /* 1u = 1% der Folienhöhe (4:3-Folie, in den Viewport eingepasst) */
  --u: min(1vh, 0.75vw);
  --pad: max(11.4 * var(--u), 6vw);
  --tl-w: clamp(150px, 14vw, 250px);
  --ease: cubic-bezier(.7, 0, .2, 1);

  font-family: "TheSans", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

@supports (height: 1dvh) {
  :root { --u: min(1dvh, 0.75dvw); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Bühne & Folien ---------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

.slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  background: var(--black);
  will-change: transform;
}

.slide.is-active,
.slide.is-moving { visibility: visible; }

/* Folie 1 */
.slide--fomo {
  background: var(--teal);
  display: flex;
  align-items: center;
  padding-left: var(--pad);
}

.slide--fomo h1 {
  font-weight: 400;
  font-size: calc(13 * var(--u));
  letter-spacing: -0.01em;
  line-height: 1;
  transform: translateY(-3%);
}

/* Folie 2 */
.slide--question {
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
}

.question { transform: translateY(-6%); }

.question h2 {
  color: var(--orange);
  font-weight: 700;
  font-size: calc(4.6 * var(--u));
  margin-bottom: calc(5.2 * var(--u));
}

.question p {
  font-size: calc(4.8 * var(--u));
  line-height: 1.55;
}

/* Wochen-Folien */
.slide--week {
  display: grid;
  grid-template-rows: auto 1fr;
  padding:
    calc(8 * var(--u))
    var(--pad)
    calc(6 * var(--u))
    calc(var(--tl-w) + 5 * var(--u));
}

.week__head {
  display: flex;
  align-items: baseline;
  gap: calc(3 * var(--u));
}

.week__head h2 {
  color: var(--orange);
  font-weight: 700;
  font-size: calc(5.6 * var(--u));
  line-height: 1.1;
}

.week__date {
  color: var(--grey);
  font-size: calc(2.2 * var(--u));
  letter-spacing: .04em;
}

.week__items {
  --cols: 3;
  --gap: calc(4 * var(--u));
  /* Spaltenbreite: so groß wie möglich, aber Bild + Text passen in die Höhe */
  --col: min(
    (100vw - var(--tl-w) - 5 * var(--u) - var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols),
    50 * var(--u)
  );
  align-self: center;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--col));
  gap: var(--gap);
  align-items: start;
}

.item__media {
  display: block;
  width: 100%;
  aspect-ratio: 11 / 12;
  max-height: 52vh;
  overflow: hidden;
  background: #111;
}

.item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

a.item__media:hover img { transform: scale(1.03); }

.item__text {
  margin-top: calc(3 * var(--u));
  font-size: max(14px, calc(2.4 * var(--u)));
  line-height: 1.38;
  hyphens: auto;
  overflow-wrap: break-word;
}

.item__text a {
  display: inline-block;
  color: var(--pink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.item__text a:hover { color: #ff8aa6; }

/* ---------- Timeline ---------- */

.timeline {
  position: fixed;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--tl-w);
  display: flex;
  flex-direction: column;
  padding: calc(8 * var(--u)) 0 calc(4 * var(--u)) calc(3.2 * var(--u));
  opacity: 0;
  transform: translateX(-30px);
  pointer-events: none;
  transition: opacity .6s ease, transform .6s var(--ease);
}

body.is-archive .timeline {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.timeline__home {
  align-self: flex-start;
  color: var(--teal);
  font-size: calc(3 * var(--u));
  margin-bottom: calc(4 * var(--u));
  line-height: 1.2;
}

.timeline__home:hover { color: var(--white); }

.timeline__list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  position: relative;
  padding-right: 12px;
  mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
  padding-block: calc(2 * var(--u));
}

.timeline__list::-webkit-scrollbar { display: none; }

.timeline__year {
  color: var(--grey);
  font-size: calc(1.7 * var(--u));
  font-weight: 700;
  letter-spacing: .12em;
  padding: calc(1.5 * var(--u)) 0 calc(1 * var(--u)) 0;
}

.timeline__week button {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: calc(1.1 * var(--u)) 0 calc(1.1 * var(--u)) calc(3 * var(--u));
  color: var(--grey);
  transition: color .3s ease;
}

/* Linie */
.timeline__week button::before {
  content: "";
  position: absolute;
  left: calc(.55 * var(--u));
  top: 0;
  bottom: 0;
  width: 1px;
  background: #333;
}

/* Punkt */
.timeline__week button::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.1 * var(--u) + .55em);
  width: calc(1.2 * var(--u));
  height: calc(1.2 * var(--u));
  border-radius: 50%;
  background: #444;
  transform: translateY(-50%);
  transition: background .3s ease, box-shadow .3s ease;
}

.timeline__week button:hover { color: var(--white); }

.timeline__label {
  display: block;
  white-space: nowrap;
  font-size: calc(2 * var(--u));
  line-height: 1.2;
}

.timeline__label b { font-weight: 700; }

.timeline__teaser {
  display: block;
  max-height: 0;
  overflow: hidden;
  font-size: calc(1.6 * var(--u));
  line-height: 1.35;
  color: var(--grey);
  opacity: 0;
  transition: max-height .5s var(--ease), opacity .4s ease, margin .4s ease;
}

.timeline__week.is-active button { color: var(--white); }

.timeline__week.is-active button::after {
  background: var(--orange);
  box-shadow: 0 0 0 calc(.6 * var(--u)) rgba(246, 139, 24, .25);
}

.timeline__week.is-active .timeline__teaser {
  max-height: 20em;
  opacity: 1;
  margin-top: calc(.6 * var(--u));
}

.timeline__teaser span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Hochformat / Smartphone ---------- */

@media (orientation: portrait) {
  :root {
    --u: 1vw;
    --pad: 6vw;
    --tl-w: 0px;
  }

  .slide--fomo h1 { font-size: 20vw; }
  .question h2 { font-size: 6vw; }
  .question p { font-size: 6vw; }

  .slide--week {
    padding: max(14vw, 70px) 6vw 6vw;
    grid-template-rows: auto 1fr;
  }

  .week__head { flex-direction: column; gap: 1vw; }
  .week__head h2 { font-size: 8vw; }
  .week__date { font-size: 3.4vw; }

  .week__items {
    grid-template-columns: 1fr;
    gap: 4vw;
    align-self: start;
    margin-top: 6vw;
  }

  .item {
    display: grid;
    grid-template-columns: 30vw 1fr;
    gap: 4vw;
    align-items: start;
  }

  .item__media { max-height: none; }
  .item__text { margin-top: 0; font-size: max(13px, 3.4vw); }

  /* Timeline als kompakte Leiste oben */
  .timeline {
    width: auto;
    right: 0;
    bottom: auto;
    flex-direction: row;
    align-items: center;
    padding: 4vw 6vw;
    gap: 4vw;
    transform: translateY(-20px);
  }

  .timeline__home { font-size: 5vw; margin: 0; }
  .timeline__list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    gap: 3vw;
    mask-image: none;
  }
  .timeline__year { display: none; }
  .timeline__week button { padding: 1vw 0; white-space: nowrap; }
  .timeline__week button::before,
  .timeline__week button::after,
  .timeline__teaser { display: none; }
  .timeline__label { font-size: 3.6vw; }
}

@media (prefers-reduced-motion: reduce) {
  .item__media img, .timeline, .timeline__teaser { transition: none; }
}