/* ==========================================================================
   Seite "Ueber uns" (ueber-uns.html)
   Aufmacher, die beiden Gruender und die Entstehungsgeschichte.
   ========================================================================== */

/* ==========================================================================
   Aufmacher
   ========================================================================== */

.about-hero {
  padding: 76px 7% 68px;
  background: #10192c;
  padding-bottom: 42px;
}

.about-hero h1 {
  font-size: clamp(40px, 5.5cqw, 74px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  max-width: 1020px;
}

.about-hero h1 span {
  color: #8eb1ff;
}

.about-hero-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8%;
  align-items: start;
  margin-top: 28px;
}

.about-names {
  border-top: 1px solid #5b6c86;
  padding-top: 20px;
  display: none;
  gap: 25px;
  align-items: baseline;
}

.about-names strong {
  font-size: 26px;
  letter-spacing: -0.03em;
}

.about-names span {
  font-size: 14px;
  color: #aebed8;
}

.about-hero-bottom p {
  font-size: 18px;
  line-height: 1.75;
  color: #c5cfdd;
}

.about-hero-bottom>p {
  max-width: 880px;
}

/* ==========================================================================
   Die beiden Gruender
   ========================================================================== */

.about-founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5%;
  padding: 15px 7% 70px;
  background: #10192c;
}

.about-portrait {
  /* Hochformat, nah am 3:4 der Aufnahmen — so wird beim Zuschnitt fast
     nichts vom Bild abgeschnitten. Die Breite ist gedeckelt: ueber die
     volle Spaltenbreite wirkt ein Portrait neben dem Text erschlagend. */
  aspect-ratio: 4/5;
  max-width: 300px;
  background: radial-gradient(circle at 50% 40%, #23385c 0%, #1d2d49 70%);
  border: 1px solid #40516b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 5px;
}

/* Das Foto deckt das Monogramm ab. Fehlt die Datei, nimmt sw-site.js das
   <img> aus dem Dokument und das Monogramm steht wieder da. */
.about-portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Der Kopf sitzt im oberen Drittel der Aufnahmen; der Ausschnitt wird
     deshalb nach oben verschoben statt mittig gesetzt. */
  object-position: center 22%;
  border-radius: inherit;
}

.about-portrait-jan {
  background: #23324c;
}

/* Das Monogramm ist kein Platzhalter fuer ein fehlendes Foto, sondern die
   gewaehlte Darstellung: zwei Buchstaben im Markenblau, ruhig genug, um
   neben dem Text zu stehen. */
.about-portrait-initials {
  font-size: clamp(64px, 9cqw, 125px);
  font-weight: 700;
  letter-spacing: -0.055em;
  color: #6790ff;
}

.about-bio {
  padding: 26px 0 0;
}

.about-bio-label {
  font-size: 12px;
  color: #8eaee0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 13px;
}

.about-bio h2 {
  font-size: 28px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.about-bio>p:last-child {
  font-size: 16px;
  color: #b8c8df;
  line-height: 1.75;
  margin-top: 15px;
  max-width: 510px;
}

/* ==========================================================================
   Wie Leadly entstanden ist
   ========================================================================== */

.about-history {
  background: #fff;
  color: #111b2c;
  padding: 24px 7% 70px;
}

.about-history article {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 10%;
  padding: 55px 0;
  border-bottom: 1px solid #c4cbd5;
}

.about-history article>div:first-child p {
  font-size: 13px;
  color: #2861ed;
  margin-bottom: 17px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.about-history h2 {
  font-size: 36px;
  line-height: 1.13;
  letter-spacing: -0.035em;
}

.about-history article>div:last-child p {
  font-size: 17px;
  line-height: 1.8;
  color: #4c5a6e;
  max-width: 650px;
}

.about-history article>div:last-child p+p {
  margin-top: 20px;
}

/* ==========================================================================
   Abschluss
   ========================================================================== */

.about-closing {
  padding: 64px 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.about-closing h2 {
  font-size: clamp(28px, 3.4cqw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  max-width: 720px;
}

/* ==========================================================================
   Schmalere Fenster
   ========================================================================== */

@container (max-width: 760px) {
  .about-hero {
    padding: 50px 6%;
  }

  .about-hero-bottom {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .about-history {
    padding: 10px 6% 35px;
  }

  .about-history article {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 35px 0;
  }

  .about-history h2 {
    font-size: 30px;
  }

  .about-closing {
    padding: 45px 6%;
    align-items: start;
    flex-direction: column;
  }
}

@container (max-width: 620px) {
  .about-founders {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 0 6% 50px;
  }

  /* Auf schmalen Geraeten stehen die Portraits untereinander. Ein Querformat
     wuerde das Hochformat der Aufnahmen stark beschneiden — deshalb bleibt
     es beim Hochformat, nur etwas kompakter. */
  .about-portrait {
    aspect-ratio: 5/6;
    max-width: 260px;
  }

  .about-portrait-initials {
    font-size: 90px;
  }
}

@container (max-width: 480px) {
  .about-names {
    flex-wrap: wrap;
    gap: 10px;
  }

  .about-hero h1 {
    font-size: clamp(37px, 10cqw, 48px);
  }
}