/* ==========================================================================
   Racket Arena – Landing Page
   Built from Figma "Racketarena_Webentwurf_28-09-2026" (frame 1:2, 1551px)
   ========================================================================== */

/* ---------- Fonts (self-hosted DM Sans variable, opsz 9–40 / wght 100–1000) */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens (Figma variables) */
:root {
  --c-black: #000;
  --c-white: #fff;
  --c-accent: #e7e003;        /* action/primary, text/accent */
  --c-accent-hover: #c0ba00;  /* Button / Variante2 */
  --c-gray: #767676;          /* text/gray */
  --c-black-50: rgba(0, 0, 0, 0.5);
  --c-border: rgba(0, 0, 0, 0.08);
  --c-surface-subtle: #f0eeea;

  --pad: 64px;
  --container: 1280px;

  /* 72px / 52px at ≥1408px viewport (where the 1280 container is reached) */
  --fs-section: clamp(36px, 5.114vw, 72px);
  --fs-intro: clamp(28px, 3.693vw, 52px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 1023px) {
  :root { --pad: 40px; }
}
@media (max-width: 639px) {
  :root { --pad: 20px; }
}

/* ---------- Base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--c-white);
  color: var(--c-black);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, figure, blockquote, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

::selection { background: var(--c-accent); color: var(--c-black); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-black);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

.container {
  width: min(var(--container), 100% - 2 * var(--pad));
  margin-inline: auto;
}

@media (max-width: 767px) {
  .br-lg { display: none; }
}

/* ---------- Typography (Figma text styles) */
.t-label {            /* Label: 12/16, SemiBold, +2.4 */
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.t-section {          /* Heading/Section: 72/75, ExtraBold, -2.16 */
  font-size: var(--fs-section);
  line-height: 1.0417;
  font-weight: 800;
  letter-spacing: -0.03em;
  /* Figma pins these headings to the 14pt optical size; every other
     text node uses automatic optical sizing (the browser default). */
  font-variation-settings: "opsz" 14;
}
.t-intro {            /* Heading/Intro: 52/47, ExtraBold, -1.04 */
  font-size: var(--fs-intro);
  line-height: 0.9038;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.t-body {             /* Body: 16/28, 9pt Regular */
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}
.t-action {           /* Action/Primary: 14/20, Bold, +1.68 */
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.c-gray { color: var(--c-gray); }
.c-black-50 { color: var(--c-black-50); }

/* ---------- Button (component "Button"; hover/press from Webentwurf 02-10-2026) */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-black);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.35s var(--ease-spring);
}
.btn:hover {
  background: #f4ed00;
  box-shadow: 0 0 0 3px rgba(231, 224, 3, 0.33), 0 4px 14px rgba(0, 0, 0, 0.07);
}
.btn:active {
  background: #d7d000;
  box-shadow: 0 0 0 2px rgba(231, 224, 3, 0.33);
  transform: scale(0.96);
}
.btn:focus-visible { outline-color: var(--c-accent); }

/* hover sweep: a white band slides across behind the label */
@media (prefers-reduced-motion: no-preference) {
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--c-white);
    transform: translateX(-105%) skewX(-20deg);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .btn:hover::before { transform: translateX(105%) skewX(-20deg); }
}

/* ---------- Bullet list (List Item / Sport, List Item / Location) */
.bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding-top: 8px;
  white-space: nowrap;
}
.bullets li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-accent);
}
.bullets li:first-child { padding-top: 0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  /* Vertical space kept free around the headline: 288px above it (logo)
     + 128px below it (spacing + badge) at a 944px-tall viewport, which is
     exactly the Figma layout. On shorter viewports the space above shrinks
     and the headline scales down instead of the hero growing past one screen. */
  --hero-reserve: min(416px, 180px + 25vh);
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-white);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  left: 0;
  top: -11.18%;
  width: 132.41%;
  height: 122.37%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 100%);
}

