/* Service pages of draft 3 (Strassenbau, Tiefbau, Aushub und Abbruch, Plätze und Pflästerungen,
   Kieswerk, Transporte): adjustments for the three template blocks that build.py writes in.
   Only loaded by the six service pages. */

/* 2 Überblick: photo instead of the Swiss map, statement plus a short paragraph, three counters.
   White section (Gianni, 22.09.2026): the first section after the hero is white on every service page,
   dark green text, numbers green, counter icons yellow on a green circle */
.kl-ueberblick .desc-about-company, .kl-ueberblick .counter-title, .kl-ueberblick .counter-title .text-sm { color: #04382A; }
.kl-ueberblick .counter-number, .kl-ueberblick .suffix-text, .kl-ueberblick .suffix-text .text-m { color: #017153; }
.kl-ueberblick .bg-counter { background-color: #017153; }
.kl-ueberblick .icon-counter { color: #FDF21E; }
.kl-ueberblick .separator-line { background-color: rgba(4, 56, 42, .15); }
.kl-ueberblick .kl-bild { width: clamp(290px, 32vw, 520px); aspect-ratio: 4 / 3; border-radius: var(--_sizes---radius--md-radius); overflow: clip; }
.kl-ueberblick .kl-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-ueberblick .kl-text { margin: 1.5rem 0 0; max-width: 38rem; font-size: 1.05rem; line-height: 1.6; color: rgba(4, 56, 42, .75); font-weight: 400; }
.kl-ueberblick .desc-about-company .tag-about { width: max-content; margin-bottom: 1.5rem; }
.kl-ueberblick .number-group-wrap { grid-template-columns: 1fr 1fr 1fr; }

/* 3 Unsere Arbeiten: three columns of two cards, no photo in the middle */
.kl-arbeiten .principles-wrap { grid-template-columns: 1fr 1fr 1fr; }

/* 4 Warum Kern: three cards without thumbnails, photo below the text fills the column width */
.kl-warum .kb-haltung-bild { height: auto; width: 100%; aspect-ratio: 16 / 10; }

@media (max-width: 991px) {
  .kl-ueberblick .kl-bild { width: 100%; }
}
@media (max-width: 767px) {
  .kl-ueberblick .top-content-wrap.about-section { flex-direction: column; align-items: stretch; }
  .kl-ueberblick .desc-about-company { width: 100%; }
}
@media (max-width: 479px) {
  .kl-ueberblick .number-group-wrap { grid-template-columns: 1fr; }
  .kl-ueberblick .number-card-wrap { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; }
  .kl-ueberblick .number-icon { flex: none; align-self: center; }
}

/* equal card heights per row in "Unsere Arbeiten": the column wrappers dissolve into one
   grid of 3 x 2, cards 01/02 in column 1, 03/04 in column 2, 05/06 in column 3 */
.kl-arbeiten .principles-wrap { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; align-items: stretch; }
.kl-arbeiten .principles-list-wrap { display: contents; }
.kl-arbeiten .single-principal-wrap { height: auto; align-self: stretch; }
@media (max-width: 991px) {
  .kl-arbeiten .principles-wrap { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 479px) {
  .kl-arbeiten .principles-wrap { grid-template-columns: 1fr; }
}

/* card titles in normal German spelling (the template sets capitals on .text-title-card) */
.kl-warum .text-title-card, .kl-warum .text-title-card .text-ms { text-transform: none; }

/* Einblicke: the start page marquee (kern.css) with one row and larger photos.
   Height 40px lower than the first version (two steps of 20px), width reduced in the same proportion (Gianni, 22.09.2026) */
.kl-einblicke .kb-item { height: calc(27vw - 40px); width: calc((27vw - 40px) * 42 / 27); }
@media (max-width: 991px) { .kl-einblicke .kb-item { height: calc(40vw - 40px); width: calc((40vw - 40px) * 62 / 40); } }
@media (max-width: 479px) { .kl-einblicke .kb-item { height: calc(53vw - 40px); width: calc((53vw - 40px) * 82 / 53); } }
/* slider title on one line wherever it fits (the start page limits it to 18 characters) */
.kl-einblicke .kb-title { max-width: none; }

/* Einblicke background: darker green at top and bottom, full Kern green as a band behind the photos
   (variant 5, edges lightened to #034B38 = variant B of einblicke-verlauf/band.html, Gianni, 22.09.2026) */
.main-section.kb-section.kl-einblicke { background: linear-gradient(180deg, #034B38 0%, #017153 38%, #017153 72%, #034B38 100%); }