/* #region Page */
/* kpt_mcnext_custom_forms sets html, body to --bg-gray (#fafafa) for the forms;
   feedback landing pages are white. :root outranks the bare html, body selector, so
   this wins whatever the load order and covers the html element too. Scoped to
   pages with our footer, so the forms in the Empfehlen iframes stay as they were. */
:root:has(.kpt-footer),
:root:has(.kpt-footer) body {
  background-color: #fff;
}

/* The full-width iframe and footer band are 100vw, which counts the scrollbar. */
:root:has(.kpt-footer) {
  overflow-x: clip;
}

/* The builder wraps the page in a 12px section, a 34px top margin and 8px
   section/column padding. Only pages with our footer lose it, so the other
   landing pages keep their spacing. */
community_layout-section.comm-section-container:has(.kpt-footer),
es_block_builder-landing-page-renderer:has(.kpt-footer) es_base_components-section.exp-host-component,
es_block_builder-landing-page-renderer:has(.kpt-footer) es_base_components-column.exp-host-component {
  margin: 0;
  padding: 0;
}

/* The html component clips with overflow:auto, which would cut the full-width
   footer band and the full-width iframe (each sits in its own html component). */
es_base_components-html.exp-host-component:has(.kpt-footer),
es_base_components-html.exp-host-component:has(.kpt-iframe) {
  overflow: visible;
}

/* Page gutter as on kpt.ch: 40px on desktop, 24px (top 16px) on mobile. The top
   value is 7px smaller because the logo png has about 7px of empty space above
   the mark, so the mark itself sits at 40px / 16px. */
:root:has(.kpt-footer) {
  --kpt-gutter: 40px;
  --kpt-gutter-top: 33px;
}

@media (max-width: 767px) {
  :root:has(.kpt-footer) {
    /* 8px + the logo png's own 4px of empty space on the left puts the mark on
       the same 12px line as the survey's progress label. */
    --kpt-gutter: 8px;
    --kpt-gutter-top: 9px;
  }
  /* The divider keeps the survey's 12px line; the gutter itself is 8px. */
  .kpt-footer-inner {
    margin: 0 4px;
  }
}

/* The page itself carries the gutter (top, left, right), so logo, iframe and
   footer all line up on it. The width is capped and centred on wide screens. */
es_block_builder-landing-page-renderer:has(.kpt-footer) {
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--kpt-gutter-top) var(--kpt-gutter) 0;
  /* Sticky footer: the page is at least as tall as the window and the section
     holding the footer takes the leftover space above it. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
/* The section holding the survey grows into the leftover space and carries the
   same full-width grey band as the survey, so no white gap opens above the
   footer on tall windows. */
es_block_builder-landing-page-renderer:has(.kpt-footer) > es_base_components-section:has(.kpt-iframe) {
  flex: 1 0 auto;
  background-color: #f2f2f2;
  box-shadow: 0 0 0 100vmax #f2f2f2;
  clip-path: inset(0 -100vmax);
}
/* #endregion */

/* #region Iframe */
/* Height is only a default: the script that loads the survey sets an inline
   height later, which wins over this rule. */
.kpt-iframe {
  display: block;
  width: 100vw;
  max-width: none;
  /* breaks out of the page gutter, so the survey's grey band reaches both
     window edges like the footer band */
  margin-left: calc(50% - 50vw);
  height: 600px;
  border: 0;
}
/* Builder gives the html component and its column a white background, which
   would show through while the frame is hidden or loading. */
es_base_components-html.exp-host-component:has(.kpt-iframe),
es_base_components-column.exp-host-component:has(.kpt-iframe) {
  background-color: #f2f2f2;
}
.kpt-iframe {
  background-color: #f2f2f2;
}
/* Hidden until the script sees the survey content, so the dark loading
   background of the empty frame never shows. */
.kpt-iframe:not(.kpt-loaded) {
  visibility: hidden;
}
/* #endregion */

/* #region Footer */
/* Measured from the Kundenportal footer (screenshot of 2026-09-15): 1px #d1d1d1
   divider, items centred with a 25px gap, 16px medium text, copyright #545454,
   links dark grey and underlined (kpt.ch: #404040, #262626 on hover). */
/* Grey band across the whole window (same grey as the survey screen and the
   portal) while the content stays inside the 1440px page. */
.kpt-footer {
  padding: 24px 0 32px;
  background-color: #f2f2f2;
  box-shadow: 0 0 0 100vmax #f2f2f2;
  clip-path: inset(0 -100vmax);
}

.kpt-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  border-top: 1px solid #d1d1d1;
  padding-top: 22px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.kpt-footer-copyright {
  color: #545454;
  white-space: nowrap;
}

.kpt-footer-link {
  color: #404040;
  text-decoration: underline;
  white-space: nowrap;
}

/* Same as kpt.ch: the link only gets darker on hover, it never turns blue. */
.kpt-footer-link:hover,
.kpt-footer-link:focus-visible,
.kpt-footer-link:active {
  color: #262626;
  text-decoration: underline;
}
/* #endregion */

/* Same text rendering as kpt.ch (antialiased); only on the feedback pages. */
:root:has(.kpt-footer) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}