/* ergaenzung-seiten.css
   Befunde design-review und anti-ai vom 2026-10-02, zweiter Durchgang auf
   /shk und /bau. Liegt bewusst neben styles.css, damit beide Dateien
   getrennt bearbeitet werden koennen; eingebunden in views/partials/head.ejs
   nach styles.css.
   ========================================================================== */

/* --- /shk Kopf ------------------------------------------------------------
   1. Der Titel war 72 px, die uebrigen Unterseiten tragen 91 px bei 1440
      (DESIGN.md 3 und 10, layout-check: Unterseite mindestens 72 px).
      Jetzt dieselbe Stufe wie ueberall, dazu die Zeilenlaenge der
      allgemeinen Hero-Regel.
   2. Im Hero standen zwei gleich grosse gefuellte Pillen nebeneinander
      (blau «Unsere Leistungen», rot «Angebot anfragen»). Genau dieses
      Muster hat der Auftraggeber am 2026-10-02 verworfen («diese buttons
      sind noch ass….»). Rot heisst auf dieser Site «Angebot» und bleibt der
      Hauptweg; der zweite Weg ist ein Textlink mit Pfeil (DESIGN.md 7).
      .btn-ghost traegt in styles.css das Marineblau fuer helle Flaechen,
      im Hero steht er auf dem dunklen Schleier und braucht Weiss. */
.hero--shk h1 {
  font-size: clamp(2.75rem, 1rem + 5.2vw, 6rem);
  max-inline-size: 18ch;
}

.hero .hero-actions .btn-ghost {
  color: #fff;
  flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
  .hero .hero-actions .btn-ghost:hover {
    color: var(--accent-on-dark);
  }
}

.hero .hero-actions .btn-ghost:focus-visible {
  outline-color: #fff;
}

/* --- /bau Leistungszeilen -------------------------------------------------
   Die acht Fotos trugen keine einzige Bildunterschrift. Nach DESIGN.md 8
   traegt jede zwei von vier Fakten (was, wo, wann, womit), und alt und
   Bildunterschrift sind nie gleich. Das Partial bild.ejs rendert mit `cap`
   eine <figure>; die alte Regel .service-row-media (Hoehe 100 Prozent,
   Bild formatfuellend) haette die Zeile unter das Bild geschoben.
   Dazu zwei Seitenverhaeltnisse statt eines einzigen ueber die ganze
   Reihe (DESIGN.md 8: kein Einheits-Seitenverhaeltnis). */
/* Jede Zeile war auf feste 480 px Hoehe gestellt («same height for all
   cards»). Daher standen alle acht gleich hoch, mit viel Leerraum unter dem
   Text. Die Hoehe kommt jetzt aus dem Inhalt. */
.service-row-card {
  height: auto;
}

/* min-width und min-height 0: sonst zieht das Foto als Rasterelement seine
   eigene Mindestbreite heran und die Zeile wird breiter als die Spalte
   (am Handy lief sie 111 px aus dem Bild, unsichtbar hinter overflow-x). */
.service-row-card .service-row-media,
.service-row-card .service-row-content {
  min-width: 0;
}

.service-row-card .service-row-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
  min-height: 0;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: visible;
}

.service-row-card .service-row-media picture {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.service-row-card .service-row-media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
}

.service-row-card .service-row-media--hoch img {
  aspect-ratio: 4 / 5;
}

/* Hochformate bekommen eine schmalere Spalte, sonst steht neben dem Bild
   eine halbe Bildhoehe leer. Der Text steht dort auf halber Hoehe.
   Nur ab 992 px, darunter steht ohnehin alles untereinander. */
@media (min-width: 992px) {
  .service-row-card:has(.service-row-media--hoch) {
    grid-template-columns: minmax(240px, 360px) 1fr;
    align-items: center;
  }
}

/* Gleiche Stufe wie die uebrigen Bildunterschriften der Site (0.8rem),
   damit die Seite nicht mehr Schriftgroessen bekommt (hoechstens 7). */
.service-row-card figcaption {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
  max-inline-size: 40ch;
}

/* --- Eine Zeile anders gebaut --------------------------------------------
   Acht formgleiche Zeilen hintereinander lesen sich als Raster (DESIGN.md 5:
   kein Bauplan mehr als zweimal). Die Bautrocknung hat als einzige Leistung
   kein eigenes Foto, deshalb traegt sie den Bruch: Text in der schmalen
   Spalte, die Punkte daneben in zwei Spalten. */
.service-row-card--liste .check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 2rem;
  align-content: start;
  margin: 0;
}

/* Zwischen 700 und 991 px blieb die Zeile einspaltig: das Foto lief ueber die
   ganze Breite (bei 768 px 736 px Anzeige, dafuer reicht keine unserer
   Quellen in doppelter Breite, layout-check «Retina»). Dort stehen Bild und
   Text jetzt nebeneinander. */
@media (min-width: 700px) and (max-width: 991px) {
  .service-row-card:not(.service-row-card--text) {
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
  }
}

@media (max-width: 991px) {
  .service-row-card .service-row-media {
    height: auto;
    min-height: 0;
  }

  .service-row-card--liste .check-list {
    grid-template-columns: 1fr;
  }
}