/* Maße in Design-Pixeln (Figma-Frame 1920px breit), umgerechnet über --px */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body { overflow-x: clip; }

/* ---------- Brand (Logo + Wortmarke) ---------- */

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(21.84 * var(--px));
}

.brand__mark {
  width: max(56px, 80.467 * var(--px));
  height: auto;
}

.brand__wordmark {
  width: max(72px, 103.458 * var(--px));
  height: auto;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  color: var(--color-white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: clip;
}

.hero__bg img {
  position: absolute;
  top: -6.2%;
  left: -52.18%;
  width: 159.78%;
  height: 112.39%;
  max-width: none;
  object-fit: cover; /* Ausschnitt aus Figma, passt sich jeder Viewport-Höhe an */
}

.hero__brand {
  position: absolute;
  top: calc(47 * var(--px));
  left: 50%;
  translate: -50% 0;
}

/* Vertikale Lagen als Anteil der Hero-Höhe (Figma: 1158px) */
.hero__title {
  position: absolute;
  top: 43.3%;
  left: 50%;
  translate: -50% -50%;
  width: max-content;
  margin: 0;
  font-weight: 400;
  font-size: min(96 * var(--px), 8.9svh);
  line-height: .9375;
  text-align: center;
}

.hero__scroll {
  position: absolute;
  top: 69.4%;
  left: 50%;
  translate: -50% 0;
  padding: 8px;
  margin: -8px;
}

.hero__scroll img {
  width: max(16px, 21.388 * var(--px));
  height: auto;
}

/* Newsletter-Teaser unten rechts */
.teaser {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(688 * var(--px));
  height: calc(312 * var(--px));
  padding: calc(81 * var(--px)) calc(63 * var(--px));
  overflow: clip;
  background: var(--color-brand);
  animation: teaser-in 1s cubic-bezier(.22, 1, .36, 1) 1.2s both;
}

.teaser__text,
.teaser__btn {
  animation: teaser-content-in .7s ease-out 1.7s both;
}

@keyframes teaser-in {
  from { translate: 100% 0; }
}

@keyframes teaser-content-in {
  from { opacity: 0; translate: 24px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .teaser,
  .teaser__text,
  .teaser__btn { animation: none; }
}

.teaser__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: darken;
  pointer-events: none;
}

.teaser__text {
  position: relative;
  margin: 0;
  font-size: max(18px, 36 * var(--px));
  line-height: 1.1667;
}

.teaser__btn {
  position: relative;
  margin-top: calc(31.87 * var(--px));
}

/* ---------- Content (About, Newsletter, Footer) ---------- */

.content {
  position: relative;
  overflow: clip; /* nicht scrollbar, auch nicht per Ankersprung */
}

/* Gemeinsame Positionierung der Deko-Ebenen: x/y = Figma-Koordinaten ab Ende Hero */
.content__texture img,
.content__texture::after,
.about__palm,
.fabric img {
  position: absolute;
  left: calc(50% + (var(--x) - 960) * var(--px));
  top: calc((var(--y) - var(--y0, 0)) * var(--px) + var(--dy, 0px));
  width: calc(var(--w) * var(--px));
  height: calc(var(--h) * var(--px));
  max-width: none;
  pointer-events: none;
}

/* Über 1920px wachsen die Deko-Ebenen weiter mit, damit sie nicht im Bild enden.
   Sie skalieren um die Design-Höhe --yc, die an ihrer Stelle bleibt (--dy gleicht aus). */
.content__texture,
.about__palm,
.fabric {
  --px: calc(100vw / 1920);
  --dy: calc((var(--yc) - var(--y0, 0)) * (min(1px, 100vw / 1920) - 100vw / 1920));
}

.content__texture { --yc: 1274.84; }

.content__texture img {
  --x: -1138; --y: 1274.84; --w: 3256.487; --h: 2057.565;
  object-fit: cover;
  opacity: .8;
  mix-blend-mode: overlay;
}

.content__texture::after {
  --x: -208; --y: 1369.51; --w: 3125.438; --h: 1888.89;
  content: '';
  background: rgb(222 201 180 / .5);
}

.headline {
  margin: 0 auto;
  font-weight: 400;
  font-size: max(30px, 52 * var(--px));
  line-height: 1;
  color: var(--color-brand);
}

/* About */
.about {
  position: relative;
  overflow: clip;
  background: var(--color-sand);
}

.about__palm {
  --x: -485.44; --y: 1.92; --w: 2497.883; --h: 1394.081; --yc: 1.92;
  mix-blend-mode: lighten;
}

.about__palm img {
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}


.about__inner {
  position: relative;
  z-index: 2;
  padding: calc(315.44 * var(--px)) 16px calc(492 * var(--px));
  text-align: center;
  color: var(--color-brand);
}

.eyebrow {
  margin: 0;
  font-weight: 700;
  font-size: max(12px, 16 * var(--px));
  line-height: 1.25;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.about .headline {
  max-width: 14.95em;
  margin-top: calc(72 * var(--px));
}

.about__text {
  max-width: 42em;
  margin: calc(30.5 * var(--px)) auto 0;
  font-size: max(16px, 24 * var(--px));
  line-height: 2;
}

.about__btn { margin-top: calc(62 * var(--px)); }

/* Stoffbahnen über About/Newsletter */
.fabric {
  --yc: 1100; /* Kreuzungspunkt der Bahnen */
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.fabric__canvas { position: absolute; }
.fabric--webgl img { visibility: hidden; } /* bleiben als Maßvorlage und Fallback im DOM */

.fabric__1 { --x: -874;    --y: 764.49; --w: 3553.155; --h: 767.415; opacity: .5; }
.fabric__2 { --x: -655.55; --y: 881.7;  --w: 3033.239; --h: 494.528; opacity: .9; rotate: 21.39deg; }
.fabric__3 { --x: -483.53; --y: 737.24; --w: 3171.055; --h: 618.826; rotate: -23.54deg; }

/* Newsletter */
.newsletter {
  position: relative;
  z-index: 2;
  padding: calc(415.3 * var(--px)) 16px 0;
  text-align: center;
}

.newsletter__title { max-width: 16.85em; }

.newsletter__form {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  margin-top: calc(84 * var(--px));
}

.newsletter__input {
  width: max(200px, 427.651 * var(--px));
  min-width: 0;
  height: 2.4em;
  padding: 0 0 .75em;
  border: 0;
  border-bottom: 1px solid var(--color-brand);
  border-radius: 0;
  background: transparent;
  font: max(16px, 20 * var(--px)) / 1 var(--font-sans);
  color: var(--color-brand);
}

.newsletter__input::placeholder { color: var(--color-brand); opacity: 1; }

.newsletter__input:focus {
  outline: none;
  box-shadow: 0 1px 0 var(--color-brand);
}

.newsletter__status {
  margin: calc(84 * var(--px)) 0 0;
  font: max(16px, 20 * var(--px)) / 1.5 var(--font-sans);
  color: var(--color-brand);
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  z-index: 2;
  padding: calc(249.5 * var(--px)) 16px calc(142.7 * var(--px));
  text-align: center;
}

.footer__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: calc(93.2 * var(--px));
  font: 16px / 20px var(--font-sans);
}

.footer__nav a {
  color: var(--color-ink);
  text-decoration: none;
}

.footer__nav a:hover { text-decoration: underline; }

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .hero {
    --px: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 100svh;
  }

  .hero__bg img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 85% 50%;
  }

  .hero__brand,
  .hero__title,
  .hero__scroll {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
  }

  .hero__brand { margin-top: 32px; }

  .hero__title {
    margin: auto 0;
    padding: 48px 16px;
    font-size: 48px;
  }

  .hero__scroll { display: none; }

  .teaser {
    position: relative;
    width: 100%;
    height: auto;
    padding: 32px 24px;
  }

  .teaser__text { font-size: 26px; }
  .teaser__btn { margin-top: 20px; }

  .about__inner { padding: 96px 16px 48px; }

  /* Stoffbahnen als eigener Streifen zwischen About und Newsletter */
  .fabric {
    --px: .35px;
    --dy: 0px;
    --y0: 700;
    position: relative;
    inset: auto;
    height: 300px;
    margin-top: -60px;
  }

  .content__texture img,
  .content__texture::after {
    top: auto;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    width: max(100%, 1400px);
    height: 1400px;
  }

  .about .headline { margin-top: 32px; }
  .about__text { margin-top: 24px; line-height: 1.75; }
  .about__btn { margin-top: 40px; }

  .newsletter { padding-top: 24px; }
  .newsletter__form { flex-wrap: wrap; margin-top: 40px; }
  .newsletter__input { flex: 1 1 200px; }
  .footer { padding: 120px 16px 64px; }
  .footer__nav { margin-top: 48px; }
}

/* ---------- Einstieg nach dem Login (Klasse setzt das Skript im <head>) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .is-intro body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--color-sand);
    pointer-events: none;
    animation: intro-reveal 1.2s ease-out .1s forwards;
  }

  .is-intro .hero__bg img { animation: intro-settle 2.4s cubic-bezier(.22, 1, .36, 1) both; }
}

@keyframes intro-reveal {
  to { opacity: 0; visibility: hidden; }
}

@keyframes intro-settle {
  from { scale: 1.08; }
}