/*
 * About Andy: nur Layout dieser Seite, nur Tokens. Mobil zuerst (390 px), Umschaltpunkte wie im Fundament (48em, 60em, 81em).
 * Bewegung: Foto im Kopf wandert leicht mit dem Scrollen (CSS-Scroll-Timeline, wo vorhanden), "Open sesame" und die
 * vierzig Punkte blenden einmal ein (about.js). Alles andere nutzt data-reveal aus dem Fundament.
 */

/* ============================================================ Kopf */

.about-hero {
  padding-block: var(--space-8) var(--section-y);
}

.about-hero__seite {
  margin-block-end: var(--space-3);
  color: var(--color-link);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-small);
}

.about-hero__titel {
  max-width: 17ch;
}

.about-hero__text {
  display: grid;
  gap: var(--space-6);
  margin-block-start: var(--space-5);
}

.about-hero__text .lead {
  max-width: 34rem;
}

/* Foto: mobil randlos im Zuschnitt 4:5, ab 48em 16:9, ab 60em als breites Band. */
.about-hero__bild {
  margin-block-start: var(--space-8);
  padding-inline: 0;
}

.about-hero__foto .bild__rahmen {
  border-radius: 0;
}

.about-hero__foto .bild__bild img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 48em) {
  .about-hero {
    padding-block-start: var(--space-11);
  }

  .about-hero__bild {
    margin-block-start: var(--space-10);
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }

  .about-hero__foto .bild__rahmen {
    border-radius: var(--radius);
  }

  .about-hero__foto .bild__bild img {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 60em) {
  .about-hero__kopf {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-10);
    align-items: end;
  }

  .about-hero__seite,
  .about-hero__titel {
    grid-column: 1;
  }

  .about-hero__text {
    grid-column: 2;
    grid-row: 2;
    margin-block-start: 0;
    padding-block-end: var(--space-2);
  }

  .about-hero__foto .bild__bild img {
    aspect-ratio: 21 / 9;
    object-position: 50% 62%;
  }
}

@media (min-width: 81em) {
  .about-hero__titel {
    font-size: var(--text-hero);
  }
}

/* Das Foto wandert im Rahmen leicht gegen die Scrollrichtung. Nur Transform, läuft im Compositor. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="aus"]) .about-hero__foto .bild__bild img {
      animation: about-foto linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
  }
}

@keyframes about-foto {
  from { transform: scale(1.1) translateY(-3.5%); }
  to { transform: scale(1.1) translateY(3.5%); }
}

/* Vier Angaben unter dem Foto: mobil zwei Spalten, ab 60em eine Zeile. */
.about-fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  margin-block-start: var(--space-7);
}

.about-fakten__punkt {
  padding-block-start: var(--space-3);
  border-block-start: var(--border) solid var(--color-line-strong);
}

.about-fakten dt {
  color: var(--color-text-3);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.about-fakten dd {
  margin-block-start: var(--space-1);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h3);
  text-wrap: balance;
}

@media (min-width: 60em) {
  .about-fakten {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr);
    gap: var(--space-8);
  }
}

/* ============================================================ Weg: Text, Zitat, Werkfoto */

.about-weg__raster {
  display: grid;
  gap: var(--space-8);
}

.about-weg__prosa {
  margin-block-start: var(--space-5);
}

.about-zitat {
  margin: 0;
}

.about-zitat p {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
  hanging-punctuation: first;
}

.about-zitat figcaption {
  margin-block-start: var(--space-3);
  color: var(--color-text-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.about-weg__werk {
  display: grid;
  gap: var(--space-3);
  max-width: 20rem;
}

.about-weg__werk .bild__rahmen {
  background: var(--color-bg);
}

.about-weg__werk .pfeillink {
  justify-self: start;
}

@media (min-width: 60em) {
  .about-weg__raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-10);
    row-gap: var(--space-9);
    align-items: start;
  }

  .about-weg__text {
    grid-row: 1 / span 2;
  }

  .about-zitat p {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
  }

  .about-zitat,
  .about-weg__werk {
    grid-column: 2;
  }
}