.hero__inner {
  position: relative;
  height: 100%;
}

.hero__logo {
  position: absolute;
  top: 16px;
  left: -10.5px;
  width: 198px;
}
.hero__logo img { width: 100%; }

.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 62px; /* the 34px badge overhangs its 32px "Hero Meta" frame by 2px */
}

.hero__title {
  max-width: 1061px;
  padding-bottom: 32px;
  overflow: hidden;
  /* Display/Hero: 200/176, Black, -6 — scales down so "BEGEGNEN." fits the
     width and the three lines (2.64em) fit the viewport height */
  font-size: max(40px, min(200px, (100vw - 2 * var(--pad)) / 5.3, (100vh - var(--hero-reserve)) / 2.64));
  font-size: max(40px, min(200px, (100vw - 2 * var(--pad)) / 5.3, (100svh - var(--hero-reserve)) / 2.64));
  line-height: 0.88;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__line {
  display: block;
  overflow: hidden;
}
.hero__line-in { display: block; }
.hero__dot {
  display: inline-block;
  color: var(--c-accent);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 1px solid var(--c-accent);
  border-radius: 999px;
  color: var(--c-accent);
}

@media (max-width: 1023px) {
  .hero { --hero-reserve: 270px; }
  .hero__logo { width: 150px; top: 8px; left: -8px; }
  .hero__content { bottom: 40px; }
}
@media (max-width: 639px) {
  .hero { --hero-reserve: 250px; }
  .hero__logo { width: 128px; top: 4px; left: -7px; }
  .hero__title { padding-bottom: 24px; }
  .hero__badge {
    padding: 7px 16px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
}
/* Short viewports (landscape phones, small laptop windows) */
@media (max-height: 560px) {
  .hero { --hero-reserve: 210px; }
  .hero__logo { width: 112px; top: 0; left: -6px; }
  .hero__content { bottom: 28px; }
  .hero__title { padding-bottom: 20px; }
}

/* ==========================================================================
   Yellow gradient glow (Figma image fill on "Intro & Countdown Gradient",
   object-fit: cover across both sections)
   ========================================================================== */
.glow-bg {
  background: url("../img/section-gradient.jpg") 50% 50% / cover no-repeat;
}

/* ==========================================================================
   Intro
   ========================================================================== */
.intro {
  padding: 80px 0 118px;
  border-bottom: 1px solid var(--c-border);
}
.intro__text { max-width: 1281px; }

@media (max-width: 1023px) {
  .intro { padding: 72px 0 80px; }
}
@media (max-width: 639px) {
  .intro { padding: 56px 0 64px; }
}

/* ==========================================================================
   Countdown
   ========================================================================== */
.countdown {
  padding: 64px 0;
  border-bottom: 1px solid var(--c-border);
}
.countdown__row {
  display: flex;
  align-items: flex-end;
  gap: min(56px, 3.977vw);
  padding-top: 0.3636em;
  /* Display/Metric: 110/110 — every row measurement is in em of this */
  font-size: clamp(40px, 7.8125vw, 110px);
}
.countdown__unit {
  flex: 1 1 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.countdown__unit--days {
  flex: none;
  width: 1.7364em; /* 191px */
}
.countdown__num {
  font-size: 1em;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  /* CSS tracks after the last glyph, Figma doesn't: restore the centring */
  padding-right: 0.04em;
  white-space: nowrap;
}
.countdown__label {
  padding-top: 4px;
  color: var(--c-gray);
  white-space: nowrap;
}
.countdown__sep {
  flex: 1 1 0;
  min-width: 1px;
  display: flex;
  justify-content: center;
  /* Display/Separator: 90/135, Thin */
  font-size: 0.8182em;
  line-height: 1.5;
  padding-bottom: 0.2222em;
  font-weight: 100;
  color: var(--c-gray);
}

@media (max-width: 639px) {
  .countdown { padding: 48px 0; }
  .countdown__label { font-size: 10px; letter-spacing: 0.14em; }
}

/* ==========================================================================
   Konzept / Sports
   ========================================================================== */
.sports {
  min-height: 776px;
  padding: 80px 0;
  background: var(--c-white);
}
.sports__grid {
  display: flex;
  align-items: flex-start;
}
.sports__text {
  flex: 0 1 608px;
  min-width: 420px;
}
.sports__title { margin-top: 20px; }
.sports__list {
  height: 112px;
  padding-top: 24px;
}
.sports__list li:first-child { height: 28px; }
.sports__cta { margin-top: 20px; }

.sports__plan {
  flex: 0 1 661.48px;
  min-width: 0;
}
.sports__plan-in { display: block; }
.sports__plan img {
  width: 100%;
  aspect-ratio: 661.48 / 492.85;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sports__plan:hover img { transform: scale(1.035) rotate(0.4deg); }
}

@media (max-width: 1100px) {
  .sports { min-height: 0; }
  .sports__grid { flex-direction: column; }
  .sports__text { flex: none; min-width: 0; width: 100%; }
  .sports__plan {
    flex: none;
    align-self: center;
    width: 100%;
    max-width: 661.48px;
    margin-top: 48px;
  }
}
@media (max-width: 639px) {
  .sports { padding: 64px 0; }
  .sports__plan { margin-top: 32px; }
}

/* ==========================================================================
   Standort / Location
   ========================================================================== */
.location {
  padding: 80px var(--pad);
  background: var(--c-black);
  color: var(--c-white);
}
.location__inner {
  display: flex;
  align-items: flex-start;
  max-width: 1423px;
  margin-inline: auto;
}
.location__map {
  flex: 1 1 0;
  min-width: 0;
  height: 643px;
  overflow: hidden;
}
.location__map img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .location__map:hover img { transform: scale(1.035); }
}
.location__text {
  flex: 0 0 674px;
  min-height: 643px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
}
.location__title {
  max-width: 608px;
  margin-top: 20px;
}
.location__address { color: var(--c-accent); }
.location__list { padding-top: 24px; }
.location__list li:first-child { height: 24px; }

@media (max-width: 1100px) {
  .location__inner { flex-direction: column; }
  .location__text {
    order: -1;
    flex: none;
    width: 100%;
    min-height: 0;
  }
  .location__map {
    flex: none;
    width: 100%;
    height: auto;
    margin-top: 56px;
  }
  .location__map img {
    width: min(404.7px, 100%);
    height: auto;
    aspect-ratio: 995 / 1581;
    margin-inline: auto;
  }
}
@media (max-width: 639px) {
  .location { padding-block: 64px; }
  .location__list li { white-space: normal; height: auto; min-height: 32px; }
  .location__list li:first-child { min-height: 24px; }
}

/* ==========================================================================
   Für die Gemeinschaft / Community
   ========================================================================== */
.community {
  position: relative;
  z-index: 2; /* the 100% badge overlaps into the next section */
  padding: 80px 0;
}
.community__inner { position: relative; }

/* Same gradient, flipped on both axes (Figma: negative width/height), so the
   glow sits in the bottom-left corner. Box = 1551 × 1124.6 at the design
   size, sized from the section width and anchored to its bottom edge. */
.community__glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.community__glow img {
  position: absolute;
  left: -25.96%;
  bottom: 0;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1551 / 1124.6;
  transform: translateY(25.92%) rotate(180deg);
}
.community__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
}
.community__head .t-section { font-variation-settings: normal; }
.community__head {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.community__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 536px;
}
.community__body p + p { margin-top: 28px; }
.community__tags strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Collage: bild2, Bild1 and the 100% badge, positioned as in Figma.
   Origin = left edge of Bild1 / top edge of bild2; 534 × 721 box. */
.collage {
  position: absolute;
  top: 0;
  right: -12.5px;
  width: min(534px, 37.93vw);
  aspect-ratio: 534 / 721;
}
.collage__photo {
  position: absolute;
  overflow: hidden;
}
.collage__photo--pair {
  left: 36.33%;
  top: 0;
  width: 61.42%;
  height: 54.09%;
}
.collage__photo--pair img {
  position: absolute;
  left: -15.54%;
  top: -20.96%;
  width: 124.27%;
  height: 130.59%;
  max-width: none;
}
.collage__photo--kid {
  left: 0;
  top: 39.81%;
  width: 50.37%;
  height: 37.31%;
}
.collage__photo--kid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge {
  position: absolute;
  left: 34.46%;
  top: 62.41%;
  width: 65.54%;
  aspect-ratio: 1;
}
.badge__hit {
  position: absolute;
  left: 22.6%;
  top: 22.6%;
  width: 54.8%;
  height: 54.8%;
  z-index: 1;
  border-radius: 50%;
  cursor: pointer;
}
.badge__img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: transform 0.7s var(--ease-spring);
}
/* "Rectangle 1" / Variante2: 530px, rotated -15.92° */
.badge__hit:hover + .badge__img,
.badge__hit:focus-visible + .badge__img {
  transform: scale(1.5143) rotate(-15.92deg);
}
.badge__hit:focus-visible { outline-offset: 6px; }

