/* ==========================================================================
   Startseite /
   Alle Masse sind am Original gemessen (Chromium, 1920 und 390 CSS-Pixel,
   bestand-inhalt/net/home-*.json + Nachmessung im wget-Mirror).

   Das Original ist ein WordPress-Block-Theme: jede Sektion ist eine Kette aus
   Bloecken mit block-gap dazwischen und expliziten Spacer-Divs. Hier sind die
   Spacer in Margins aufgeloest - deshalb tauchen Ausdruecke wie
   calc(50px + 2 * var(--space-20)) auf. Die feste Komponente ist der Spacer
   (im Original px-fest), die var-Komponente ist der viewport-abhaengige
   block-gap. Nur so stimmen Desktop UND Mobile gleichzeitig.

   Ableitungen:
     var(--space-20)          = block-gap                 20px / 7,8px
     var(--space-40)          = root padding inline       60px / 23,4px
     calc(var(--space-40) / 2) = Sektions-Padding block   30px / 11,7px
     calc(var(--space-40) / 4) = Viertel-Spacer           15px / 5,85px
   ========================================================================== */

.home {
  /* Zwei Schriftgroessen des Originals, die nicht in tokens.css stehen. */
  --fs-hero-claim: clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.986), 30px);
  --fs-lead: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 18px);

  --section-pad-block: calc(var(--space-40) / 2);
  --spacer-quarter: calc(var(--space-40) / 4);
}

/* --------------------------------------------------------------------------
   1. Hero - cover, alignfull, 751px Desktop / 679px Mobile.
   Hoehe entsteht aus dem Inhalt, nicht aus min-height (das Original setzt
   min-height per Inline-Style auf "unset").
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--space-20);
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Gemessen am Original - legt den Bildausschnitt fest. */
  object-position: 54% 39%;
}

.hero__inner {
  padding-inline: var(--space-40);
}

.hero__inner > * {
  max-width: var(--container-md); /* 1100px */
  margin-inline: auto;
}

.hero__title,
.hero__lead {
  color: var(--color-theme-5);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/* Spacer 100px + block-gap */
.hero__title {
  margin-top: calc(100px + var(--space-20));
}

.hero__lead {
  margin-top: var(--space-20);
}

/* Spacer 50px, davor und dahinter je ein block-gap */
.hero__claim {
  margin-top: calc(50px + 2 * var(--space-20));
  color: var(--color-theme-5);
  font-size: var(--fs-hero-claim);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
}

/* Spacer 20px, davor und dahinter je ein block-gap. Die Siegel-Gruppe ist im
   Original alignfull und bricht aus der 1100px-Spalte auf die volle
   Innenbreite aus. */
.hero__seals {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  max-width: none;
  margin-top: calc(20px + 2 * var(--space-20));
}

.hero__seals picture {
  display: block;
  min-width: 0;
}

.hero__seal {
  display: block;
  height: auto;
}

.hero__seal--plusx { width: 123px; }
.hero__seal--iso   { width: 217px; object-fit: contain; }

/* --------------------------------------------------------------------------
   2. Unsere Loesungen (#Leistungen)
   Weiss mit dezentem Wasserzeichen, 820px Desktop.
   -------------------------------------------------------------------------- */

.loesungen {
  background-color: var(--color-theme-1);
  background-image: url('/img/home-loesungen-bg.webp');
  background-image: image-set(
    url('/img/home-loesungen-bg.avif') type('image/avif'),
    url('/img/home-loesungen-bg.webp') type('image/webp')
  );
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  padding-inline: var(--space-40);
  padding-top: var(--section-pad-block);
  /* Abschluss-Spacer 100px + block-gap + Sektions-Padding */
  padding-bottom: calc(100px + var(--space-20) + var(--section-pad-block));
}

.loesungen__title {
  max-width: var(--container-content); /* 620px */
  font-weight: var(--fw-bold);
  /* Spacer var(--space-20) + block-gap */
  margin: calc(2 * var(--space-20)) auto 0;
  text-align: center;
}

.loesungen__intro {
  max-width: var(--container-content);
  margin: var(--space-20) auto 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  text-align: center;
}

.loesungen__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-40) var(--space-30);
  max-width: var(--container-wide); /* 1440px */
  /* Spacer 50px, davor und dahinter je ein block-gap */
  margin: calc(50px + 2 * var(--space-20)) auto 0;
}

/* Das Original haengt an jeder Spalte ein padding-right - dadurch ist die
   Textspalte 660px statt 700px breit. */
.loesung {
  padding-right: var(--space-30);
}

/* In der Gewerbe-Spalte steht im Original ein leerer <p>-Block. Er ist
   unsichtbar, verlaengert die Spalte aber um einen block-gap und macht damit
   die ganze Sektion 20px hoeher. Statt des leeren Absatzes hier als Abstand. */
.loesungen__cols > .loesung:first-child {
  padding-bottom: var(--space-20);
}

.loesung__img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: cover;
}

.loesung__name {
  margin-top: var(--space-20);
  text-align: center;
}

