/* Axodren — Sektion 02: Services-Verdichtung
   These B („One partner. Every layer of AI.") + 6 Kacheln.
   Kein CTA (Beschluss 29.08.2026). Schrift kommt aus assets/fonts. */

@font-face {
  font-family: "Axodren Display";
  src: url("../../assets/fonts/AxodrenDisplay-Regular-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Axodren Display Ext";
  src: url("../../assets/fonts/AxodrenDisplay-ExtendedFull-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

.svc {
  --svc-ink: #000000;
  --svc-mut: #4a4a52;
  --svc-soft: #6a6a73;
  --svc-hair: #e9e9ec;
  --svc-red: #ff1f48;
  --svc-cyan: #00d8ff;
  background: #fff;
  color: var(--svc-ink);
  padding: clamp(3.5rem, 9vh, 6.5rem) clamp(1.2rem, 3.4vw, 3.4rem) clamp(4rem, 10vh, 7rem);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.svc__inner { max-width: 76rem; margin: 0 auto; }

.svc .xf {
  font-family: "Axodren Display Ext", "Axodren Display", "Helvetica Neue", Arial, sans-serif;
}

/* ---- These ---- */
.svc__head { max-width: 54rem; margin-bottom: clamp(2.2rem, 5vh, 3.6rem); }

.svc__title {
  margin: 0 0 clamp(1rem, 2.2vh, 1.5rem);
  font-family: "Axodren Display", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.9rem, 4.4vw, 3.9rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.svc__lede {
  margin: 0;
  max-width: 44rem;
  color: var(--svc-mut);
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.7;
}

/* ---- Kacheln ---- */
.svc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.25rem);
}

.svc__tile {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border: 1px solid var(--svc-hair);
  border-radius: 0.55rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease;
}

.svc__tile--lead { grid-column: span 2; }

/* Hover-Behandlung C (Beschluss 29.08.2026): Kachel invertiert —
   schwarz gefuellt, Titel weiss mit der Rot/Cyan-Signatur der Marke. */
.svc__tile:hover,
.svc__tile:focus-visible {
  background: var(--svc-ink);
  border-color: var(--svc-ink);
}

.svc__tile:hover .svc__tiletitle,
.svc__tile:focus-visible .svc__tiletitle {
  color: #fff;
  text-shadow: -1.5px 0 rgba(255, 31, 72, 0.55), 1.5px 0 rgba(0, 216, 255, 0.55);
}

.svc__tile:hover .svc__tiletext,
.svc__tile:focus-visible .svc__tiletext { color: #b9b9be; }

.svc__tile:focus-visible { outline: 2px solid var(--svc-ink); outline-offset: 3px; }

.svc__tiletitle {
  margin: 0;
  font-family: "Axodren Display", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.02rem, 1.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.svc__tile--lead .svc__tiletitle { font-size: clamp(1.2rem, 1.9vw, 1.8rem); }

.svc__tiletext {
  margin: 0;
  color: var(--svc-mut);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 34rem;
}

.svc__all {
  display: inline-block;
  margin-top: clamp(1.6rem, 3.5vh, 2.4rem);
  color: var(--svc-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--svc-hair);
  padding-bottom: 0.3rem;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.svc__all:hover,
.svc__all:focus-visible { color: var(--svc-ink); border-color: var(--svc-ink); }

@media (max-width: 900px) {
  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc__tile--lead { grid-column: span 2; }
}

@media (max-width: 560px) {
  .svc__grid { grid-template-columns: 1fr; }
  .svc__tile--lead { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .svc__tile { transition: none; }
}