/* ============================================================
   EGH Gebaeudeservice / 06 - LEISTUNGEN

   Neun Leistungen als Karten mit quadratischem Bild. Kein
   Zeilenverzeichnis mit einer Vorschau, die dem Zeiger folgt:
   Das sieht am Schreibtisch gut aus und existiert am Telefon
   gar nicht, wo die Mehrheit der Anfragen herkommt. Hier sieht
   jeder dasselbe, und jeder sieht sofort, worum es geht.

   Das Raster ist nicht dreimal drei. Die erste Karte laeuft
   ueber zwei Spalten und traegt ein breiteres Bild: Sie ist
   die meistgesuchte Leistung, und sie soll auch so aussehen.
   ============================================================ */

/* --- Filterzeile -------------------------------------------
   Die einzigen runden Formen der Seite. Eine Pille wird als
   Schalter gelesen, ein Rechteck als Feld. */
.svc__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--stack-3);
}
.svc__filter button {
  min-height: 42px;
  padding: 0.55rem 1.05rem;
  font-family: var(--font-kopf);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--auf-grund-2);
  background: transparent;
  border: var(--hair) solid var(--regel-satt);
  border-radius: var(--r-pille);
  transition: color var(--d-schnell) var(--e-weich),
              border-color var(--d-schnell) var(--e-weich),
              background-color var(--d-schnell) var(--e-weich);
}
@media (hover: hover) and (pointer: fine) {
  .svc__filter button:hover { color: var(--auf-grund); border-color: var(--gold); }
}
.svc__filter button[aria-pressed="true"] {
  color: var(--grund);
  background: var(--gold);
  border-color: var(--gold);
}

.svc__zahl {
  font-family: var(--font-kopf);
  font-size: var(--t-sm);
  color: var(--auf-grund-2);
  margin-bottom: var(--stack-3);
}

/* --- Das Raster --------------------------------------------- */
.svc__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.svc__karte {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.svc__karte[hidden] { display: none; }

/* Die erste Karte laeuft ueber zwei Spalten und liegt quer:
   Bild links, Text rechts. */
.svc__karte--breit { grid-column: span 2; }
/* Die breite Karte muss die volle Hoehe ihrer Reihe fuellen.
   Ohne flex: 1 endet ihr Inhalt dort, wo der Text aufhoert, und
   unter dem Bild bleibt ein Streifen Flaeche stehen. */
.svc__karte--breit .svc__innen {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  flex: 1;
}
.svc__karte--breit .svc__text { justify-content: center; }
.svc__karte--breit .svc__bild { aspect-ratio: auto; height: 100%; min-height: 15rem; }

.svc__bild { aspect-ratio: 16 / 10; border-radius: 0; }
.svc__text {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  flex: 1;
}
.svc__nr {
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.svc__name {
  font-family: var(--font-kopf);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--auf-grund);
  margin-bottom: 0.5rem;
  hyphens: auto;
}
.svc__satz { font-size: var(--t-sm); line-height: 1.6; color: var(--auf-grund-2); }
.svc__preis {
  margin-top: var(--stack-3);
  padding-top: 0.85rem;
  border-top: var(--hair) solid var(--regel);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-kopf);
  font-size: var(--t-sm);
  color: var(--auf-grund-2);
}
.svc__preis b { color: var(--gold); font-weight: 600; }
.svc__karte svg { width: 1.1em; height: 1.1em; color: var(--gold); transition: transform var(--d-mittel) var(--e-aus); }
@media (hover: hover) and (pointer: fine) {
  .svc__karte:hover svg { transform: translateX(3px); }
  .svc__karte:hover .svc__name { color: var(--gold); }
}

@media (max-width: 1000px) {
  .svc__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc__karte--breit { grid-column: span 2; }
}
@media (max-width: 680px) {
  .svc__raster { grid-template-columns: minmax(0, 1fr); }
  .svc__karte--breit { grid-column: span 1; }
  .svc__karte--breit .svc__innen { grid-template-columns: minmax(0, 1fr); }
  .svc__karte--breit .svc__bild { aspect-ratio: 16 / 10; min-height: 0; }
}

.svc__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-2) var(--stack-3);
  margin-top: var(--stack-4);
  padding-top: var(--stack-3);
  border-top: var(--hair) solid var(--regel);
}
.svc__fuss p { color: var(--auf-grund-2); max-width: 48ch; }