/* ==========================================================================
   Seite «Dienstleistungen» – ergänzt css/style.css (wird nur von dienstleistungen.html geladen).
   Farben, Schriften, Rundungen und Abstände kommen aus den Design-Tokens in style.css.
   .hero--compact ist in style.css definiert (gemeinsam mit produkte.html genutzt).
   Aufbau:
   1. Vier Dienstleistungen (Karten mit Piktogramm + Text)
   2. Kontakt-CTA (dunkelblaue Abschlussfläche)
   ========================================================================== */


/* 1. DIENSTLEISTUNGEN ----------------------------------------------------- */

/* Drei gleichwertige, vertikale Karten (Piktogramm oben zentriert, Titel, Text darunter –
   bewusst NICHT das alte Icon-links/Text-rechts-Layout der vorherigen vier Karten, damit die
   Seite nicht wie "eine Karte entfernt" wirkt). Gestapelt auf dem Smartphone, ab Tablet zwei,
   ab Desktop alle drei nebeneinander in einer ausgewogenen Zeile. */
.services__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  max-width: 26rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .service:last-child { grid-column: 1 / -1; max-width: calc(50% - .75rem); margin-inline: auto; }
}
@media (min-width: 960px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .service:last-child { grid-column: auto; max-width: none; margin-inline: 0; }
}

/* Seite jetzt mit weissem Grundhintergrund (kein seitenweites .section--tint mehr, siehe
   dienstleistungen.html) – die Karten selbst tragen die dezente Hellblau-Tönung, damit sich
   die drei Dienstleistungen weiterhin sichtbar von der weissen Fläche abheben. */
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(66, 165, 245, .24);
  border-radius: var(--radius-l);
  /* Minimal wärmerer/weicherer Ton (Hue leicht Richtung Indigo, etwas entsättigt) statt
     reinem Eisblau, plus ein sehr dezenter Hauch Pink im Verlauf. */
  background-color: #F1F6FD !important;
  background-image: linear-gradient(165deg, rgba(66, 165, 245, .14), rgba(233, 30, 99, .022) 55%, rgba(66, 165, 245, .02) 85%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
  color-scheme: light only;
  text-align: center;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
/* Dezenter Akzentstrich oben (Pink → Hellblau) -- dieselbe Formsprache wie bei den
   Produktkarten (css/produkte.css) und den Teamkarten (css/ueber-uns.css): verbindet die
   drei Kartentypen optisch zu einer gemeinsamen Familie. */
.service::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--pink), var(--blue-light));
  background-color: var(--blue-light) !important;
  color-scheme: light only;
  opacity: .5;
  pointer-events: none;
}
@media (hover: hover) {
  .service:hover {
    border-color: rgba(33, 43, 91, .32);
    box-shadow: 0 20px 44px -30px rgba(33, 43, 91, .4);
    transform: translateY(-2px);
  }
}

/* Piktogramm-Mikroanimationen: an dieselbe Scrollposition gekoppelt wie auf der Produkteseite
   (js/main.js beobachtet zusätzlich .service und schreibt --p). Bei «Bewegung reduzieren»
   bleiben alle in Ruheposition. */
.service-anim-beratung,
.service-anim-beratung-klein,
.service-anim-montage,
.service-anim-bohrer,
.service-anim-reparaturen-scale,
.service-anim-reparaturen {
  transform-box: fill-box;
  transition: transform .12s linear;
}

/* Beratung: beide Sprechblasen bewegen sich beim Scrollen klar erkennbar aufeinander zu -- wie
   ein kurzer Dialog-Impuls -- mit spürbarem zeitlichem/räumlichem Versatz zwischen den beiden
   (Antwortblase startet mit kurzer Verzögerung und legt einen etwas weiteren Weg zurück), und
   beim Hochscrollen exakt wieder vollständig auseinander. Kein Loop -- die Bewegung folgt
   ausschliesslich der Scrollposition (--p). */
.service-anim-beratung {
  transform: translateX(calc(var(--p, 0) * 14px)) translateY(calc(var(--p, 0) * 2px));
}
.service-anim-beratung-klein {
  transition-delay: .08s;
  transform: translateX(calc(var(--p, 0) * -19px)) translateY(calc(var(--p, 0) * -6px));
}

