/* Sub-page hero (Gianni, 19.09.2026): half-height still photo under the header, dark green rising from the
   bottom, breadcrumb and page title in white bottom left. Chosen from the lab page unterseiten-hero.html
   (variant "Kante"). Used on ueber-uns.html and kontakt.html; the start page keeps its video hero. */

/* the template's hero section only carries the navigation here: no height of its own, the nav floats over the photo */
.main-section.hero-homepage.kh-nav { height: auto; min-height: 0; position: static; }
.main-section.hero-homepage.kh-nav .navigation-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }

.kh { position: relative; height: 50vh; min-height: 380px; max-height: 620px; overflow: hidden; font-family: var(--_typography---font--heading-font); color: #fff; }
.kh-photo { position: absolute; inset: 0; }
.kh-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kh-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 56, 42, .82) 0%, rgba(4, 56, 42, .35) 42%, rgba(4, 56, 42, 0) 75%); }
/* neutral black shade along the top edge so the white navigation stays readable on bright photos (Gianni, 22.09.2026) */
.kh-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .18) 12%, rgba(0, 0, 0, 0) 28%); }
.kh-wrap { position: absolute; left: 6vw; right: 6vw; bottom: 3.4vw; }
.kh-crumb { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--_typography---font--body-font); font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .88); }
.kh-crumb a { color: inherit; text-decoration: none; }
.kh-crumb a:hover { color: #FDF21E; }
.kh-crumb span { width: 5px; height: 5px; border-radius: 50%; background: #FDF21E; }
.kh h1 { margin: 0; color: #fff; font-size: clamp(2.6rem, 5.2vw, 5.4rem); font-weight: 500; line-height: .98; letter-spacing: -.04em; text-shadow: 0 2px 16px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3); }

/* entrance on load: breadcrumb, then the title */
.kh-in { opacity: 0; transform: translateY(22px); animation: kh-rise .8s cubic-bezier(.2, .8, .25, 1) forwards; animation-delay: calc(var(--d, 0) * 110ms + 350ms); }
@keyframes kh-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kh-in { opacity: 1; transform: none; animation: none; } }

/* short intro under the hero (about page), replaces the template's two-column hero text */
.kh-intro { padding: 5vw 6vw 4vw; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4vw; align-items: start; }
.kh-intro-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--_sizes---gap--xxxs-gap); }
.kh-intro-bild { width: 100%; margin-top: var(--_sizes---gap--xxs-gap); border-radius: var(--_sizes---radius--md-radius); overflow: clip; }
.kh-intro-bild img { width: 100%; height: auto; display: block; }
.kh-intro h2 { margin: 0; font-family: var(--_typography---font--heading-font); font-size: clamp(1.7rem, 2.6vw, 2.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; color: #04382A; }
.kh-intro p { margin: 0 0 1em; font-size: 17px; line-height: 1.6; color: #062C22; }

@media (max-width: 767px) {
  .kh { height: 52vh; min-height: 340px; }
  .kh-wrap { left: 20px; right: 20px; bottom: 26px; }
  .kh-intro { grid-template-columns: 1fr; padding: 44px 20px 8px; }
}

/* contact page: the form block keeps the same distance to the photo hero above as to the call to action below
   (the template had no top padding there because its own hero ran straight into the form) */
.main-section.contact-form { padding-top: var(--_sizes---section--section-padding-vertical); }

/* service pages (Gianni, 22.09.2026): the call to action sits directly under the photo hero, so it gets the
   usual section distance on top and a plain white background instead of the template's half-grey band */
.main-section.cta.kh-cta { padding-top: var(--_sizes---section--section-padding-vertical); background-image: none; background-color: #fff; }

/* about page: large Kern logo under the title "Kern Strassenbau AG" in the intro, instead of the roller photo (Gianni, 22.09.2026) */
.kh-intro-logo { display: block; width: clamp(75px, 8.5vw, 125px); height: auto; border-radius: 0; margin-top: var(--_sizes---gap--xxs-gap); }

/* breadcrumb on phones (Gianni, 28.09.2026): the current page name sits in .kh-now; on three-level paths
   (Startseite, Leistungen, page) it is hidden with its dot, because it wrapped onto a second line and the
   title right below repeats it anyway */
.kh-crumb .kh-now { font-weight: inherit; }
@media (max-width: 767px) {
  .kh-crumb:has(> a + span + a) > .kh-now,
  .kh-crumb:has(> a + span + a) > span:has(+ .kh-now) { display: none; }
}