/*
 * Targetic unified layout grid v12
 * One horizontal site grid for all pages and all responsive states.
 * Loaded last so older standalone page styles cannot re-introduce a second width system.
 */
/* v13 — stable viewport gutter
 * Keep the horizontal site grid fixed when navigating between pages whose
 * content does or does not require a vertical scrollbar. Without this, a
 * classic desktop scrollbar changes the available viewport width and makes
 * the centered header appear to jump when clicking the TARGETIC logo.
 */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  @media (min-width: 601px) {
    html { overflow-y: scroll; }
  }
}

:root {
  --site-content-max: 1500px;
  --site-page-pad: clamp(28px, 3vw, 72px);
}

/* Desktop / laptop: one global chrome and one global content grid. */
@media (min-width: 1051px) {
  .site-header {
    height: 106px !important;
  }
  .header-inner {
    position: relative !important;
    width: 100% !important;
    max-width: var(--site-content-max) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--site-page-pad) !important;
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) 170px !important;
    column-gap: clamp(14px, 1.7vw, 30px) !important;
    align-items: center !important;
  }
  .brand img {
    width: 246px !important;
    height: auto !important;
  }
  .main-nav {
    gap: clamp(19px, 1.55vw, 31px) !important;
    padding-top: 0 !important;
  }
  .main-nav a {
    padding: 42px 0 39px !important;
    font-size: clamp(14.5px, 1.05vw, 16.5px) !important;
  }
  .main-nav a.active::after {
    bottom: 28px !important;
  }
  .top-cta {
    min-width: 170px !important;
    height: 46px !important;
    padding: 0 18px !important;
    font-size: 14.5px !important;
  }

  /* Shared main grid. Leistungen/Check already use this; Erfahrung/Ueber now do too. */
  .content-wrap {
    width: 100% !important;
    max-width: var(--site-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--site-page-pad) !important;
    padding-right: var(--site-page-pad) !important;
  }

  /* Contact keeps a deliberately readable form width, but lives inside the same site grid. */
  .contact-main {
    width: 100% !important;
    max-width: var(--site-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--site-page-pad) !important;
    padding-right: var(--site-page-pad) !important;
  }
  .contact-main > .contact-intro,
  .contact-main > .form-card {
    width: 100% !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-inner {
    width: 100% !important;
    max-width: var(--site-content-max) !important;
    min-height: 126px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 24px var(--site-page-pad) !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 1fr) auto auto !important;
    grid-template-areas: none !important;
    gap: 24px !important;
    align-items: center !important;
  }
  .footer-company { white-space: nowrap !important; font-size: 13px !important; }
  .footer-contact { white-space: nowrap !important; gap: 18px !important; }
  .footer-links { flex-direction: row !important; gap: 30px !important; font-size: 13px !important; }
}

/* Wide desktop: same max grid on every page; only chrome scales mildly. */
@media (min-width: 1180px) {
  .site-header { height: clamp(106px, 7.6vw, 122px) !important; }
  .header-inner {
    grid-template-columns: clamp(270px, 20vw, 320px) minmax(0, 1fr) clamp(170px, 12vw, 182px) !important;
  }
  .brand img { width: clamp(246px, 18vw, 290px) !important; }
  .main-nav a { font-size: clamp(14.5px, 1.08vw, 17px) !important; }
  .top-cta {
    min-width: clamp(170px, 12vw, 182px) !important;
    height: clamp(46px, 3.4vw, 50px) !important;
    font-size: clamp(14.5px, 1vw, 15.5px) !important;
  }
  .footer-inner {
    min-height: 126px !important;
    grid-template-columns: minmax(360px, 1fr) auto auto !important;
  }
}

/* Tablet landscape / Surface / iPad landscape. */
@media (min-width: 901px) and (max-width: 1050px) {
  .site-header { height: 96px !important; }
  .header-inner {
    width: 100% !important;
    max-width: none !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    grid-template-columns: 1fr auto auto !important;
    column-gap: 14px !important;
  }
  .brand img { width: 214px !important; }

  .content-wrap,
  .contact-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .contact-main > .contact-intro,
  .contact-main > .form-card {
    max-width: 790px !important;
  }

  .footer-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 126px !important;
    padding: 18px 28px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "company links" "contact links" !important;
    gap: 8px 28px !important;
  }
  .footer-company { grid-area: company !important; white-space: normal !important; }
  .footer-contact { grid-area: contact !important; }
  .footer-links { grid-area: links !important; flex-direction: column !important; gap: 9px !important; }
}

