/* Seite /leistungen/ ----------------------------------------------------------
   Lokale Styles ausschliesslich fuer src/leistungen/index.njk (per Frontmatter-
   Feld extraCss in layouts/base.njk eingebunden). Alle Klassen tragen das
   Praefix .leistungen-, damit keine andere Seite betroffen sein kann.
   Wiederverwendet aus den globalen Styles: .hero/.hero--compact/.hero-media
   (Bildflaeche inkl. Overlay/Abdunkelung), .leistung-media (Split-Bildflaeche),
   .hero-ai-label (KI-Kennzeichnung), .cta-final/.cta-media, .card/.card--dark/
   .icon-badge (Beauftragungsmodelle, identisch zur Startseite), .grid/.grid--3,
   .btn, .eyebrow, .section-head. ---------------------------------------------- */

/* Elektrotechnik/Energie: kompakte Leistungskarten (statt grosser weisser
   Textkarten). Ganze Karte ist ein <a> - ein einzelner Tab-Stopp, native
   Tastaturbedienung, kein absolut positionierter Link-Trick noetig. */
.leistungen-grid {
  display: grid;
  gap: var(--space-3);
}
.leistungen-grid > * { min-width: 0; }
@media (min-width: 768px) {
  .leistungen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .leistungen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.leistungen-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-3);
  background: var(--paper-000);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.leistungen-card:hover,
.leistungen-card:focus-visible {
  border-color: var(--brand-500);
  transform: translateY(-2px);
}
.leistungen-card__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--brand-600);
  margin-bottom: 0.5rem;
}
.leistungen-card__title {
  font-size: var(--text-lg);
  margin: 0 0 0.35rem;
}
.leistungen-card__desc {
  margin: 0;
  color: var(--paper-text-muted);
  font-size: var(--text-sm);
  flex: 1;
}
.leistungen-card__link {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--brand-600);
  font-weight: 600;
  font-size: var(--text-sm);
}
.leistungen-card__link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.15s ease;
}
.leistungen-card:hover .leistungen-card__link::after,
.leistungen-card:focus-visible .leistungen-card__link::after {
  transform: translateX(3px);
}
/* Dunkle Variante (Energie-Abschnitt): gleiche Struktur, ink-Farbtoene. */
.leistungen-card--dark {
  background: var(--ink-800);
  border-color: var(--ink-line);
  color: var(--ink-text);
}
.leistungen-card--dark:hover,
.leistungen-card--dark:focus-visible { border-color: var(--brand-400); }
.leistungen-card--dark .leistungen-card__num,
.leistungen-card--dark .leistungen-card__link { color: var(--brand-400); }
.leistungen-card--dark .leistungen-card__desc { color: var(--ink-text-muted); }

/* E-Mobilitaet: eigenstaendiger 50/50-Split (Text/Bildplatzhalter), Mobile
   sauber untereinander. Die Bildflaeche nutzt unveraendert .leistung-media. */
.leistungen-emobility__grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 768px) {
  .leistungen-emobility__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}

/* Energie: ruhiges, breites Bildband unterhalb der drei Karten - reine
   atmosphaerische Ergaenzung, kein Text, keine eigene Ueberschrift. Nutzt wie
   .hero-media/.leistung-media object-fit:cover; die KI-Kennzeichnung ist das
   normale .hero-ai-label (braucht nur einen position:relative-Kontext). */
.leistungen-energie-media {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-4);
  aspect-ratio: 21 / 8;
  border-radius: var(--radius-lg);
  background: var(--ink-900);
}
.leistungen-energie-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}