/*
 * Interaktives Leistungsfelder-Grid (services.html).
 * Idle: 2x2-Grid, Kacheln in Graustufen. Hover (Kachel oder passender
 * runder Button oben): Kachel färbt sich ein. Klick: Kachel wächst auf
 * die linke Grid-Hälfte (über beide/alle Zeilen), zeigt Bild + Text +
 * Bullets; die übrigen 3 Kacheln schrumpfen zu einer Spalte rechts.
 * Die Gesamthöhe des Grids bleibt IMMER gleich (feste Höhe, Zeilen per
 * fr-Einheiten), damit sich der Block nie in der Größe ändert.
 */

#svc-triggers {
  margin-bottom: 12px;
  cursor: pointer;
}
.svc-trigger {
  transition: transform 0.15s ease;
}
.svc-trigger.is-hot {
  transform: translateY(-3px);
}
.svc-trigger.is-hot .fa,
.svc-trigger.is-hot .fa-solid {
  background-color: #70A837;
  color: #fff;
}

.svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 28px;
  height: 560px;
  transition: grid-template-columns 0.45s ease;
}
.svc-grid.is-active {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.svc-tile {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  background: #1A2E16;
  grid-column: auto;
  grid-row: auto;
  transition: grid-column 0.45s ease, grid-row 0.45s ease;
}
.svc-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) brightness(0.75);
  transition: filter 0.35s ease, height 0.45s ease;
}
.svc-tile:hover .svc-tile-img,
.svc-tile.is-hot .svc-tile-img {
  filter: grayscale(0) brightness(1);
}
.svc-tile.is-active .svc-tile-img {
  height: 38%;
  filter: grayscale(0) brightness(1);
}
/* Solange eine andere Kachel/Button gehovert wird, wird die aktive
   Kachel wieder grau – immer nur EINE farbige Fläche gleichzeitig,
   sonst wirkt es unruhig ("zu viel Farbe"). */
.svc-tile.is-active.is-dimmed .svc-tile-img {
  filter: grayscale(1) brightness(0.75);
}

.svc-tile-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 38%;
  background: #F7F3E8;
  padding: 14px 22px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease 0.15s, transform 0.25s ease 0.15s;
}
.svc-tile.is-active .svc-tile-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.svc-tile-panel h3 {
  color: #1A2E16;
  font-size: 20px;
  margin-bottom: 8px;
}
.svc-tile-panel > p {
  font-size: 13px;
  line-height: 1.5;
  color: #4A4030;
  margin-bottom: 12px;
}
.svc-bullets {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.svc-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 5px;
}
.svc-bullets li i {
  color: #70A837;
  font-size: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.svc-bullets li strong {
  display: block;
  color: #1A2E16;
  font-size: 13px;
}
.svc-bullets li span {
  display: block;
  color: #4A4030;
  font-size: 12px;
  line-height: 1.4;
}
.svc-cta,
.svc-cta:hover,
.svc-cta:visited,
.svc-cta:focus,
.svc-cta:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #70A837;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
}

@media (max-width: 767px) {
  .svc-grid,
  .svc-grid.is-active {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    height: 900px;
  }
  .svc-tile.is-active {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
}