/* Tablet portrait / Surface / iPad portrait. */
@media (max-width: 900px) and (min-width: 601px) {
  .site-header { height: 92px !important; }
  .header-inner {
    width: 100% !important;
    max-width: none !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    grid-template-columns: 1fr auto !important;
    column-gap: 24px !important;
  }
  .brand img { width: 215px !important; }

  .content-wrap,
  .contact-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .contact-main > .contact-intro,
  .contact-main > .form-card {
    max-width: 700px !important;
  }

  .footer-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 136px !important;
    padding: 22px 32px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "company links" "contact links" !important;
    gap: 9px 28px !important;
  }
  .footer-company { grid-area: company !important; white-space: normal !important; }
  .footer-contact { grid-area: contact !important; }
  .footer-links { grid-area: links !important; flex-direction: row !important; gap: 28px !important; }
}

/* Smartphone / mobile: one edge system for all pages. */
@media (max-width: 600px) {
  .site-header { height: 72px !important; }
  .header-inner {
    width: 100% !important;
    max-width: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    grid-template-columns: 1fr auto !important;
    column-gap: 14px !important;
  }
  .brand img { width: 170px !important; max-width: 100% !important; }

  .content-wrap,
  .contact-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .contact-main > .contact-intro,
  .contact-main > .form-card {
    max-width: none !important;
  }

  .footer-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 23px 17px 27px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "company" "contact" "links" !important;
    gap: 15px !important;
    align-items: start !important;
  }
  .footer-company { grid-area: company !important; white-space: normal !important; }
  .footer-contact { grid-area: contact !important; white-space: normal !important; }
  .footer-links { grid-area: links !important; flex-direction: row !important; gap: 24px !important; }
}


/* v50 — footer: existing information, clean grouped layout only.
 * No logo, no new content, no additional navigation.
 */
.site-footer {
  height: auto !important;
  min-height: 0 !important;
}

.footer-inner {
  min-height: 126px !important;
}

.footer-company,
.footer-contact,
.footer-links {
  min-width: 0;
}

.footer-company {
  gap: 0 !important;
}

.footer-company strong::after {
  content: "·" !important;
  margin-left: 6px;
  margin-right: 6px;
  color: rgba(255,255,255,.42) !important;
  font-weight: 400 !important;
}

.footer-contact,
.footer-links {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.footer-contact .contact-item + .contact-item::before,
.footer-links a + a::before,
.footer-links .targetic-consent-settings::before {
  content: "·";
  display: inline-block;
  margin: 0 14px;
  color: rgba(255,255,255,.42);
  font-weight: 400;
  text-decoration: none;
}

/* Desktop and tablet landscape: one calm line, three clear groups. */
@media (min-width: 901px) {
  .footer-inner {
    width: 100% !important;
    max-width: var(--site-content-max) !important;
    margin: 0 auto !important;
    padding: 24px var(--site-page-pad) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas: "company contact links" !important;
    column-gap: clamp(24px, 3vw, 48px) !important;
    row-gap: 0 !important;
    align-items: center !important;
  }
  .footer-company {
    grid-area: company !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    white-space: nowrap !important;
  }
  .footer-contact {
    grid-area: contact !important;
    justify-self: end !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  .footer-links {
    grid-area: links !important;
    justify-self: end !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
}

/* Tablet portrait: company/address on the first row; contact and legal links below. */
@media (max-width: 900px) and (min-width: 601px) and (min-height: 601px) {
  .footer-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 136px !important;
    padding: 24px 32px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "company company" "contact links" !important;
    column-gap: 28px !important;
    row-gap: 18px !important;
    align-items: center !important;
  }
  .footer-company {
    grid-area: company !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    white-space: normal !important;
  }
  .footer-contact {
    grid-area: contact !important;
    justify-self: start !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  .footer-links {
    grid-area: links !important;
    justify-self: end !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
}

/* Mobile landscape: same grouping, compressed to two rows. */
@media (max-width: 900px) and (max-height: 600px) and (orientation: landscape) {
  .footer-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 18px 22px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "company company" "contact links" !important;
    column-gap: 24px !important;
    row-gap: 12px !important;
    align-items: center !important;
  }
  .footer-company {
    grid-area: company !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    white-space: normal !important;
  }
  .footer-contact {
    grid-area: contact !important;
    justify-self: start !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  .footer-links {
    grid-area: links !important;
    justify-self: end !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
}

/* Mobile portrait: three simple groups, no separator between company name and address. */
@media (max-width: 600px) and (min-height: 601px),
       (max-width: 600px) and (orientation: portrait) {
  .footer-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 23px 17px 27px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "company" "contact" "links" !important;
    gap: 16px !important;
    align-items: start !important;
  }
  .footer-company {
    grid-area: company !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    white-space: normal !important;
  }
  .footer-company strong::after {
    display: none !important;
  }
  .footer-contact {
    grid-area: contact !important;
    justify-self: start !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  .footer-links {
    grid-area: links !important;
    justify-self: start !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
}