/* ============================================================
   Section-Pattern — gemeinsame Struktur fuer alle Sektionen
   ============================================================ */

.section {
  position: relative;
  padding-block: clamp(4rem, 6vw + 2rem, 7rem);
  background: var(--color-white);
}

/* Alternierende Hintergruende */
.section--leistungen {
  background: var(--color-dark);
  color: var(--color-bg-light);
  position: relative;
  overflow: hidden;
  /* Mehr Atemluft als die anderen Sections — Tabs + Workflow brauchen Raum */
  padding-block: clamp(5.5rem, 8vw + 2rem, 10rem);
}

.section--leistungen .section__header {
  margin-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.section--materialien,
.section--praxis,
.section--faq {
  background: var(--color-bg-light);
}

/* Bauteil-Silhouette als Ghost-BG in der Materialien-Section */
.section--materialien {
  position: relative;
  overflow: hidden;
}

.section--materialien::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: clamp(360px, 50vw, 720px);
  aspect-ratio: 4 / 3;
  background-image: url('../img/bauteil-silhouette.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.section--materialien .section__container {
  position: relative;
  z-index: 1;
}

@media (max-width: 880px) {
  .section--materialien::before { display: none; }
  /* Technologien-Hintergrund-Pattern auf Mobile reduzieren — wirkt sonst noisy */
  .section--technologien::after {
    opacity: 0.5;
  }
  /* Padding-Block auf Mobile etwas kompakter, Vertikalraum knapp */
  .section {
    padding-block: clamp(3rem, 8vw, 5rem);
  }
  .section--leistungen {
    padding-block: clamp(3.5rem, 9vw, 6rem);
  }
  .section--technologien {
    padding-block: clamp(3.5rem, 9vw, 6rem) clamp(4rem, 10vw, 7rem);
  }
  .section__header {
    margin-bottom: clamp(2rem, 6vw, 3rem);
  }
  .section--leistungen .section__header {
    margin-bottom: clamp(2.5rem, 7vw, 4rem);
  }
}

/* Technologien — weiss oben, grauer Block hinter den Cards.
   Erzeugt einen "lifted"-Effekt: Karten sitzen auf der Kante */
.section--technologien {
  position: relative;
  background: var(--color-white);
  overflow: hidden;
  /* Mehr Luft, vor allem unten — laesst den CTA atmen */
  padding-block: clamp(5rem, 7vw + 2rem, 9rem) clamp(7rem, 10vw + 2rem, 12rem);
}

.section--technologien::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90%;
  background:
    linear-gradient(
      to bottom,
      rgba(228, 232, 238, 0) 0%,
      #E4E8EE 25%,
      #E4E8EE 100%
    );
  z-index: 0;
}

/* Millimeterpapier — weisse Linien als technischer Akzent ueber dem grauen Block */
.section--technologien::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75%;
  background-image:
    /* Hauptlinien (jeden 80px) */
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 79px,
      rgba(255, 255, 255, 0.85) 79px,
      rgba(255, 255, 255, 0.85) 80px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 79px,
      rgba(255, 255, 255, 0.85) 79px,
      rgba(255, 255, 255, 0.85) 80px
    ),
    /* Feine Linien (jeden 16px) */
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 15px,
      rgba(255, 255, 255, 0.4) 15px,
      rgba(255, 255, 255, 0.4) 16px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 15px,
      rgba(255, 255, 255, 0.4) 15px,
      rgba(255, 255, 255, 0.4) 16px
    );
  /* Sanft auslaufen oben + unten damit das Pattern nicht hart abkantet */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  z-index: 0;
  pointer-events: none;
}

.section--technologien .section__container {
  position: relative;
  z-index: 1;
}

.section--warum {
  background: var(--color-text-strong);
  color: var(--color-bg-light);
}

.section--testimonials {
  background: var(--color-bg-light-warm);
}

.section--kontakt {
  background: var(--color-bg-light);
}

.section__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section__container--narrow {
  max-width: 920px;
}

.section__header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 760px;
}

.section__eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-green);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.section__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
}

.section--warum .section__eyebrow,
.section--leistungen .section__eyebrow {
  color: var(--color-green-glow);
}

.section__title {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: var(--fs-display-lg);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text-strong);
  margin-bottom: var(--space-md);
}

.section--warum .section__title,
.section--leistungen .section__title {
  color: var(--color-bg-light);
}

.section__lead {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--color-text);
  max-width: 60ch;
}

.section--warum .section__lead,
.section--leistungen .section__lead {
  color: rgba(243, 245, 248, 0.78);
}

/* ---------- Reveal Animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Word-Reveal: Headlines wortweise einfaden ---------- */

.word-reveal__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}

.word-reveal__inner {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease;
  transition-delay: calc(var(--word-i, 0) * 60ms);
}

.word-reveal.is-revealed .word-reveal__inner {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .word-reveal__inner {
    transform: none;
    opacity: 1;
    transition: none;
  }
}