/* =========================================================
   POOL PROMOTION — ABOUT
   ========================================================= */

/* =========================================================
   PAGE
   ========================================================= */

.about-page {
  position: relative;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  padding-top: 90px;
  padding-bottom: 120px;
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
   INNER
   ========================================================= */

.about-inner {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}

/* =========================================================
   CONTENT
   ========================================================= */

.about-content {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}

/* =========================================================
   TITLE
   ========================================================= */

.about-title,
.section-title {
  margin: 0 0 12px;

  color: #fff;

  font-size: 30px;
  line-height: 1;

  font-weight: 700;
}

/* =========================================================
   TEXT
   ========================================================= */

.about-text {
  width: 100%;
  max-width: 100%;

  margin: 0;

  color: #fff;

  font-size: 18px;
  line-height: 1.45;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1260px) {

  .about-page {
    width:
      calc(100% - 60px);
  }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .about-page {
    width:
      calc(100% - 40px);

    padding-top: 45px;
    padding-bottom: 90px;
  }

  /* Titel */

  .about-title,
  .section-title {
    font-size: 24px;
  }

  /* Fließtext */

  .about-text {
    font-size: 15px;
    line-height: 1.45;
  }

}

/* =========================================================
   ONE PAGER

   About + Airplay Peaks + Clients auf einer Seite.

   #about
   #airplay-peaks
   #clients
   ========================================================= */

/* ---------------------------------------------------------
   SECTIONS

   padding-top    = Abstand Header → Überschrift
                    (lässt Platz für das offene Submenu)

   padding-bottom = zusätzlicher Abstand zur
                    nächsten Section
   --------------------------------------------------------- */

.onepage > .onepage-section {
  padding-top: 90px;
  padding-bottom: 40px;

  /*
   * Anker-Sprung:
   * Section beginnt direkt unter dem Sticky Header.
   *
   * --header-height wird in onepage.js
   * laufend gemessen. 75px = Fallback
   * (Höhe des verkleinerten Headers).
   */

  scroll-margin-top:
    var(--header-height, 75px);
}

.onepage > .onepage-section:last-child {
  padding-bottom: 120px;

  /*
   * Die letzte Section füllt mindestens den Bildschirm.
   * Sonst könnte sie bei einem Anker-Sprung nicht bis
   * unter den Header scrollen, weil die Seite vorher endet.
   */

  min-height:
    calc(100vh - var(--header-height, 75px));
}

/* ---------------------------------------------------------
   ÜBERSCHRIFT → INHALT
   --------------------------------------------------------- */

.onepage .clients-page .section-title {
  margin-bottom: 26px;
}

/* ---------------------------------------------------------
   SMOOTH SCROLL
   Nur auf dem One Pager.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  html:has(.onepage) {
    scroll-behavior: smooth;
  }

}

/* ---------------------------------------------------------
   ONE PAGER — MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

  .onepage > .onepage-section {
    padding-top: 45px;
    padding-bottom: 35px;

    scroll-margin-top:
      var(--header-height, 72px);
  }

  .onepage > .onepage-section:last-child {
    padding-bottom: 90px;
  }

  .onepage .clients-page .section-title {
    margin-bottom: 20px;
  }

}

/* =========================================================
   LINKS IM POOL-AGENCY-TEXT
   Weiß ohne Unterstrich, bei Hover Berry
   ========================================================= */

.about-text a {
  color: var(--white, #fff);
  text-decoration: none;
  transition: color .2s ease;
}
.about-text a:hover,
.about-text a:focus-visible {
  color: var(--berry, #820A5F);
}