/* Custom header/footer redesign overrides for the Preisrechner page. */

/* Use the desktop nav's logo on mobile too instead of the separate mobile
   nav component (.csMPIg) — its burger button/slide-out panel came from
   react-burger-menu and kept rendering behind the page content no matter
   what was tried, so simplest is to drop it entirely and reuse the
   already-working desktop header, just with its menu items hidden below
   the site's own mobile breakpoint (50em), leaving only the logo. */
.csMPIg {
  display: none !important;
}

.fOzXcC {
  display: flex !important;
}

@media (max-width: 50em) {
  /* The 5 menu-item rows are the only <div> children of .fOzXcC — the
     logo is wrapped in an <a>, not a div, so this leaves it untouched. */
  .fOzXcC > div {
    display: none !important;
  }
}

/* Page background is hardcoded to white in the site's own global
   stylesheet (body{background:white}), which shows through below the
   footer as a white strip whenever page content is shorter than the
   viewport. That global style block is also re-injected on hydration
   (same tie-and-lose issue as elsewhere in this file), so `html body`
   is used here instead of bare `body` for guaranteed higher specificity. */
html body {
  background: #F6F6F6;
}

/* The gray body background above would otherwise show through the main
   content area too (between header and footer) — keep that explicitly
   white so only genuinely empty space (e.g. below a short-content page)
   shows gray. */
main.jCdQgJ {
  background: white;
}

/* ---------- Header ---------- */

/* Full-bleed dark-green bar. .kSrGpX is a generic wrapper reused sitewide,
   so this must stay scoped to the .top-nav compound selector. .kSrGpX's own
   base rule caps it at max-width:1340px and centers it, so a plain
   `background` here would only color up to that width, leaving white
   strips on wider screens. Breaking out to 100vw via left:50% + a
   translateX(-50%) recentering (relies on .kSrGpX's own base rule already
   setting position:relative) gets a true edge-to-edge background without
   needing box-shadow/clip-path. */