.loesung__text {
  margin-top: var(--space-20);
  /* UMZUGSPLAN A7: Original #7c7c7c = 4,17:1. #767676 = 4,55:1, optisch gleich. */
  color: #767676;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

@media (max-width: 781px) {
  .loesungen__cols {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   3./6./8. Video-Sektionen
   Identischer Aufbau: H2 zentriert, darunter das Video, beides 1300px breit.
   -------------------------------------------------------------------------- */

.video-section {
  margin-top: var(--space-20);
  padding-inline: var(--space-40);
  /* Spacer 50px + block-gap, oben wie unten */
  padding-block: calc(50px + var(--space-20));
}

.video-section__inner {
  max-width: var(--container-lg); /* 1300px */
  margin-inline: auto;
}

.video-section__title {
  font-weight: var(--fw-bold);
  text-align: center;
}

.video {
  /* Spacer 50px, davor und dahinter je ein block-gap */
  margin: calc(50px + 2 * var(--space-20)) 0 0;
}

.video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: var(--color-theme-5);
}

/* --------------------------------------------------------------------------
   4. Referenzen - drei Kundenlogos, nicht verlinkt.
   -------------------------------------------------------------------------- */

.referenzen {
  background-color: var(--color-theme-1);
  padding-inline: var(--space-40);
  padding-top: var(--section-pad-block);
  padding-bottom: calc(100px + var(--space-20) + var(--section-pad-block));
}

.referenzen__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
}

.referenzen__title {
  font-weight: var(--fw-bold);
  /* Viertel-Spacer + block-gap */
  margin-top: calc(var(--spacer-quarter) + var(--space-20));
  text-align: center;
}

/* Die H2 laeuft ueber die volle 1440px-Spalte, Intro und Logos stehen im
   620px-Textcontainer - im Original genau so. */
.referenzen__intro {
  max-width: var(--container-content);
  margin: var(--space-20) auto 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  text-align: center;
}

.referenzen__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--space-50);
  max-width: var(--container-content); /* 620px */
  /* block-gap + Viertel-Spacer + block-gap */
  margin: calc(var(--spacer-quarter) + 2 * var(--space-20)) auto 0;
  padding: 0;
  font-size: var(--fs-body);
  list-style: none;
}

.referenzen__logos li {
  font-size: inherit;
}

.referenzen__logo {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}

/* Das SJM-Logo laeuft im Original quadratisch mit object-fit: contain. */
.referenzen__logo--square {
  aspect-ratio: 1;
  object-fit: contain;
}

@media (max-width: 781px) {
  .referenzen__logos {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   5. CTA-Band (#Kontakt) - schwarz, 262px Desktop.
   Kein seitliches Padding: die H2 sitzt in einer 1440px-Spalte, die auf
   Mobile die volle Breite einnimmt. Das ist im Original so.
   -------------------------------------------------------------------------- */

.cta-band {
  background-color: var(--color-theme-5);
  color: var(--color-theme-1);
  padding-top: var(--section-pad-block);
  padding-bottom: calc(var(--spacer-quarter) + var(--space-20) + var(--section-pad-block));
}

.cta-band__title {
  max-width: var(--container-wide);
  font-weight: var(--fw-bold);
  margin: calc(var(--spacer-quarter) + var(--space-20)) auto 0;
  color: var(--color-theme-1);
}

.cta-band__action {
  margin-top: var(--section-pad-block);
  text-align: center;
}

/* Der Home-Button ist 16px/450 - nicht die 19px des tokens.css-Defaults. */
.cta-band__button {
  font-size: var(--fs-body);
}

/* --------------------------------------------------------------------------
   7. Leistungsspektrum (#Kompetenz) - 12 Icon-Kacheln, 4x3 auf Desktop.
   -------------------------------------------------------------------------- */

.kompetenz {
  background-color: var(--color-theme-2);
  padding-inline: var(--space-40);
  padding-top: var(--section-pad-block);
  padding-bottom: calc(var(--spacer-quarter) + var(--space-20) + var(--section-pad-block));
}

.kompetenz__title {
  max-width: var(--container-content);
  font-weight: var(--fw-bold);
  margin: calc(var(--spacer-quarter) + var(--space-20)) auto 0;
  text-align: center;
}

.kompetenz__inner {
  max-width: var(--container-wide);
  margin: var(--space-20) auto 0;
}

.kompetenz__intro {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  text-align: center;
}

.kompetenz__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* row-gap 2em ist im Original schriftgroessenabhaengig: 32px / 28,25px */
  gap: 2em var(--space-50);
  margin-block: var(--space-30);
  padding: 0;
  font-size: var(--fs-body);
  list-style: none;
}

.kompetenz__item {
  font-size: inherit;
}

.kompetenz__icon {
  display: block;
  width: 100px;
  height: 100px;
  margin-inline: auto;
}

.kompetenz__label {
  display: block;
  margin-top: var(--space-20);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: center;
}

@media (max-width: 781px) {
  .kompetenz__row {
    grid-template-columns: 1fr;
  }
}