:root {
  --form-error-color: #a8443a;
  /* Max share of the desktop hero framing lost on EACH side on narrow
     screens (see .parallax.hero below). Tune here: 0.2 = 20% per side. */
  --hero-side-crop: 0.34;
}

/* Anchor target for the contactform element (#kontaktformular). #header is
   position: fixed, so without this offset an anchored jump lands behind it.
   Tune to match the header height if it changes. */
#kontaktformular {
  scroll-margin-top: 8rem;
}

@media print, screen and (max-width: 40em) {
  .hero {
    h1 {
      margin-top: 2rem;
      margin-bottom: 0.1rem;
      font-size: 1.8rem;
      line-height: 1.9rem;
    }
    p {
      font-size: 0.8rem;
      line-height: 1.2rem;
    }
  }
}

.uppercase {
  text-transform: uppercase !important;
}

span.error,
label.error {
  color: var(--form-error-color);
}
.text-body {
  p {
    margin-bottom: 1rem;
  }
}

/* Contact form underline animation override.
   main.css animates the focus underline via .form-field::after (anchored to the
   wrapper's bottom). When a validation error renders inside the wrapper, that
   anchor drops below the error message. We disable the wrapper pseudo-element and
   animate the underline directly on the control instead, so it stays put under
   the input and the error message sits cleanly below it. */
.form-field:has(.form-input, .form-textarea, .form-select)::after {
  display: none;
}

.form-input,
.form-textarea,
.form-select {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: background-size 0.35s ease;
}

/* Error state: turn the underline red (static border + animated gradient),
   while leaving the typed text in its normal color. The :focus gradient is
   re-declared with currentColor in main.css/above, so it must be overridden
   here too, otherwise focusing an invalid field would reset it to black. */
.field_with_errors .form-input,
.field_with_errors .form-textarea,
.field_with_errors .form-select,
.field_with_errors .form-input:focus,
.field_with_errors .form-textarea:focus,
.field_with_errors .form-select:focus {
  border-bottom-color: var(--form-error-color);
  background-image: linear-gradient(
    var(--form-error-color),
    var(--form-error-color)
  );
}

.field_with_errors .form-checkbox input {
  border-color: var(--form-error-color);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 2px;
  transition: background-size 0.35s ease;
}

/* No-hero content pages (e.g. legal). These pages have no full-bleed hero behind
   the fixed header, so the header must show its solid "scrolled" treatment from the
   first paint instead of the transparent-over-image look. The `body.no-hero` class
   is set server-side (see ApplicationHelper#page_has_hero?), so this is driven by
   template logic — not the scroll/JS animation. The rules below mirror main.css's
   `#header.sticky-h …` block; overrides.css loads after main.css, so they win at
   matching specificity, and the JS-toggled sticky-h class becomes a visual no-op. */
.no-hero #header {
  font-size: 0.85em !important;
  background: #f6f2ec;
  border-bottom: 1px solid #ebe6de;
}
.no-hero #header .logo img {
  max-width: 60%;
  transition: all 0.7s ease-in-out;
}
.no-hero #header .logo img.logo-w {
  opacity: 0;
}
.no-hero #header .logo img.logo-c {
  opacity: 1;
}
.no-hero #header .headerbar .menu {
  color: #000;
  padding-top: 1.5rem;
}
.no-hero #header .headerbar .menu a,
.no-hero #header .headerbar .menu .button {
  color: #000;
  margin: 0;
  line-height: normal;
}
.no-hero #header .headerbar .menu a:hover,
.no-hero #header .headerbar .menu a.active {
  color: #518196;
  text-decoration: none;
}
.no-hero #header .headerbar .menu .button-w {
  color: #000 !important;
  border-color: #000;
}
.no-hero #header .headerbar .menu .button-w:hover,
.no-hero #header .headerbar .menu .button-w:focus {
  color: #fff !important;
  border-color: #518196;
}
.no-hero #header .hamburger {
  color: #000;
}
.no-hero #header .hamburger-inner,
.no-hero #header .hamburger-inner::before,
.no-hero #header .hamburger-inner::after {
  background-color: #000;
}
.no-hero #header .headerbar.m2active a,
.no-hero #header .headerbar.m2active .button {
  color: #fff;
}
.no-hero #header .headerbar.m2active .button-w {
  color: #fff !important;
  border-color: #fff;
}
.no-hero #header .headerbar.m2active .button-w:hover,
.no-hero #header .headerbar.m2active .button-w:focus {
  border-color: #fff;
}
.no-hero #header .headerbar.m2active .hamburger {
  color: #fff;
}
.no-hero #header .headerbar.m2active .hamburger-inner,
.no-hero #header .headerbar.m2active .hamburger-inner::before,
.no-hero #header .headerbar.m2active .hamburger-inner::after {
  background-color: #fff;
}
.no-hero #header .headerbar.m2active .hamburger:hover .hamburger-inner,
.no-hero #header .headerbar.m2active .hamburger:hover .hamburger-inner::before,
.no-hero #header .headerbar.m2active .hamburger:hover .hamburger-inner::after {
  background-color: #fff;
}

/* Without a hero behind it, the fixed header no longer overlaps a full-bleed
   image — offset the content below the solid header instead. Matches the header
   padding steps in main.css's responsive breakpoints. */
.no-hero #main {
  padding-top: 9rem;
}
@media print, screen and (max-width: 64em) {
  .no-hero #main {
    padding-top: 7rem;
  }
}

/* Hero parallax overhang fix. main.css gives .parallax-img a 10% overhang
   (top: -10%; height: 120%), but the GSAP parallax translation exceeds that
   budget. Because the hero is the first element on the page it rests partway
   through its scroll range (never at progress 0), nudging the image downward —
   and the shorter "medium" (.hero2) size rests further along, exposing a few-px
   gap at the top. Widening the overhang to 15% each side keeps the image
   covered at every size without weakening the parallax effect elsewhere. */
.parallax-img {
  top: -15%;
  height: 130%;
}

/* Hero heights scale with the viewport width on narrow screens. main.css sizes
   the hero in vh only, which on a portrait phone turns it into a tall, narrow
   crop. The vw cap is derived from the proportions the box has on a 16:10
   desktop (1440×900: 80vh = 720px = 50vw; 70vh = 630px = 43.75vw). Holding
   those proportions exactly made the hero too flat on phones, so the box may
   lose up to --hero-side-crop of that desktop framing on EACH side: showing
   (1 - 2c) of its width at the same height divides the vw term by (1 - 2c).
   Wider screens are unchanged (the vh term wins); narrower ones shrink in
   height, cropping at most that much off the sides. The .parallax 60vh floor
   would undo the cap, so it is dropped. The page-top parallax in app.js keeps
   the shorter box free of gaps. */
.parallax.hero {
  height: min(80vh, calc(50vw / (1 - 2 * var(--hero-side-crop))));
  min-height: 0;
}
.parallax.hero2 {
  height: min(70vh, calc(43.75vw / (1 - 2 * var(--hero-side-crop))));
  min-height: 0;
}