:root {
  --boat-x: 880px;

  body {
    section#landing {
      position: relative;

      height: 100vh;

      background-image: linear-gradient(70deg, var(--accent) var(--background-position), white calc(var(--background-position) + 1px));

      overflow: hidden;

      min-height: 100vh;

      padding-top: 6.4em;
      padding-left: var(--background-position);

      h1 {
        font-size: 2.0vw;
        font-weight: 300;
        line-height: 190%;

        margin: 0;

        .brand-font {
          font-size: 140%;
          position: relative;
          top: 0.01em;
        }

        em {
          font-size: 180%;
          margin-left: .3em;
        }
      }

      .hero-svg-bg {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;

        position: absolute;
        pointer-events: none;

        .island {
          translate: calc(-12% + var(--background-position) * 0.4) calc(24% + var(--background-position) * -0.8);
          scale: calc(var(--background-position) + 70%);
          transform-origin: 50% 80%;
          transition: translate linear 100ms, scale linear 100ms;
        }

        .animated-boat {
          animation: 
            sailIn 8s ease-out forwards, 
            floatBoat 8s ease-in-out 8s infinite;
          transform-origin: center;
          translate: calc(-6% + var(--background-position) * 0.2) calc(24% + var(--background-position) * -0.8);
          scale: calc(var(--background-position) + 70%);
          transition: translate linear 100ms, scale linear 100ms;
        }

        .bde-terminal-float {
          animation: floatTerminal 6s ease-in-out infinite;
          transform-origin: center;
        }

        .animated-waves {
          animation: floatWaves 8s ease-in-out infinite;
          translate: calc(-6% + var(--background-position) * 0.2) calc(12% + var(--background-position) * -0.4);
        }

        .animated-ocean {
          animation: moveOcean 80s linear infinite;
        }
      }
    }
  }
}

section#versprechen .inner.dual {
  grid-template-columns: 3fr 1fr;
  gap: 3em;
}

section#versprechen .inner.dual img {
  align-self: center;
  justify-self: center;
  width: 100%;
  height: 21em;
  object-position: bottom;
}

/* Siegel würde im 3fr/1fr-Grid auf schmalen Viewports zu stark gestaucht;
   stattdessen unter den Text umbrechen (wie section#about). */
@media (max-width: 900px) {
  section#versprechen .inner.dual {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  section#versprechen .inner.dual img {
    width: 60vw;
    height: unset;
    max-width: 280px;
  }
}

@keyframes floatBoat {
  0%,
  100% {
    transform: translate(var(--boat-x), 540px) rotate(0deg);
  }

  50% {
    transform: translate(var(--boat-x), 555px) rotate(1.5deg);
  }
}

@keyframes floatWaves {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(15px);
  }
}

@keyframes sailIn {
  /* 1296px statt 90vw: Werte in .animated-boat sind SVG-User-Units
     (viewBox-Breite 1440), vw bezieht sich dagegen auf den echten Viewport
     und sorgt auf schmalen Mobil-Breiten für eine falsche Richtung. */
  0% {
    transform: translate(1296px, 540px) rotate(-2deg);
  }

  100% {
    transform: translate(var(--boat-x), 540px) rotate(0deg);
  }
}

@keyframes moveOcean {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Tablet: schmalerer Texteinzug, kleinere Überschrift statt vw-Skalierung,
   die auf schmalen Viewports unlesbar klein würde. */
@media (max-width: 900px) {
  :root {
    body {
      section#landing {
        padding-top: 16vh;
        padding-left: 19vw;

        h1 {
          font-size: 3.0vw;
        }
      }
    }
  }
}

/* Handy: die animierte Szene bleibt sichtbar, aber niedriger, gestapelt
   über der Überschrift statt dahinter. */
@media (max-width: 700px) {
  :root {
    body {
      section#landing {
        height: auto;
        min-height: 100vh;
        padding: calc(4em + 10vw) 0 0;        
        background-image: linear-gradient(70deg, var(--accent) 30vw, white calc(30vw + 1px));
        min-height: 100vw;

        .hero-svg-bg {
          width: 100%;
          height: 80%;
          top: 20%;
        }

        h1 {
          padding: 0 0 0 12vw;
          font-size: 3.4vw;
        }
      }
    }
  }
}