@media (max-width: 1100px) {
  .collage {
    position: relative;
    right: auto;
    width: min(534px, 100%);
    margin: 56px auto 0;
  }
}

/* ==========================================================================
   Wer steckt dahinter? / About + Team
   ========================================================================== */
.about {
  padding: 80px 0;
  overflow-x: clip;
  background: var(--c-surface-subtle);
}
.about__title { margin-top: 20px; }
.about__lead {
  max-width: 672px;
  margin-top: 20px;
}
.about__quote {
  max-width: 1281px;
  margin-top: 35px;
}

/* Grid: Figma auto-layout with wrap, gap -65, padding 89/48 */
.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1455px;
  margin: 93px auto 0;
  padding-left: 41px;
}

/* Team Card (Standard 504×339 / Variante2 = expanded) */
.team-card {
  --cw: 504px;
  position: relative;
  width: var(--cw);
  min-height: calc(var(--cw) * 0.67262);
  margin: 0 -32.5px;
  container-type: inline-size;
}

.team-card__glow {
  position: absolute;
  inset: 15.39% 43.36% 20.38% 1.95%;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
  pointer-events: none;
}
.team-card__glow-shape {
  position: relative;
  flex: none;
  width: 154.2px;
  height: 199.4px;
  width: hypot(48.0785cqw, 36.2273cqh);
  height: hypot(51.9215cqw, 63.7727cqh);
  transform: rotate(-30.76deg) skewX(15.1deg);
  transition: transform 0.8s var(--ease-out);
}
.team-card__glow-img {
  position: absolute;
  inset: -49.37% -63.84%;
  transition: opacity 0.6s ease;
}
.team-card__glow-img img {
  width: 100%;
  height: 100%;
  max-width: none;
}
.team-card__glow-img--open {
  inset: -38.88% -55.34%;
  opacity: 0;
}
.team-card.is-open .team-card__glow-shape { transform: rotate(-41.84deg) skewX(-7.43deg); }
.team-card.is-open .team-card__glow-img--open { opacity: 1; }
.team-card.is-open .team-card__glow-img--closed { opacity: 0; }