/* Montage: NUR der duenne Bohrer (siehe dienstleistungen.html) bewegt sich -- bewusst sehr
   klein, damit er immer innerhalb/an der Kante des Spannfutters bleibt und nie als
   abgetrenntes, schwebendes Teil wirkt. Griff, Akku, Maschinenkörper und Spannfutter selbst
   sind UNBEWEGT. */
.service-anim-montage {
  transform: translateX(calc(var(--p, 0) * 5px));
}
/* Der Bohrer dreht sich dabei sichtbar (mehrere volle Umdrehungen über den Scrollverlauf) und
   bekommt zusätzlich eine feine, natürliche Vibration ("Bohr-Gefühl") -- moderne Browser mit
   CSS-trigonometrischen Funktionen zeigen das Zittern, ältere einfach nur die Drehung. */
.service-anim-bohrer {
  transform-origin: 50% 50%;
  transform: rotate(calc(var(--p, 0) * 1080deg)) translateY(calc(sin(var(--p, 0) * 90) * 1.2px));
}

/* Reparaturen: der Schraubenschlüssel ist etwas größer (siehe .service-anim-reparaturen-scale,
   mit vergrössertem und verschobenem viewBox in dienstleistungen.html gegen Abschneiden an den
   Bildrändern) und dreht sich beim Scrollen um ca. 22 Grad um einen Punkt nahe dem Griffende
   (statt um die Bildmitte) -- wirkt wie eine kurze Anzieh-/Lösebewegung an einer Schraube -- und
   beim Hochscrollen wieder vollständig zurück. Kein Dauerlauf. Drehwinkel und Drehpunkt sind
   bewusst zurückhaltender als zuvor gewählt, damit der Schlüssel in Ruhestellung UND während der
   gesamten Animation (in beide Scrollrichtungen) vollständig innerhalb des Icon-Feldes sichtbar
   bleibt. */
.service-anim-reparaturen-scale {
  transform-origin: 50% 50%;
  transform: scale(1.2);
}
.service-anim-reparaturen {
  transform-origin: 78% 82%;
  transform: rotate(calc(var(--p, 0) * 22deg));
}

@media (prefers-reduced-motion: reduce) {
  .service-anim-beratung,
  .service-anim-beratung-klein,
  .service-anim-montage,
  .service-anim-bohrer,
  .service-anim-reparaturen {
    transform: none !important;
  }
}

/* Piktogramm: quadratische, dezent hellblau getönte Fläche, zentriert über dem Titel – bewusst
   grosszügig, damit die Dienstleistung auf den ersten Blick erkennbar ist. */
.service__media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(7rem, 18vw, 8.5rem);
  height: clamp(7rem, 18vw, 8.5rem);
  padding: clamp(1rem, 2.6vw, 1.3rem);
  border-radius: var(--radius-m);
  background: rgba(66, 165, 245, .12);
  color-scheme: light only;
}
.service__icon { width: 100%; height: 100%; }

.service__body { display: flex; flex-direction: column; align-items: center; }
.service__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: .005em;
}
.service__text { margin-top: .6rem; font-size: .9375rem; line-height: 1.6; max-width: 26ch; }


/* 2. KONTAKT-CTA ------------------------------------------------------------ */
.contact-cta { padding-top: calc(var(--section) * .55); }
.contact-cta__panel {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4rem);
  border-radius: var(--radius-l);
  background: var(--blue-dark);
  background-color: #212B5B !important;
  color: var(--white) !important;
  color-scheme: light only;
  text-align: center;
  overflow: hidden;
}
/* Dasselbe wiederkehrende Lamellen-Wasserzeichen wie bei .story__panel (Startseite) und
   .about__panel (Über uns) – sparsam eingesetzt, hier an der abschliessenden CTA-Fläche. */
.contact-cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -8deg,
    rgba(66, 165, 245, .09) 0, rgba(66, 165, 245, .09) 10px,
    transparent 10px, transparent 34px
  );
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 60%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 60%, #000 100%);
  pointer-events: none;
}
.contact-cta__title, .contact-cta__text, .contact-cta__cta { position: relative; }
.contact-cta__title { margin-bottom: .75rem; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.contact-cta__text { max-width: 34rem; margin-inline: auto; color: rgba(255, 255, 255, .88); }
.contact-cta__cta { margin-top: 1.75rem; }