/* ============================================================
   STARTSEITE – VARIANTE 2 (page-startseite-2.php)
   Hero: Text-Block gestapelt über einem durchgehend breiten Bild, auch am
   Desktop kein Umschalten auf 2-spaltiges Grid (anders als Variante 1).
   Text-Elemente (Eyebrow/Title/Subtitle/Buttons) sind bewusst weiter
   .hero__* aus main.css – reine Typografie ohne Grid-Abhängigkeit,
   kein Grund zum Duplizieren. Das Hero-Bild nutzt ebenfalls die geteilte
   Klasse .hero__image (wie .page-hero__image bei Leistungen/Über-uns/
   Notfall) statt eines eigenen Klassennamens – die Varianten-Identität
   steckt allein in der Section-Hook-Klasse .section--hero-v2, nicht
   zusätzlich im Klassennamen. Kollisionsfrei, weil pro Seite ohnehin nur
   eine Layout-CSS-Datei geladen wird (siehe conventions.md).
   ============================================================ */

/* Abgerundete Buttons statt des sitewide kantigen Designs, analog zum
   -3-Vorlagen-Muster (siehe conventions.md → Abgerundete Buttons). Scope
   über "main" statt sitewide, damit Header/Footer-Buttons unangetastet
   bleiben (Header-2/Footer-2 haben dafür ihre eigene CSS-Datei). */
main {
  --radius-btn: 2rem;
}

.section--hero-v2 .container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.section--hero-v2 .hero__image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
}

.section--hero-v2 .hero__image img {
  width: auto;
  height: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-card);
}

@media (min-width: 768px) {
  .section--hero-v2 .hero__image {
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 1133px) {
  .section--hero-v2 .hero__image {
    width: 100%;
    background-color: var(--color-bg-alt);
  }
}

/* Leistungsübersicht: Kachel-Bild als breites 2:1-Banner statt kleinem
   rundem Avatar (anders als Variante 1). Bild liegt randlos in der Karte
   (kein Padding mehr auf .leistungen__card selbst), Text/Link stattdessen
   in einem eigenen Wrapper mit eigenem Padding. */
.section--leistungen-v2 .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

@media (min-width: 768px) {
  .section--leistungen-v2 .container {
    grid-template-columns: 1fr 2fr;
  }
}

.section--leistungen-v2 .leistungen__header {
  text-align: left;
  margin-bottom: 0;
}

/* Mobil: Karten als horizontales Swipe-Carousel, analog zum bestehenden
   .leistungen-nav__inner-Muster. 88% statt 100% Kartenbreite sorgt für
   einen dauerhaften "Peek"-Effekt (Rand der nächsten Karte bleibt
   sichtbar) – Hinweis, dass hier weitergeswiped werden kann, ganz ohne
   JS/Animation. Komplett in max-width:767.98px gekapselt (statt unbedingt
   gesetzt und ab 768px wieder zurückgedreht): main.css' eigene
   Breakpoint-Stufen für .leistungen__grid können dadurch strukturell
   nicht mehr versehentlich überschrieben werden, unabhängig von
   Spezifität oder Ladereihenfolge – siehe conventions.md → CSS-Fallstricke. */
@media (max-width: 767.98px) {
  .section--leistungen-v2 .leistungen__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .section--leistungen-v2 .leistungen__grid::-webkit-scrollbar {
    display: none;
  }

  .section--leistungen-v2 .leistungen__card {
    scroll-snap-align: start;
  }
}

/* Bleibt ab 768px bewusst bei 2 Spalten statt main.css' 3-Spalten-Stufe ab
   1024px: .leistungen__grid liegt hier in der schmaleren 2fr-Containerspalte,
   3 Spalten wären zu eng. Separat von der Carousel-Regel oben, damit beide
   unabhängig voneinander lesbar/wartbar bleiben. */
@media (min-width: 768px) {
  .section--leistungen-v2 .leistungen__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.section--leistungen-v2 .leistungen__card img {
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-card);
  width: 100%;
  height: auto;
}

/* Ganze Karte ist jetzt selbst ein <a> (statt <div> mit innerem Link),
   gleiches Muster wie startseite-1.css/startseite-4.css. Statt des
   sitewide Text-Unterstreichen-Hovers auf .leistungen__card a wechselt
   hier stattdessen der Kartenhintergrund. */
.section--leistungen-v2 .leistungen__card {
  padding: 0;
  gap: 0;
  text-decoration: none;
  transition: background 300ms;
}

.section--leistungen-v2 .leistungen__card:hover {
  background: var(--color-primary-dark);
}

.section--leistungen-v2 .leistungen__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: 1.5rem;
  flex-grow: 1;
}

/* "Mehr erfahren"-Span ist kein <a> mehr (siehe oben), deshalb die
   sitewide .leistungen__card a-Optik (main.css) hier repliziert. */
.section--leistungen-v2 .leistungen__card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--color-primary-text);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Text auf Weiss beim Hover, da der Kartenhintergrund dann auf
   --color-primary-dark wechselt (sonst zu wenig Kontrast). */
.section--leistungen-v2 .leistungen__card h3,
.section--leistungen-v2 .leistungen__card p,
.section--leistungen-v2 .leistungen__card-link {
  transition: color 300ms;
}

.section--leistungen-v2 .leistungen__card:hover h3,
.section--leistungen-v2 .leistungen__card:hover p,
.section--leistungen-v2 .leistungen__card:hover .leistungen__card-link {
  color: var(--color-white);
}

/* Bewertungen: Google-Link steht jetzt unter .bewertungen__grid statt im
   Header, braucht deshalb eigene Positionierung (vorher übernahm
   .bewertungen__header { text-align: center } das automatisch). */
.section--bewertungen-v2 .bewertungen__link {
  display: block;
  text-align: center;
  margin-top: var(--gap-lg);
}

.section--bewertungen-v2 .bewertungen__card {
  border: 0.5rem solid var(--color-border);
}