.team-card__photo {
  position: absolute;
  left: 9.33%;
  top: 12.5cqw;
  width: 53.49%;
  aspect-ratio: 355 / 262;
}

.team-card__body {
  position: relative;
  width: 78.968cqw;
  margin-left: 9.325cqw;
  padding-top: 15.079cqw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11.111cqw;
}
.team-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.794cqw;
}
.team-card__name {
  font-size: 10.317cqw;
  line-height: 0.9038;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: pre;
}
.team-card__role {
  min-height: 2.6667em;
  margin-right: -0.2em; /* drop trailing tracking so the block right-aligns like Figma */
  font-size: max(10px, 2.381cqw);
  line-height: 1.3333;
  white-space: nowrap;
}

.team-card__statement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.team-card__bubble {
  flex: 1 1 0;
  min-width: 1px;
  height: 45px;
  overflow: hidden;
  padding: 10px 14px 14px;
  border-radius: 0 22px 22px 22px;
  background: var(--c-black);
  color: var(--c-white);
  transition: height 0.6s var(--ease-out);
}
.team-card__toggle {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-black);
  cursor: pointer;
  transition: transform 0.35s var(--ease-spring);
}
.team-card__toggle:hover { transform: scale(1.08); }
.team-card__toggle:active { transform: scale(0.94); }
.team-card__toggle img {
  grid-area: 1 / 1;
  max-width: none;
  transition: transform 0.45s var(--ease-out), opacity 0.2s ease;
}
.team-card__toggle .icon-minus { opacity: 0; }
.team-card.is-open .icon-plus {
  transform: rotate(90deg);
  opacity: 0;
  transition-delay: 0s, 0.25s;
}
.team-card.is-open .icon-minus {
  opacity: 1;
  transition-delay: 0s, 0.25s;
}