/* ============================================================ Name: Open sesame */

.about-name__raster {
  display: grid;
  gap: var(--space-7);
}

.about-name__frage {
  color: var(--color-on-primary-2);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: 0;
}

.about-sesam {
  margin-block-start: var(--space-2);
  font-size: calc(var(--text-display) * 1.3);
}

.about-name__text {
  max-width: var(--measure);
}

.about-name__text p:not(.lead) {
  color: var(--color-on-primary-2);
}

.about-name__text .lead {
  color: var(--color-on-primary);
}

/* Vierzig Punkte: zehn je Reihe, ab 60em zwanzig. */
.about-vierzig {
  margin: 0;
}

.about-vierzig__punkte {
  display: grid;
  grid-template-columns: repeat(10, var(--space-3));
  gap: var(--space-3);
}

.about-vierzig__punkte span {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-on-primary);
  opacity: 0.45;
}

.about-vierzig[data-wartet] .about-vierzig__punkte span {
  opacity: 0;
  transform: scale(0.6);
}

.about-vierzig[data-fertig] .about-vierzig__punkte span {
  opacity: 0.45;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out) calc(var(--n, 0) * var(--stagger) / 3), transform var(--dur-slow) var(--ease-out) calc(var(--n, 0) * var(--stagger) / 3);
}

.about-vierzig figcaption {
  margin-block-start: var(--space-4);
  color: var(--color-on-primary-2);
}

@media (min-width: 60em) {
  .about-name__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-10);
    row-gap: var(--space-9);
    align-items: start;
  }

  .about-sesam {
    font-size: calc(var(--text-display) * 1.5);
  }

  .about-name__text {
    padding-block-start: var(--space-2);
  }

  .about-vierzig {
    grid-column: 2;
  }

  .about-vierzig__punkte {
    grid-template-columns: repeat(20, var(--space-3));
  }
}

/* ============================================================ Motto: Zeilen mit Haarlinie */

.about-zeilen {
  border-block-start: var(--border) solid var(--color-line-strong);
}

.about-zeile {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-block-end: var(--border) solid var(--color-line);
}

.about-zeile p {
  max-width: var(--measure);
  color: var(--color-text-2);
}

@media (min-width: 60em) {
  .about-zeile {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-10);
    padding-block: var(--space-7);
  }

  .about-zeile h3 {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
  }
}

/* ============================================================ Gebiet: Text und drei Fotos */

.about-gebiet__raster {
  display: grid;
  gap: var(--space-8);
}

.about-gebiet__text .tel {
  font-weight: var(--weight-semibold);
}

.about-gebiet__bilder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
}

.about-gebiet__gross {
  grid-column: 1 / -1;
}

.about-gebiet__bilder .bild__rahmen {
  background: var(--color-bg);
}

@media (min-width: 60em) {
  .about-gebiet__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-10);
    align-items: center;
  }

  .about-gebiet__bilder {
    gap: var(--space-6) var(--space-5);
  }
}

/* ============================================================ Papiere */

.about-papiere__raster {
  display: grid;
  gap: var(--space-7);
}

.about-papiere__liste {
  border-block-start: var(--border) solid var(--color-line-strong);
}

.about-papiere__liste > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-block-end: var(--border) solid var(--color-line);
}

.about-papiere__liste dt {
  color: var(--color-text-3);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.about-papiere__liste dd {
  font-weight: var(--weight-semibold);
}

.about-papiere__liste dd .text-2 {
  font-weight: var(--weight-regular);
}

.about-papiere__zusatz {
  display: block;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

@media (min-width: 36em) {
  .about-papiere__liste > div {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: baseline;
  }
}

@media (min-width: 60em) {
  .about-papiere__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-10);
    align-items: start;
  }
}

/* ============================================================ Ruhe: keine Wege, alles steht */

@media (prefers-reduced-motion: reduce) {
  .about-vierzig[data-wartet] .about-vierzig__punkte span {
    opacity: 0.45;
    transform: none;
  }
}

html[data-motion="aus"] .about-vierzig[data-wartet] .about-vierzig__punkte span {
  opacity: 0.45;
  transform: none;
}