.kSrGpX.top-nav {
  background: #003a2d;
  padding: 30px 10px;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* The full-bleed rule above stretches .kSrGpX.top-nav itself (background
   AND content, since <nav class="fOzXcC"> is its direct child) to 100vw —
   without this, the logo/menu items would also spread edge-to-edge. Only
   the background should bleed; the content stays in the site's normal
   1340px reading column, centered, same as everywhere else. */
.kSrGpX.top-nav .fOzXcC {
  max-width: 1340px;
  width: 100%;
  margin: 0 auto;
}

/* Remove the lime line rendered right below the header (a separate
   GreenLine component, .jMRbVj — element-type prefix for the same
   hydration re-injection reason as elsewhere in this file). */
div.jMRbVj {
  display: none;
}

/* ---------- Footer ---------- */

/* Element-type prefix needed: same hydration re-injection tie as .hdNRqY
   above — original styled-component rule also sets `background`, and the
   duplicate stylesheet React re-inserts after this file wins ties. */
footer.izCRYo {
  background: #F6F6F6;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

/* Footer content wrapper (the Container__Wrapper around the two columns).
   Scoped to footer.izCRYo so it doesn't touch other .kSrGpX sections
   sitewide. */
footer.izCRYo .kSrGpX {
  padding: 55px 0 35px 0;
}

/* Element-type prefix needed: same hydration re-injection tie as
   footer.izCRYo/div.hdNRqY above — bare .eevnYw ties with the site's
   own duplicate stylesheet on align-items and can lose depending on
   DOM insertion order. */
ul.eevnYw {
  max-width: 1340px;
  display: flex;
  flex-flow: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding: 0 10px;
  margin: 0px auto;
}

/* Column 1: contact info laid out as heading on top, address + phone/email
   as two sub-columns beneath it. Node order (fixed by the footer JSON):
   h4 "Vermflex GmbH", p "Bionstrasse 3", p "9015 St. Gallen",
   h6 phone link, p email link. */
.dxJtWE:first-child .cyjRmQ {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  column-gap: 3rem;
  row-gap: 0.25rem;
}

/* Explicit width/justify-self/margin/font-weight on every item below:
   the site's own footer stylesheet sets conflicting values (a duplicate
   weight declaration, 1rem margins, content-width sizing) that don't
   reliably lose to a plain grid-column override, so everything that
   matters is pinned explicitly rather than left to inherit. */
.dxJtWE:first-child .cyjRmQ h4 {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  justify-self: stretch;
  color: #003a2d;
  font-weight: 700;
  text-align: left;
  margin: 0 0 0.5rem 0;
}

.dxJtWE:first-child .cyjRmQ p:nth-of-type(1),
.dxJtWE:first-child .cyjRmQ p:nth-of-type(2) {
  grid-column: 1;
  width: 100%;
  justify-self: stretch;
  color: rgb(0, 58, 45);
  text-align: left;
  font-weight: 300;
  line-height: 1.8;
  margin: 0;
  margin-bottom: 0px;
}

.dxJtWE:first-child .cyjRmQ p:nth-of-type(1) {
  grid-row: 2;
}

.dxJtWE:first-child .cyjRmQ p:nth-of-type(2) {
  grid-row: 3;
}

.dxJtWE:first-child .cyjRmQ h6 {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  justify-self: stretch;
  text-align: left;
  font-weight: 300;
  line-height: 1.8;
  color: rgb(0, 58, 45);
  margin: 0;
  margin-bottom: 0px;
}

/* .dxJtWE a{font-weight:700} in the site's own stylesheet bolds every
   footer link by default — overridden explicitly on each link below.
   .link-secondary style: lime border-bottom instead of underline.
   !important needed on border-bottom: the site's own stylesheet has
   `.cyjRmQ a{border:none !important}`, which no specificity can beat. */
.dxJtWE:first-child .cyjRmQ h6 a,
.dxJtWE:first-child .cyjRmQ p:nth-of-type(3) a {
  display: inline-block;
  color: rgb(0, 58, 45);
  font-size: 16px;
  line-height: 1.8;
  transition: color 300ms;
  text-decoration: none;
  border-bottom: 1px solid rgb(149, 193, 31) !important;
  font-weight: 300;
}

.dxJtWE:first-child .cyjRmQ p:nth-of-type(3) {
  grid-column: 2;
  grid-row: 3;
  width: 100%;
  justify-self: stretch;
  text-align: left;
  font-weight: 300;
  line-height: 1.8;
  color: rgb(0, 58, 45);
  margin: 0;
  margin-bottom: 0px;
}

/* Column 2: social icon circles + legal text links, one row.
   .footer__social-wrapper spec (icon group vs. nav-items group,
   space-between) and .footer__nav-items spec (gap:40px, Impressum/
   Datenschutz specifically) approximated without real sub-wrapper
   elements — the rich-text renderer only gives us 5 flat <p> siblings,
   no wrapper divs to target directly. margin-left:auto on the first
   nav-item reproduces space-between's group gap; the icons and the two
   nav-items get their own explicit gaps via margin-left per item below. */
.dxJtWE:last-child .cyjRmQ {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}

.dxJtWE:last-child .cyjRmQ p {
  margin: 0;
}

.dxJtWE:last-child .cyjRmQ p:nth-of-type(2),
.dxJtWE:last-child .cyjRmQ p:nth-of-type(3) {
  margin-left: 12px;
}

.dxJtWE:last-child .cyjRmQ a {
  display: inline-block;
}

/* Impressum / Datenschutz — .link-secondary style: lime border-bottom
   instead of a text-decoration underline. !important needed: the site's
   own stylesheet has `.cyjRmQ a{border:none !important}`, which no
   selector specificity alone can beat. */
.dxJtWE:last-child .cyjRmQ p:nth-of-type(4) a,
.dxJtWE:last-child .cyjRmQ p:nth-of-type(5) a {
  color: rgb(0, 58, 45);
  font-size: 16px;
  line-height: 1.8;
  transition: color 300ms;
  text-decoration: none;
  border-bottom: 1px solid rgb(149, 193, 31) !important;
  font-weight: 300;
}

/* Gap between the icon group and the nav-items group (.footer__social
   -wrapper's column-gap value). The outer .eevnYw row already aligns
   this whole column to the footer's right edge via space-between, so
   no auto-margin/flex-end trick is needed here — margin-left:auto was
   tried and resolved to 0px because this column is only ever as wide
   as its own content (width:100% of a content-sized parent li), so
   there was no free space for an auto margin to consume. */
.dxJtWE:last-child .cyjRmQ p:nth-of-type(4) {
  margin-left: 45px;
}

/* .footer__nav-items{gap:40px} — Impressum/Datenschutz's own gap. */
.dxJtWE:last-child .cyjRmQ p:nth-of-type(5) {
  margin-left: 40px;
}

/* Social icon circles — text hidden visually, kept in DOM for a11y. */
.dxJtWE:last-child .cyjRmQ a[href*="linkedin"],
.dxJtWE:last-child .cyjRmQ a[href*="instagram"],
.dxJtWE:last-child .cyjRmQ a[href*="facebook"] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #003a2d;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
}

.dxJtWE:last-child .cyjRmQ a[href*="linkedin"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.88 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zm7.5 0h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.65 1.8-2.65 3.65V23h-4V8z'/%3E%3C/svg%3E");
}

.dxJtWE:last-child .cyjRmQ a[href*="instagram"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='white' stroke='none'/%3E%3C/svg%3E");
}

.dxJtWE:last-child .cyjRmQ a[href*="facebook"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06C2 17.08 5.66 21.23 10.44 22v-7.03H7.9v-2.91h2.54V9.85c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.44 2.91h-2.34V22C18.34 21.23 22 17.08 22 12.06z'/%3E%3C/svg%3E");
}

/* Hide the floating Jobs button if present on this page — /jobs is being removed. */
[class*="JobsButton"] {
  display: none !important;
}

/* ---------- Footer: mobile ----------
   Everything above this point is an unconditional (no media query) desktop
   grid/flex layout for the two footer columns. Below 35em is exactly where
   the site's own pre-existing stylesheet already switches .dxJtWE from
   width:auto (desktop, side-by-side columns) back to width:100% (mobile,
   stacked columns) — reusing that same breakpoint here so the internal
   column layouts switch to their mobile form at the same point the outer
   columns stack. Without this block the desktop grid/flex above still
   applies unconditionally on narrow screens, squeezing address+phone and
   city+email onto shared rows instead of stacking one item per line. */
@media (max-width: 35em) {
  .dxJtWE:first-child .cyjRmQ {
    display: block;
  }

  /* margin-top here is the gap "above" the icon row, separating it from
     the contact-info column above (the two are separate <li>s, so this
     can't be a row-gap — it has to live on the container itself). */
  .dxJtWE:last-child .cyjRmQ {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .dxJtWE:last-child .cyjRmQ p {
    margin: 0;
  }

  .dxJtWE:last-child .cyjRmQ p:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .dxJtWE:last-child .cyjRmQ p:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .dxJtWE:last-child .cyjRmQ p:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  /* Impressum / Datenschutz on their own row below the icons, pinned to
     opposite edges the same way the icon row is. margin-left:0 explicitly
     overrides the desktop rule's margin-left:45px further up this file —
     that rule's selector includes :nth-of-type(4), matching this one's
     specificity exactly, so only an explicit reset here (not the generic
     `.cyjRmQ p{margin:0}` above, which is less specific) can beat it. */
  .dxJtWE:last-child .cyjRmQ p:nth-of-type(4) {
    grid-column: 1 / 3;
    grid-row: 2;
    justify-self: start;
    margin-left: 0;
  }

  .dxJtWE:last-child .cyjRmQ p:nth-of-type(5) {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: end;
  }
}