@media (max-width: 1023px) {
  .team { padding-left: 0; max-width: none; }
}
@media (max-width: 560px) {
  .team {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 64px;
  }
  .team-card {
    /* scale so the visible content (398/504 of the card) spans the content
       width, and shift it so that content starts on the page gutter */
    --cw: min(504px, (100vw - 2 * var(--pad)) * 1.26633);
    margin: 0 0 0 calc(var(--pad) - var(--cw) * 0.09325);
  }
}

/* ==========================================================================
   Foto-Band (component "Updates & Contact" / Standard → Variante2 zoom)
   ========================================================================== */
.photo-band {
  position: relative;
  height: clamp(300px, 32.977vw, 511.47px);
  overflow: hidden;
}
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--c-border);
}
.photo-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55.45%;
  transform-origin: 50% 46.155%;
  transform: scale(var(--zoom, 1));
}

/* ==========================================================================
   Updates & Kontakt
   ========================================================================== */
.cta {
  padding: 80px 0 58.5px;
  border-top: 1px solid var(--c-border);
}
.cta__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 64px;
}
.cta__title { margin-top: 20px; }
.cta__text {
  max-width: 608px;
  margin-top: 24px;
  color: var(--c-gray);
}
.cta__btn { margin-top: 32px; }

.subscribe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(533px, 100%);
  height: 46px;
  margin-top: 32px;
  padding-left: 20px;
  overflow: hidden;
  border: 1px solid var(--c-surface-subtle);
  border-radius: 167px;
  transition: border-color 0.25s ease;
}
.subscribe:focus-within { border-color: var(--c-accent); }
.subscribe__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 12px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  line-height: 28px;
}
.subscribe__input::placeholder {
  color: var(--c-gray);
  opacity: 1;
}
.subscribe .btn { flex: none; }
.subscribe .btn:hover { box-shadow: none; }
.subscribe .btn:disabled {
  background: var(--c-accent-hover);
  cursor: progress;
}
.subscribe__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.subscribe__status {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--c-black);
  animation: status-in 0.5s var(--ease-out);
}
.subscribe__status.is-error { color: #c62828; }
@keyframes status-in {
  from { opacity: 0; transform: translateY(-4px); }
}

.legal {
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  color: var(--c-gray);
}
.legal a {
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

@media (max-width: 900px) {
  .cta__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .cta { padding: 64px 0; }
  .subscribe .btn { padding: 0 18px; letter-spacing: 0.08em; }
}

/* ==========================================================================
   Legal pages (Impressum, Datenschutzerklärung)
   ========================================================================== */
.topbar {
  height: 50px;
  background: var(--c-black);
}

.legal-page {
  position: relative;
  padding: 80px var(--pad) 202px;
}
.legal-page__glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.legal-page__glow img {
  position: absolute;
  top: 0;
  max-width: none;
  height: auto;
}
/* Figma image fill: 100% × 117.88% at left 21.4% / top -27.85% of 1551 × 1001 */
.legal-page--impressum .legal-page__glow img {
  left: 21.4%;
  width: 100%;
  aspect-ratio: 1551 / 1180;
  transform: translateY(-23.63%);
}
/* Figma image fill: 120.84% × 41.22% at left 2.29% / top -9.08% of 1551 × 2331 */
.legal-page--datenschutz .legal-page__glow img {
  left: 2.29%;
  width: 120.84%;
  aspect-ratio: 1874.2 / 960.8;
  transform: translateY(-22.03%);
}

.legal-page__inner {
  position: relative;
  max-width: 1423px;
  margin-inline: auto;
}
.legal-page__head {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding-right: 72px; /* keep long titles clear of the close button */
}
.legal-page__title {
  font-variation-settings: normal; /* auto optical size, as in Figma */
  /* "Datenschutzerklärung" is ~9.5em wide: shrink before it can overflow */
  font-size: min(var(--fs-section), (100vw - 2 * var(--pad)) / 9.6);
}
.legal-page__title--caps { text-transform: uppercase; }

.legal-page__close {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 10;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transition: transform 0.45s var(--ease-spring);
}
.legal-page__close img { width: 100%; height: 100%; }
.legal-page__close:hover { transform: rotate(90deg) scale(1.06); }
.legal-page__close:active { transform: rotate(90deg) scale(0.94); }

.legal-page__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: 83px;
}
.legal-page__text { max-width: 536px; }
.legal-page__text--wide { max-width: 858px; }
.legal-page__text h2 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.legal-page__text * + h2 { margin-top: 28px; }
/* Figma gives the first line of the text block a 24px line box */
.legal-page__text > h2:first-child { margin-bottom: 4px; }
.legal-page__text a {
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}
.legal-page__text a:hover { color: var(--c-gray); }

@media (max-width: 639px) {
  .legal-page { padding-block: 64px 120px; }
  .legal-page__close { width: 44px; height: 44px; }
  .legal-page__head { padding-right: 0; }
  .legal-page__body { margin-top: 56px; }
  .legal-page__text { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  padding: 32px 0;
  background: var(--c-black);
  color: var(--c-white);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 143px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer__logo {
  position: relative;
  flex: none;
  display: block;
  width: 144px;
  height: 127px;
  overflow: hidden;
}
.footer__logo img {
  position: absolute;
  left: -0.14%;
  top: -28.04%;
  width: 100%;
  height: 113.39%;
  max-width: none;
}
.footer__address { white-space: nowrap; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__nav {
  display: flex;
  gap: 24px;
  align-self: flex-start;
  margin-top: 63.5px;
  margin-right: -44.5px;
}

@media (max-width: 1407px) {
  .footer__nav { margin-right: 0; }
}
@media (max-width: 767px) {
  .footer { padding: 32px 0 40px; }
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer__brand { flex-wrap: wrap; }
  .footer__logo { margin-left: -14px; }
  .footer__nav { align-self: flex-start; margin: 0; }
}

/* ==========================================================================
   Motion — reveals, hero intro, parallax
   Everything below is opt-in via the .js class and disabled for
   prefers-reduced-motion, so the static layout always equals the design.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* -- generic fade-up */
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
      opacity 0.9s var(--ease-out) var(--d, 0ms),
      transform 1.2s var(--ease-out) var(--d, 0ms);
  }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* -- fade only */
  .js [data-reveal="fade"] { transform: none; }

  /* -- image wipe (bottom → top) with settle-in zoom */
  .js [data-reveal="wipe"] {
    opacity: 1;
    transform: none;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.4s var(--ease-out) var(--d, 0ms);
  }
  .js [data-reveal="wipe"] > img {
    transform: scale(1.2);
    transition: transform 1.9s var(--ease-out) var(--d, 0ms);
  }
  .js [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }
  .js [data-reveal="wipe"].is-in > img { transform: none; }

  /* -- map: draw down from the top */
  .js [data-reveal="draw"] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.8s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0ms);
  }
  .js [data-reveal="draw"].is-in { clip-path: inset(0 0 0 0); }

  /* -- site plan: Figma Variante2 (94%) → Standard */
  .js [data-reveal="plan"] {
    transform: scale(0.941) translate3d(0, 24px, 0);
    transition:
      opacity 1s var(--ease-out) var(--d, 0ms),
      transform 1.6s var(--ease-out) var(--d, 0ms);
  }

  /* -- 100% badge pop */
  .js [data-reveal="pop"] {
    transform: scale(0.3) rotate(-60deg);
    transition:
      opacity 0.5s ease var(--d, 0ms),
      transform 1.1s var(--ease-spring) var(--d, 0ms);
  }

  /* -- team card: rise + glow bloom */
  .js .team-card[data-reveal] .team-card__glow {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 1.2s ease, transform 1.4s var(--ease-out);
    transition-delay: calc(var(--d, 0ms) + 150ms);
  }
  .js .team-card[data-reveal].is-in .team-card__glow {
    opacity: 1;
    transform: none;
  }

  /* -- line-by-line heading reveal (see splitLines() in main.js) */
  .js [data-split] .split-line {
    display: block;
    clip-path: inset(-0.35em -1em -0.18em -1em);
  }
  .js [data-split] .split-line-in {
    display: block;
    transform: translate3d(0, calc(100% + 0.45em), 0);
    transition: transform 1.15s var(--ease-out);
    transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 95ms);
  }
  .js [data-split].is-in .split-line-in { transform: none; }
  .js [data-split]:not(.is-split) { visibility: hidden; }

  /* -- hero intro (Hero Heading Standard → Variante2) */
  .js .hero__img {
    opacity: 0;
    transform: scale(1.12);
    transition: opacity 1.4s ease, transform 2.6s var(--ease-out);
  }
  .js .hero__logo {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
    transition: opacity 1s ease 0.35s, transform 1.2s var(--ease-out) 0.35s;
  }
  .js .hero__line-in {
    transform: translate3d(0, 105%, 0);
    transition: transform 1.25s var(--ease-out);
  }
  .js .hero__line:nth-child(1) .hero__line-in { transition-delay: 0.45s; }
  .js .hero__line:nth-child(2) .hero__line-in { transition-delay: 0.57s; }
  .js .hero__line:nth-child(3) .hero__line-in { transition-delay: 0.69s; }
  .js .hero__dot {
    transform: scale(0);
    transform-origin: 50% 80%;
    transition: transform 0.7s var(--ease-spring);
  }
  .js .hero__line:nth-child(1) .hero__dot { transition-delay: 1.05s; }
  .js .hero__line:nth-child(2) .hero__dot { transition-delay: 1.15s; }
  .js .hero__line:nth-child(3) .hero__dot { transition-delay: 1.25s; }
  .js .hero__badge {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.9s ease 1.1s, transform 1.1s var(--ease-out) 1.1s;
  }
  .js.is-loaded .hero__img { opacity: 1; transform: none; }
  .js.is-loaded .hero__logo,
  .js.is-loaded .hero__line-in,
  .js.is-loaded .hero__dot,
  .js.is-loaded .hero__badge { opacity: 1; transform: none; }

  /* -- scroll-linked parallax (JS writes --py) */
  [data-parallax] { translate: 0 var(--py, 0px); }
  .hero__parallax {
    position: absolute;
    inset: 0;
    translate: 0 var(--py, 0px);
  }
  .hero__content { translate: 0 var(--py-content, 0px); opacity: var(--hero-fade, 1); }
}

.hero__parallax { position: absolute; inset: 0; }