/* ---------- ABOUT PAGE ---------- */

  /* Desktop: Inhalt sitzt mit 160px Abstand zum Footer-Boden,
     über Col 2 + Col 3. Kein Scroll – statisch positioniert. */
  .about-scroll {
    position: fixed;
    bottom: min(160px, 15vh);
    /* Links: Col 1 + Gutter überspringen → Start Col 2 */
    left: calc(
      var(--margin-x)
      + ((100vw - 2 * var(--margin-x) - 2 * var(--gutter)) / 3)
      + var(--gutter)
    );
    right: var(--margin-x);
    z-index: 1;
  }

  /* Fade-in: Overline + Text versetzt */
  .about-section .overline,
  .about-section .text-left {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .is-loading .about-section .overline,
  .is-loading .about-section .text-left {
    opacity: 0;
    transform: translateY(8px);
    transition: none;
  }
  body:not(.is-loaded) .about-section .overline {
    transition-delay: 1.2s;
  }
  body:not(.is-loaded) .about-section .text-left {
    transition-delay: 1.35s;
  }

  /* Content: einspaltiger Fließtext */
  .about-content {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    color: var(--ink);
  }

  .about-section {
    display: block;
  }
  .about-section p { margin: 0 0 12px; }
  .about-section p:last-child { margin-bottom: 0; }

  /* Overline-Pill */
  .overline {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: 21px;
    padding-top: 3px;
    padding-right: 4px;
    padding-bottom: 0;
    padding-left: 4px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--bg);
    background: var(--accent);
    margin-bottom: 10px;
  }
  /* Footer-Blur-Overlay: Echter Verlauf der Blur-Stärke durch
     mehrere gestapelte Layer mit unterschiedlichen Blur-Werten.
     H1 (z-index 10) liegt darüber und wird nicht geblurrt. */
  .footer-blur {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 85px;
    z-index: 9;
    pointer-events: none;
    display: none;
  }
  .footer-blur.has-overflow {
    display: block;
  }
  /* Hintergrundfarb-Verlauf über dem Blur (0% transparent oben → 100% deckend unten) */
  .footer-blur__fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
    z-index: 1;
  }
  .footer-blur__layer {
    position: absolute;
    inset: 0;
  }
  /* Layer 1 – sehr schwach, fängt ganz oben an */
  .footer-blur__layer--1 {
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 100%);
  }
  /* Layer 2 – mittlere Stärke, beginnt im oberen Drittel */
  .footer-blur__layer--2 {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 15%, #000 45%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 15%, #000 45%, #000 100%);
  }
  /* Layer 3 – etwas weniger als Contact-Button, ab Mitte des Verlaufs */
  .footer-blur__layer--3 {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 35%, #000 60%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 35%, #000 60%, #000 100%);
  }
  /* ---------- /ABOUT PAGE ---------- */

  /* ---------- MOBILE ---------- */
  @media (max-width: 768px) {
    :root {
      --margin-x: 12px;
      --gutter:   12px;
    }
    .menu {
      top: auto;
      bottom: 14px;
      left: var(--margin-x);
    }
    .site-footer {
      grid-template-columns: 1fr;
      bottom: 14px;
    }
    .footer-cluster--1,
    .footer-cluster--2 { display: none; }
    .footer-cluster--3 {
      grid-column: 1;
      display: block;
      text-align: right;
    }
    .footer-cluster--3 .copy {
      display: block;
      text-align: right;
      white-space: nowrap;
    }
    .test-text { display: none; }
    .footer-blur { height: 150px; }

    /* About: Mobile – Inhalt vertikal zentriert im Viewport */
    .about-scroll {
      position: fixed;
      top: 0;
      bottom: 0;
      left: var(--margin-x);
      right: var(--margin-x);
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .about-content {
      width: 100%;
    }
  }

  /* ---------- DEBUG: scroll test column ---------- */
  .debug-scroll {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--margin-x) + ((100% - var(--margin-x)*2 - var(--gutter)*2) / 3 + var(--gutter)) * 2);
    width: calc((100% - var(--margin-x)*2 - var(--gutter)*2) / 3);
    overflow-y: auto;
    padding: 60px 0 60px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: var(--ink);
  }
  .debug-scroll p { margin: 0 0 12px; }