/* kamuno-chrome.css — header & footer lifted from kamuno.ch (DE). Generated; do not hand-edit piecemeal. */

/* ===== fonts (kmu-studie optimized) ===== */

/* Alaska — titles/header/footer */
@font-face {
  font-family: 'alaska';
  src: url("./fonts/kamuno/alaska-book.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'alaska';
  src: url("./fonts/kamuno/alaska-regular.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'alaska';
  src: url("./fonts/kamuno/alaska-medium.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ===== variables ===== */

/*
  Font size system (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

  Spacing system (px)
  2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

:root {
  /* Colors */
  --color-primary: #27d068;
  --color-primary-light: #29d068;
  --color-primary-dark: #23bb5e;

  --color-secondary: #142c33;
  --color-secondary-alpha: rgba(20, 44, 51, 0.03);
  --color-secondary-alpha-hover: rgba(20, 44, 51, 0.08);
  --color-secondary-light: #5b6b70;
  --color-tertiary: #f9feea;

  --color-quaternary: #ed7e40;
  --color-quaternary-alpha: rgba(241, 102, 24, 0.03);
  --color-quaternary-alpha-hover: rgba(241, 102, 24, 0.08);
  --color-accent: #2663e5;
  --color-accent-light: #6792ed;
  --color-accent-alpha: rgba(115, 159, 255, 0.1);

  --color-white: #fff;
  --color-indicator: #e85c41;
  --color-subheading: #2b7534;
  --color-subheading-alpha: #64cd721a;
  --color-gradient-accent: #0f143d;
  --color-error: #ff0000;
  --color-error-alpha: #ffe6e6;
  --color-light-grey: #f6f9fb;
  --color-light-grey--1: #f1f5f9;
  --color-light-grey--2: #e2ebf4;
  --color-light-grey--2-alpha: #eef3f8;
  --color-light-grey--3: #939ba3;
  --color-text-complementary: #6f6c90;
  --color-background-complementary: #17242f;
  --color-background-complementary--dark: #15202a;
  --color-background-tooltip: #0f1b18;
  --color-tag: #f3f4f6cc;
  --color-cookie-btn: #2E3A44;
  --color-simulator-positive: linear-gradient(180deg, #27D067 0%, #7BE28E 65.87%);
  --color-simulator-negative: linear-gradient(180deg, #A0AEC0 0%, #CBD5E0 65.87%);
  --color-circle--inactive: rgba(39, 208, 104, 0.3);
  --color-circle--pending: #E8BF07;

  /* Box shadow */
  --shadow-light: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.02);
  --shadow-medium: 0 0.5rem 2.4rem rgba(0, 0, 0, 0.07);
  --shadow-dark: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.08);
  --shadow-circle--active: 0 0 0 0.4rem rgba(39, 208, 103, 0.1);
  --shadow-circle--pending: 0 0 0 4px rgba(232, 191, 7, 0.1);
  --shadow-simulator-positive: 0.2rem 1.4rem 2.2rem rgb(10, 128, 55);
  --shadow-simulator-negative: 0.2rem 1.4rem 2.2rem rgba(16, 16, 16, 0.5);

  /* Line height */
  --lheight-body: 1.7;
  --lheight-heading--1: 1.2;
  --lheight-heading--2: 1.1;
  --lheight-subheading: 1.5;
  --lheight-footer: 2;

  /* Border radius */
  --radius-circle: 50%;
  --radius-small: 0.8rem;
  --radius-default: 3rem;
  --radius-medium: 5rem;
  --radius-large: 9rem;
  --radius-img--blog: var(--radius-default);

  /* Font family */
  --font-alaska: 'alaska', sans-serif;
  --font-arial: 'arial', sans-serif;
  --font-roboto: 'roboto-mono', monospace;

  /* Font size */
  --font-small: 1.2rem;
  --font-default: 1.4rem;
  --font-heading--1: 6.2rem;
  --font-heading--2: 5.2rem;
  --font-heading--3: 4.4rem;
  --font-heading--4: 1.8rem;
  --font-text-default: 1.6rem;
  --font-text-btn: calc(var(--font-small) + 0.1rem);
  --font-text-testimonial: 2.5rem;
  --font-simulator-heading: 3rem;
  --font-progress-steps: 1rem;
  --font-blog-heading--1: 5rem;
  --font-blog-heading--3: 2rem;

  /* Font weight */
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Letter spacing */
  --space-subheading: 0.01rem;
  --space-heading: -0.1rem;

  /* Margin */
  --margin-negative-small: -0.5rem;
  --margin-negative: -1.5rem;
  --margin-form-label: 0.3rem;
  --margin-list: 0.5rem;
  --margin-small: 1rem;
  --margin-default: 2rem;
  --margin-normal: 3rem;
  --margin-large: 9.6rem;
  --margin-blog-paragraph: 1.5rem;
  --margin-accordion: 8.4rem;
  --margin-simulator: 4.2rem auto;
  --margin-hero-img: var(--height-header);

  /* Padding */
  --padding-section: 9.6rem 0;
  --padding-section-small: 6.4rem 0;

  --padding-xsmall: 0.2rem;
  --padding-small: 1rem;
  --padding-normal: 3rem;
  --padding-medium: 5rem;
  --padding-large: 12.8rem;

  --padding-banner: 0.7rem 0 0.5rem;
  --padding-banner--accent: 1.5rem 0;
  --padding-button: 0.8rem 2.5rem;
  --padding-form-button: 1.1rem 2.5rem;
  --padding-header-button: 0.8rem 2.5rem 0.8rem 4.2rem;
  --padding-subheading: 0.5rem 1.8rem;
  --padding-link: 1rem 1.5rem;
  --padding-hero-textbox: 9.6rem 12rem 0 0;
  --padding-form-textbox: 4.8rem 6.4rem 3.2rem;
  --padding-card-content: 2rem 2.5rem 3rem;
  --padding-tooltip: 0.8rem 1.2rem;
  --padding-text-testimonial: 0 8rem;
  --padding-simulator: 5rem 10rem 3rem;
  --padding-simulator-btn: 0.8rem 4.2rem;
  --padding-simulator-email: 3rem 2rem 2rem;

  /* Gaps */
  --gap-xsmall: 0.5rem;
  --gap-small: 1rem;
  --gap-mobile: 2rem;
  --gap-normal: 3rem;
  --gap-medium: 5rem;
  --gap-large: 16rem;

  /* Borders */
  --border-header: rgb(238, 238, 238);
  --border-footer: 0.1rem solid #293b49;
  --border-default: 0.1rem solid rgba(128, 128, 128, 0.15);
  --border-hover: 0.1rem solid #27d068;
  --border-transparent: 0.1rem solid transparent;
  --border-circle--inactive: 0.1rem solid var(--color-white);
  --border-info-box: 0.5rem solid var(--color-primary);
  --border-table: 0.1rem solid var(--color-light-grey--2);
  --border-blog-link: 0.1rem solid black;
  --border-hockey: 0.1rem solid var(--color-indicator);


  /* Themes */
  --text-paragraph: var(--color-secondary-light);
  --transition-default: all 0.3s;
  --height-header: 13rem;
  --height-cookie: 18rem;
  --height-simulator-button: 4rem;
  --height-simulator-email: 24vh;
  --height-simulator: 100vh;
  --width-simulator: 75rem;
  --width-tooltip: 25rem;

  /* Sizes */
  --size-icon-default: 1.5rem;
  --size-icon-list: 1.3rem;
  --size-icon-bell: 2rem;
  --size-icon-simulator: 1.8rem;
  --size-checkbox: 1.5rem;
  --logo-height-default: 4rem;
  --input-field-height: 4rem;
  --size-progress-circle: 1.9rem;
  --size-simulator-circle--inner: 13rem;
  --size-simulator-circle--outer: 19rem;
  --size-graphic-wrapper: 22rem;
}

/* ── Root rem base (kamuno chrome uses rem @ 1rem=10px). kmu uses 0 rem, so
   this is safe; body font-size pinned to preserve kmu's default text size. ── */
html { font-size: 62.5%; }
body { font-size: 16px; }  /* pinned: insulate kmu from kamuno's responsive rem scaling */
@media only screen and (max-width: 84.375em) { html { font-size: 56%; } }
@media only screen and (max-width: 70em)     { html { font-size: 66%; } }
@media only screen and (max-width: 56.25em)  { html { font-size: 68%; } }
@media only screen and (max-width: 26.25em)  { html { font-size: 72%; } }


/* ===== utilities (components.css) ===== */

/* REUSABLE COMPONENTS & CLASSES */

/* CONTAINERS */
.container, .container-hero {
  max-width: 129rem;
  margin: 0 auto;
}
.grid {
  display: grid;
  column-gap: calc(var(--gap-normal) * 4);
  row-gap: var(--gap-normal);
}
.grid--custom-cols {
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-gap: var(--gap-medium);
}
.flex {
  display: flex;
}
.content-sb {
  justify-content: space-between;
}
.content-center {
  align-items: center;
}
.logo-box-position {
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--gap-large) - 2rem);
}
/* HEADINGS */
.subheading {
  display: block;
  width: max-content;
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  line-height: var(--lheight-subheading);
  letter-spacing: var(--space-subheading);
  margin-bottom: calc(var(--margin-normal) / 2);
  padding: var(--padding-subheading);
  border-radius: var(--radius-large);
  font-family: var(--font-alaska);
}
span.subheading {
  hyphens: auto;
}
.contact-link::before {
  display: inline-block;
  content: "";
  margin-right: var(--margin-small);
  vertical-align: text-top;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--color-quaternary);
}
.contact-link--mail::before {
  height: 1.5rem;
  width: 1.6rem;

  /* For older browsers */
  background-image: url("./assets/kamuno/email-white.svg");
  background-size: cover;

  /* For newer browsers - masking */
  @supports (-webkit-mask-image: url()) or (mask-image: url()) {
    -webkit-mask-image: url("./assets/kamuno/email-white.svg");
    mask-image: url("./assets/kamuno/email-white.svg");
    background-image: none;
  }
}
.contact-link--phone::before {
  height: 1.5rem;
  width: 1.2rem;
  margin-left: var(--margin-small);

  background-image: url("./assets/kamuno/mobile-white.svg");
  background-size: cover;

  @supports (-webkit-mask-image: url()) or (mask-image: url()) {
    -webkit-mask-image: url("./assets/kamuno/mobile-white.svg");
    mask-image: url("./assets/kamuno/mobile-white.svg");
    background-image: none;
  }
}
.contact-link span {
  border-bottom: var(--border-transparent);
  padding-bottom: var(--padding-xsmall);
  transition: var(--transition-default);
}
@media only screen and (max-width: 56.25em) {
.container-hero {
    margin: 0;
  }
}
@media only screen and (max-width: 43.75em) {
.container, .container-assessment, .container-legal {
    margin: 0 3rem;
  }
}
@media only screen and (max-width: 29.375em) {
.container, .container-assessment, .container-legal {
    max-width: 36rem;
  }
}
@media only screen and (max-width: 26.25em) {
.container, .container-assessment, .container-legal {
    margin: 0 1.5rem;
  }
}

/* ===== buttons (elements.css) ===== */

.icon {
  width: var(--size-icon-default);
  height: var(--size-icon-default);
}
/* BUTTONS */
.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  text-decoration: none;
  font-size: var(--font-text-btn);
  font-weight: var(--weight-light);
  padding: var(--padding-button);
  border-radius: var(--radius-large);

  /* Only necessary for .btn */
  border: var(--border-transparent);
  cursor: pointer;
  font-family: var(--font-alaska);

  /* Trick for a nicer transitioning of button's color in hover state */
  /* Put it always on the original/default "state" */
  transition: var(--transition-default);
}
button.btn {
  padding: var(--padding-form-button);
}
.btn--full:link,
.btn--full:visited,
button.btn--full {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.btn--full:hover,
.btn--full:active,
button.btn--full:hover {
  background-color: var(--color-primary-dark);
}
.btn--full.btn--full-secondary:link,
.btn--full.btn--full-secondary:visited,
button.btn--full.btn--full-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}
.btn--full.btn--full-secondary:hover,
.btn--full.btn--full-secondary:active,
button.btn--full.btn--full-secondary:hover {
  background-color: var(--color-background-complementary);
  color: var(--color-white);
}
.btn--outline:link,
.btn--outline:visited {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 0.1rem solid currentColor;
}
.btn--outline:hover,
.btn--outline:active {
  color: var(--color-primary-dark);
}
.btn.header-buttons--login,
.btn.header-buttons--portal {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--padding-header-button);
  color: var(--color-secondary);
  background-color: var(--color-secondary-alpha);
  border-radius: var(--radius-large);
  font-size: var(--font-text-btn);
  font-weight: var(--weight-light);
  line-height: 1.2;
  transition: var(--transition-default);
}

.btn.header-buttons--login:hover,
.btn.header-buttons--login:active,
.btn.header-buttons--portal:hover,
.btn.header-buttons--portal:active {
  background-color: var(--color-secondary-alpha-hover);
  color: var(--color-secondary);
}

.header-buttons a.btn:not(.btn--full) {
  border: var(--border-transparent);
}

.header-buttons--login::before,
.header-buttons--portal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(0.5rem + 1.4rem);
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: url("./assets/kamuno/locker-black.svg") center / 10px 10px no-repeat;
  pointer-events: none;
  z-index: 1;
}

.header-buttons--login::after,
.header-buttons--portal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.5rem;
  transform: translateY(-50%);
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--radius-circle);
  background-color: rgba(20, 44, 51, 0.06);
  pointer-events: none;
  transition: var(--transition-default);
}

.header-buttons--login:hover::after,
.header-buttons--login:active::after,
.header-buttons--portal:hover::after,
.header-buttons--portal:active::after {
  background-color: rgba(20, 44, 51, 0.1);
}

/* ===== header ===== */

.banner {
  padding: var(--padding-banner--accent);
  background: linear-gradient(
      90deg,
      var(--color-secondary) 40%,
      var(--color-primary-light) 95%
  ),
  var(--color-gradient-accent);
  color: var(--color-white);
  font-family: var(--font-arial);
  width: 100%;
}

.banner p {
  font-size: var(--font-default);
}

.banner-content {
  gap: var(--gap-small);
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  display: none;
}

.banner-content img {
  display: block;
  flex-shrink: 0;
}

.banner-content a {
  color: var(--color-white);
  text-decoration: underline;
  font-weight: var(--weight-bold);
  font-size: var(--font-default);
  white-space: nowrap;
}

.mobile-text {
  display: none;
}

.bell {
  display: none;
}

/* Scope to site chrome only — bare `header` also matches in-page heroes (e.g. blog listing). */
header.header {
  grid-template-rows: auto 1fr;
  background-color: var(--color-white);
  height: fit-content;
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

body.page-kmu-studie {
  padding-top: 0;
}

header.header a {
  margin: 0;
  padding: 0;
}

/* body{} removed (sticky header, no offset) */

header.header > * {
  font-family: var(--font-alaska);
  font-weight: var(--weight-light);
}

header.header::after {
  display: block;
  content: "";
  height: 0.05rem;
  width: 100%;
  background-color: var(--border-header);
  position: absolute;
  bottom: 0;
}

.header-content--left,
.header-content--right {
  align-items: center;
}

.header-content--left {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 3vw, 4rem);
  flex: 1 1 auto;
  min-width: 0;
}

.header-content--right {
  gap: var(--gap-small);
}

.header-content {
  min-height: 54px;
  flex-wrap: nowrap;
}

.header-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 0;
  height: 59px;
  min-height: 59px;
  box-sizing: border-box;
  overflow: visible;
  transition:
    height 0.35s ease,
    min-height 0.35s ease,
    padding-top 0.35s ease,
    padding-bottom 0.35s ease;
}

.header-top.header-top--compact {
  height: auto;
  min-height: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

.border {
  border-top: var(--border-default);
  padding: 0;
}

.header-bottom {
  padding-top: var(--padding-small);
}

.header-content--left.header-bottom {
  padding-top: 0;
}

.header-content .header-nav--main {
  padding-top: 8px;
  box-sizing: border-box;
}

.header-content .header-nav--main a,
.header-content .header-nav--main a > * {
  color: #142c33;
}

.header-logo--link {
  padding: var(--padding-small);
}

.header-logo {
  width: 100%;
  height: auto;
}

.header-nav--main-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}

.header-nav--main {
  gap: calc(var(--gap-small) * 2);
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: none;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  align-self: stretch;
  align-items: center;
}

.header-nav--main a,
.header-nav--main a > *,
.lang-list a > * {
  display: block;
  color: inherit;
}

.header-nav--main > .nav-list-item > a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 1.4rem;
}

.header-nav--sub a {
  font-size: 1.4rem;
}

.nav-list-item a:not(.nav-list-item a:last-child, .header-nav--sub a)::after {
  display: inline-block;
  content: "";
  height: var(--size-icon-default);
  width: var(--size-icon-default);
  margin-left: var(--margin-small);
  flex-shrink: 0;
  vertical-align: middle;
  cursor: pointer;
  transition: var(--transition-default);

  /* For older browsers */
  background-image: url("./assets/kamuno/chevron-down-black.svg");
  background-size: cover;

  /* For newer browsers - masking */
  @supports (-webkit-mask-image: url()) or (mask-image: url()) {
    background-color: var(--color-secondary);
    -webkit-mask-image: url("./assets/kamuno/chevron-down-black.svg");
    -webkit-mask-size: cover;
    mask-image: url("./assets/kamuno/chevron-down-black.svg");
    mask-size: cover;
    background-image: none;
  }
}

.header-buttons {
  gap: var(--gap-small);
}

.lang {
  gap: var(--gap-xsmall);
  padding: var(--padding-link);
  border-top: var(--border-transparent);
}

.lang p,
.lang .lang-text {
  font-size: var(--font-default);
  font-family: var(--font-alaska);
}

/* NAVIGATION DROPDOWNS */
.header-nav--sub,
.lang-list {
  width: max-content;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--radius-small);
  background-color: var(--color-white);
  box-shadow: var(--shadow-medium);
  padding: var(--padding-small) 0;
  z-index: 1000;
  visibility: hidden;
  opacity: 0%;
  backface-visibility: hidden;
}

.header-nav--sub {
  top: 100%;
  left: 0;
  padding-top: var(--header-dropdown-bridge, 1rem);
  margin-top: 0;
  transform: none;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
}

.header-nav--sub li a {
  margin-left: 8px;
  margin-right: 8px;
  padding: var(--padding-small);
}

.lang-list {
  transform: translateY(10%);
  transition: var(--transition-default);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xsmall);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lang-toggle:focus-visible {
  outline: 0.12rem solid var(--color-primary);
  outline-offset: 0.12rem;
  border-radius: var(--radius-small);
}

.nav-list-item.is-dropdown-open > a[data-nav]::after,
.nav-list-item > a[data-nav][aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.header-nav--sub li,
.lang-list li {
  padding: 0 calc(var(--padding-normal) / 2);
  margin-bottom: calc(var(--margin-small) - 0.5rem);
}

.lang-text {
  font-weight: var(--weight-medium);
}

.nav-list-item,
.lang {
  position: relative;
  cursor: pointer;
  transition: var(--transition-default);
}

.lang img {
  width: var(--size-icon-default);
  height: var(--size-icon-default);
  background-image: none !important;
}

.header-nav--sub a:hover,
.header-nav--sub a:active,
.lang-list div:hover,
.lang-btn:hover {
  background-color: var(--color-light-grey--1);
  border-radius: calc(var(--radius-small) - 0.3rem);
  cursor: pointer;
}

/* Desktop header language dropdown */
@media only screen and (min-width: 48em) {
  .header-top .lang-dropdown {
    z-index: 1001;
  }

  .header-top .lang-dropdown .lang-list {
    top: calc(100% + 0.35rem);
    left: 50%;
    min-width: 5.5rem;
    transform: translateX(-50%);
    padding: var(--padding-small) 0;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 0.2s ease,
      visibility 0s linear 0.2s,
      transform 0.2s ease;
  }

  .header-top .lang-dropdown.is-dropdown-open .lang-list,
  .header-top .lang-dropdown:hover .lang-list {
    visibility: visible;
    opacity: 100%;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
      opacity 0.2s ease,
      visibility 0s,
      transform 0.2s ease;
  }

  .header-top .lang-dropdown .lang-list li {
    margin-bottom: 0;
    padding: 0 calc(var(--padding-normal) / 2);
  }

  .header-top .lang-dropdown .lang-list .lang-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--padding-small);
    border-radius: calc(var(--radius-small) - 0.3rem);
    text-align: center;
    text-decoration: none;
    color: inherit;
    font-family: var(--font-alaska);
    font-size: var(--font-small);
    font-weight: var(--weight-light);
    line-height: 1.2;
  }

  .header-top .lang-dropdown .lang-list .lang-btn.nav-link-active--lang,
  .header-top .lang-dropdown .lang-list .lang-btn[aria-current="true"] {
    color: var(--color-secondary);
    background-color: var(--color-light-grey--1);
    font-weight: var(--weight-medium);
  }

  .header-top .lang-dropdown .lang-list .lang-btn.lang-btn--disabled,
  .header-top .lang-dropdown .lang-list .lang-btn[aria-disabled="true"] {
    pointer-events: none;
    cursor: not-allowed;
    color: var(--color-light-grey--3);
    opacity: 0.55;
    background-color: transparent !important;
  }
}

.nav-list-item {
  border-top: var(--border-transparent);
}

/* Active primary nav — set data-active-nav on <body> (or any wrapper with the attribute) */
body[data-active-nav="kmu-kredit"] .header-nav--main > .nav-list-item > a[data-nav="kmu-kredit"],
body[data-active-nav="partner"] .header-nav--main > .nav-list-item > a[data-nav="partner"],
body[data-active-nav="about"] .header-nav--main > .nav-list-item > a[data-nav="about"],
body[data-active-nav="blog"] .header-nav--main > .nav-list-item > a[data-nav="blog"],
body[data-active-nav="kmu-kredit"] .nav-mobile--links a.nav-group[data-nav="kmu-kredit"],
body[data-active-nav="partner"] .nav-mobile--links a.nav-group[data-nav="partner"],
body[data-active-nav="about"] .nav-mobile--links a.nav-group[data-nav="about"],
body[data-active-nav="blog"] .nav-mobile--links a.nav-group[data-nav="blog"],
[data-active-nav="kmu-kredit"] .header-nav--main > .nav-list-item > a[data-nav="kmu-kredit"],
[data-active-nav="partner"] .header-nav--main > .nav-list-item > a[data-nav="partner"],
[data-active-nav="about"] .header-nav--main > .nav-list-item > a[data-nav="about"],
[data-active-nav="blog"] .header-nav--main > .nav-list-item > a[data-nav="blog"],
[data-active-nav="kmu-kredit"] .nav-mobile--links a.nav-group[data-nav="kmu-kredit"],
[data-active-nav="partner"] .nav-mobile--links a.nav-group[data-nav="partner"],
[data-active-nav="about"] .nav-mobile--links a.nav-group[data-nav="about"],
[data-active-nav="blog"] .nav-mobile--links a.nav-group[data-nav="blog"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

body[data-active-nav="kmu-kredit"] .nav-list-item:has(> a[data-nav="kmu-kredit"]),
body[data-active-nav="partner"] .nav-list-item:has(> a[data-nav="partner"]),
body[data-active-nav="about"] .nav-list-item:has(> a[data-nav="about"]),
body[data-active-nav="blog"] .nav-list-item:has(> a[data-nav="blog"]),
[data-active-nav="kmu-kredit"] .nav-list-item:has(> a[data-nav="kmu-kredit"]),
[data-active-nav="partner"] .nav-list-item:has(> a[data-nav="partner"]),
[data-active-nav="about"] .nav-list-item:has(> a[data-nav="about"]),
[data-active-nav="blog"] .nav-list-item:has(> a[data-nav="blog"]) {
  cursor: default;
}

body[data-active-nav="kmu-kredit"] .nav-mobile--item:has(> a[data-nav="kmu-kredit"]),
body[data-active-nav="partner"] .nav-mobile--item:has(> a[data-nav="partner"]),
body[data-active-nav="about"] .nav-mobile--item:has(> a[data-nav="about"]),
body[data-active-nav="blog"] .nav-mobile--item:has(> a[data-nav="blog"]),
[data-active-nav="kmu-kredit"] .nav-mobile--item:has(> a[data-nav="kmu-kredit"]),
[data-active-nav="partner"] .nav-mobile--item:has(> a[data-nav="partner"]),
[data-active-nav="about"] .nav-mobile--item:has(> a[data-nav="about"]),
[data-active-nav="blog"] .nav-mobile--item:has(> a[data-nav="blog"]) {
  cursor: default;
}

/* Desktop primary nav — active tab bar at header row bottom (data-active-nav + aria-current)
   Mobile header below 48em (768px). */
@media only screen and (min-width: 48em) {
  header.header .header-content.container {
    position: relative;
    align-items: stretch;
    gap: 1rem;
  }

  header.header .header-content--left.header-bottom {
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
  }

  header.header .header-logo--link,
  header.header .header-content--right {
    align-self: center;
  }

  header.header .header-content--right {
    flex: 0 0 auto;
  }

  .header-nav--main-wrap {
    --header-dropdown-bridge: 0.35rem;
  }

  .header-content .header-nav--main {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    flex-wrap: nowrap;
    row-gap: 0;
    align-self: stretch;
    align-items: center;
  }

  .header-nav--main > .nav-list-item {
    display: flex;
    align-items: center;
    align-self: stretch;
    position: relative;
  }

  .header-nav--main > .nav-list-item.is-dropdown-open {
    z-index: 3;
  }

  /* Hover bridge: nav row bottom → flyout (below green indicator) */
  .header-nav--main > .nav-list-item.is-dropdown-open::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(0.25rem + var(--header-dropdown-bridge, 1rem));
    z-index: 999;
  }

  .nav-list-item:not(.is-dropdown-open) > .header-nav--sub {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }

  .nav-list-item.is-dropdown-open > .header-nav--sub {
    top: calc(100% + 0.25rem + var(--header-dropdown-bridge, 1rem));
    padding-top: var(--padding-small);
    margin-top: 0;
    opacity: 100%;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s;
  }

  .header-nav-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.25rem;
    max-height: 4px;
    background-color: var(--color-primary);
    border-radius: 2px 2px 0 0;
    transform: translateX(0);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition:
      transform 0.3s ease,
      width 0.3s ease,
      opacity 0.25s ease;
  }

  .header-nav-indicator.is-visible {
    opacity: 1;
  }
}

@media only screen and (min-width: 48em) and (prefers-reduced-motion: reduce) {
  .header-nav-indicator {
    transition: none;
  }

  .header-nav--sub {
    transition: none;
  }
}

/* MOBILE NAVIGATION */
@media only screen and (min-width: 48em) {
  header.header #mobile-menu-items.nav-mobile--content {
    display: none;
  }
}

/* Mobile drawer shell — full visual design is in “Mobile menu overlay + drawer” (≤48em). */
.mobile-nav {
  display: flex;
  flex-direction: row;
  gap: var(--gap-xsmall) !important;
  padding: 0;
  align-items: center;
}

.mobile-nav button {
  padding: 0;
}

.nav-mobile--content.hidden {
  pointer-events: none;
}

.nav-icon {
  display: none;
}

#mobile-menu-close {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 10053;
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background-color: rgba(20, 44, 51, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 4px rgba(20, 44, 51, 0.08);
  color: transparent;
  font-size: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
}

#mobile-menu-close > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#mobile-menu-close::before,
#mobile-menu-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.875rem;
  height: 2px;
  border-radius: 1px;
  background-color: #fff;
  transform-origin: center;
  pointer-events: none;
}

#mobile-menu-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#mobile-menu-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#mobile-menu-close:hover {
  background-color: rgba(20, 44, 51, 0.32);
  box-shadow: 0 2px 8px rgba(20, 44, 51, 0.12);
}

#mobile-menu-close:active {
  background-color: rgba(20, 44, 51, 0.38);
  transform: scale(0.96);
}

#mobile-menu-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

#mobile-menu-close.hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* Responsive design — header mobile bar (≤48em / 768px). Drawer visuals below. */
@media only screen and (max-width: 48em) {
  header.header::after {
    background-color: transparent;
  }

  .header-nav--main, .header-buttons.hide, .btn-primary.mobile {
    display: none;
  }

  .nav-icon,
  header.header #mobile-menu.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  header.header #mobile-menu.nav-icon img {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
  }

  header.header #mobile-menu.nav-icon.hidden {
    display: none;
  }

  header.header .header-content--left {
    flex: 1 1 auto;
    min-width: 0;
  }

  header.header .header-content--right {
    flex: 0 0 auto;
  }

  /* CTA left, hamburger right (blog + KMU Studie) */
  header.header .mobile-nav {
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
  }

  header.header .mobile-nav .header-study-cta,
  header.header .mobile-nav .header-cta-kamuno {
    order: 1;
    flex-shrink: 1;
    min-width: 0;
  }

  header.header .mobile-nav #mobile-menu {
    order: 2;
    flex-shrink: 0;
  }

  .header-top, .border {
    display: none;
  }

  .btn-primary.hide {
    display: none;
  }

  .btn-primary.mobile {
    display: inline-block;
  }

  header.header .header-logo {
    max-width: 100px;
    height: auto;
    transform: scale(0.9);
    padding: 0;
  }
}

@media only screen and (max-width: 43.75em) {
  .mobile-text {
    display: flex;
    flex-direction: row;
    gap: var(--gap-small);
  }

  .mobile-text p {
    font-size: 1.3rem;
  }

  .banner a, img {
    margin: 0;
    padding: 0;
  }

  .btn-primary {
    transform: scale(80%);
    margin-left: var(--margin-negative);
    margin-right: var(--margin-negative);
  }
}

/* ===== footer ===== */

footer {
  background-color: var(--color-background-complementary);
}

.featured-in-logos {
  padding-top: var(--padding-normal);
  flex-wrap: wrap;
}

.featured-in-logos img {
  height: 3.3rem;
}

.featured-in-logos img:last-child {
  height: 6rem;
}

.footer-nav {
  border-top: var(--border-footer);
  border-bottom: var(--border-footer);
  padding: var(--padding-medium) 0;
  margin: var(--margin-normal) 0;
  line-height: var(--lheight-footer);
}

.footer-nav {
  column-gap: calc(var(--gap-small) * 2);
}

.col-navs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 1.5rem;
  align-items: start;
  justify-items: start;
  width: 100%;
  min-width: 0;
}

.col-nav {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

footer.kamuno-footer .col-navs .footer-heading,
footer.kamuno-footer .col-navs .footer-nav--links li,
footer.kamuno-footer .col-navs .footer-nav--links a {
  font-size: 1.4rem;
}

footer.kamuno-footer .col-navs .footer-heading {
  padding: 0;
  margin: 0 0 0.75rem;
  width: 100%;
  max-width: 100%;
}

footer.kamuno-footer .col-navs .footer-nav--links {
  margin: 0;
  padding: 0;
  width: 100%;
}

footer.kamuno-footer .col-navs .footer-nav--links li {
  width: 100%;
}

footer.kamuno-footer .col-navs .footer-nav--links li:not(:last-child) {
  margin-bottom: 0.35rem;
}

footer.kamuno-footer .footer-text--contact .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-left: 0;
}

footer.kamuno-footer .footer-text--contact .contact-link::before {
  margin-right: 0;
  margin-left: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

footer.kamuno-footer .footer-text--contact .contact-link--phone::before {
  margin-left: 0;
}

footer.kamuno-footer .footer-text--contact .contact-link span {
  padding-bottom: 0;
  line-height: 1.3;
}

.footer-text,
.footer-nav--links a:link,
.footer-nav--links a:visited,
.copyright {
  color: var(--color-light-grey--3);
}

.footer-nav--links li {
  font-family: var(--font-alaska);
  font-weight: var(--weight-light);
}

.footer-nav--links li:not(:last-child) {
  margin-bottom: calc(var(--margin-small) - 0.5rem);
}

.footer-heading {
  padding-left: 0;
}

.footer-heading,
.footer-text--contact,
.footer-text--opening {
  color: var(--color-white);
}

.footer-holiday-notice {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-white);
}

.footer-holiday-notice:empty {
  display: none;
}

.footer-holiday-notice__label {
  margin: 0.65rem 0 0.15rem;
  padding: 0;
  font-weight: 500;
}

.footer-holiday-notice__detail {
  margin: 0;
  padding: 0;
  color: var(--color-light-grey--3);
}

.footer-text {
  font-size: 13px;
}

footer.kamuno-footer .col-logo > p.footer-text:not(.footer-text--opening) {
  line-height: 1.35;
}

.copyright-text {
  font-size: var(--font-default);
}

.footer-legal {
  padding-bottom: var(--padding-normal);
}

footer.kamuno-footer .footer-legal {
  position: relative;
  z-index: 2;
}

footer.kamuno-footer .social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}

footer.kamuno-footer a.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  min-height: 3.6rem;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

footer.kamuno-footer a.social-link .icon {
  display: block;
  width: 2.2rem;
  height: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

footer.kamuno-footer a.social-link[data-element="linkedin"] .icon,
footer.kamuno-footer a.social-link[data-element="instagram"] .icon {
  width: 1.98rem;
}

footer.kamuno-footer a.social-link:hover .icon,
footer.kamuno-footer a.social-link:focus-visible .icon {
  opacity: 0.88;
  transform: scale(1.06);
}

.footer-logo {
  align-self: start;
  height: auto;
}

.footer-link {
  margin-left: var(--margin-negative);
}

.footer-link span:hover,
.footer-link span:active {
  border-bottom-color: var(--color-white);
}

.footer-link--mail::before,
.footer-link--phone::before {
  background-color: var(--color-white);
}

.footer-nav--links a:hover,
.footer-nav--links a:active,
a.social-link:hover,
a.social-link:active {
  color: var(--color-white);
}

/* Cookie banner */
.cookie {
  width: 100vw;
  background-color: var(--color-background-complementary);
  padding: var(--padding-normal) var(--padding-normal) var(--padding-medium);
  height: var(--height-cookie);
  color: var(--color-light-grey--1);
  position: fixed;
  bottom: 0;
  z-index: 10000;
}

.cookie-content {
  gap: var(--gap-medium);
  justify-content: center;
}

.cookie-text {
  margin-top: var(--margin-default);
  text-align: center;
}

.cookie-text p {
  font-size: var(--font-default);
}

.cookie-text p:not(:last-child) {
  margin-bottom: var(--margin-small);
}

.cookie-text a {
  padding: 0;
}

.cookie-icon {
  width: 2rem;
  height: 2rem;
}

.cookie-btn {
  background-color: var(--color-cookie-btn);
  color: var(--color-light-grey--1);
  transition: var(--transition-default);
  box-shadow: var(--shadow-dark);
}

.cookie-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.cookie.hidden {
  visibility: hidden;
  opacity: 0;
}

/* Responsive design */
@media only screen and (max-width: 84.375em) {
  .col-logo {
    align-self: baseline;
 }
}

@media only screen and (max-width: 70em) {
  .featured-in-logos {
    gap: 8rem;
 }

  .cookie-content {
    gap: 3rem;
    padding: 0 3rem;
 }

  .cookie-text {
    text-align: left;
 }

  .cookie-btn, .cookie-icon {
    margin-top: -2rem;
 }
}

@media only screen and (max-width: 56.25em) {
  .cookie {
    padding: 3rem 0 1rem;
 }

  .cookie-icon {
    display: none;
 }

  .cookie-text {
    margin-top: 0;
 }

  .cookie-btn {
    margin-top: -8rem;
 }

 .footer-legal {
   flex-direction: column;
   align-items: flex-start;
   gap: var(--gap-normal);
 }

 .footer-nav {
   grid-template-columns: 1fr;
 }

 .col-logo {
   padding-left: calc(var(--padding-normal) / 2);
 }
}

@media only screen and (max-width: 34.375em) {
  .cookie {
    padding: 2rem;
    height: auto;
 }

 .cookie-content {
   margin-top: 0;
   padding: 0;
   flex-direction: column;
   gap: 12rem;
 }
}

@media only screen and (max-width: 26.25em) {
  .col-logo {
    grid-template-rows: repeat(4, auto);
 }

 .footer-text--contact, .social {
   display: flex;
   flex-direction: column;
 }

 .social {
   gap: var(--gap-small);
 }

 .contact-link--phone::before {
   margin-left: 0;
 }

 .col-navs {
   grid-template-columns: 1fr;
 }

/* Needed for aligning space between columns inside the footer */
 .col-navs .col-nav:nth-child(3) {
   margin-bottom: var(--margin-normal);
 }
}

/* ── kmu integration overrides ── */
/* Scope box-sizing to the chrome (kamuno assumes border-box). */
header.header, header.header *, footer.kamuno-footer, footer.kamuno-footer * { box-sizing: border-box; }
/* Sticky (not fixed) so the header sits in flow and the hero is not overlapped. */
header.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  overflow: visible;
  z-index: 100;
}
/* kamuno strips list bullets/margins in a bare ul/li rule we did not lift. */
header.header ul:not(.header-nav--sub):not(.lang-list),
header.header li,
footer.kamuno-footer ul,
footer.kamuno-footer li {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Stack the contact mail/phone lines (narrower column here than kamuno's). */
footer.kamuno-footer .footer-text--contact {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
}

/* ── Mobile footer layout (≤56.25em / 900px) — desktop footer unchanged above ── */
@media only screen and (max-width: 56.25em) {
  footer.kamuno-footer {
    overflow-x: clip;
  }

  footer.kamuno-footer .container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
  }

  footer.kamuno-footer .featured-in-logos {
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    row-gap: 1.25rem;
    width: 100%;
    min-width: 0;
  }

  footer.kamuno-footer .featured-in-logos img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  footer.kamuno-footer .featured-in-logos img:last-child {
    height: auto;
    max-height: 4.5rem;
  }

  footer.kamuno-footer .footer-nav.grid--custom-cols,
  footer.kamuno-footer .footer-nav {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 2rem;
    width: 100%;
    min-width: 0;
  }

  footer.kamuno-footer .col-logo {
    padding-left: 0;
    width: 100%;
    min-width: 0;
    row-gap: 1.25rem;
    align-self: stretch;
  }

  footer.kamuno-footer .footer-logo {
    align-self: flex-start;
  }

  footer.kamuno-footer .footer-text,
  footer.kamuno-footer .footer-text--opening {
    width: 100%;
    max-width: 100%;
  }

  footer.kamuno-footer .col-navs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: 2rem;
    width: 100%;
    min-width: 0;
    justify-items: stretch;
  }

  footer.kamuno-footer .col-nav {
    min-height: 0;
    width: 100%;
    min-width: 0;
  }

  footer.kamuno-footer .col-navs .col-nav:nth-child(3) {
    margin-bottom: 0;
  }

  footer.kamuno-footer .footer-heading {
    padding: 0;
    margin: 0 0 0.75rem;
    width: 100%;
    max-width: 100%;
  }

  footer.kamuno-footer .footer-nav--links {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  footer.kamuno-footer .footer-nav--links li {
    width: 100%;
    min-width: 0;
  }

  footer.kamuno-footer .footer-link {
    margin-left: 0;
  }

  footer.kamuno-footer .footer-text--contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
  }

  footer.kamuno-footer .footer-text--contact .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: 0;
    max-width: 100%;
  }

  footer.kamuno-footer .footer-text--contact .contact-link::before {
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
  }

  footer.kamuno-footer .footer-text--contact .contact-link--phone::before {
    margin-left: 0;
  }

  footer.kamuno-footer .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    min-width: 0;
  }

  footer.kamuno-footer .copyright,
  footer.kamuno-footer .copyright-text {
    width: 100%;
    max-width: 100%;
  }

  footer.kamuno-footer .social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
}

@media only screen and (min-width: 25em) and (max-width: 56.25em) {
  footer.kamuno-footer .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

html.has-header-on-dark header.header #mobile-menu.nav-icon img {
  filter: brightness(0) invert(1);
}

.mobile-menu-backdrop {
  display: none;
}

/* ── Mobile menu overlay + drawer (≤48em / 768px only) ── */
@media only screen and (max-width: 48em) {
  html {
    overflow-x: clip;
  }

  header.header .mobile-menu-backdrop {
    display: block;
  }

  body.mobile-menu-open {
    overflow: hidden;
    overflow-x: clip;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  body.mobile-menu-open header.header {
    z-index: 10050;
  }

  header.header .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10051;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  header.header .mobile-menu-backdrop:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  header.header .mobile-menu-backdrop.hidden {
    display: block;
  }

  header.header #mobile-menu-items.nav-mobile--content {
    position: fixed;
    top: 0;
    left: 0;
    width: 72.5%;
    max-width: 72.5vw;
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 10052;
    transform: translateX(-100%);
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-white);
    box-shadow: var(--shadow-medium);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.4s ease;
  }

  header.header #mobile-menu-items.nav-mobile--content:not(.hidden) {
    transform: translateX(0);
    visibility: visible;
  }

  header.header #mobile-menu-close {
    top: calc(env(safe-area-inset-top, 0px) + 0.65rem);
    left: calc(72.5% + 0.65rem);
    right: auto;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  header.header #mobile-menu-close.hidden {
    display: none;
    pointer-events: none;
  }

  header.header #mobile-menu-items.nav-mobile--content {
    display: flex;
    flex-direction: column;
  }

  /* Dark login block — full bleed at top of drawer */
  header.header #mobile-menu-items .nav-mobile--buttons {
    width: 100%;
    margin: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 0.65rem) 1.15rem 0.75rem !important;
    background-color: var(--color-background-complementary--dark);
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    flex-shrink: 0;
    border-bottom: none;
    box-sizing: border-box;
  }

  header.header #mobile-menu-items .nav-mobile--buttons .btn-mobile,
  header.header #mobile-menu-items .nav-mobile--buttons .header-buttons--login,
  header.header #mobile-menu-items .nav-mobile--buttons .header-buttons--portal {
    width: 100% !important;
    max-width: 100%;
    min-height: 2.75rem;
    margin: 0 !important;
    padding: 11px 1rem 11px 3.75rem !important;
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    position: relative;
    overflow: visible;
    border: var(--border-default);
    color: var(--color-secondary) !important;
    background-color: var(--color-white) !important;
    font-family: var(--font-alaska);
    font-size: var(--font-small);
    font-weight: var(--weight-light);
    border-radius: var(--radius-large);
    text-decoration: none !important;
    line-height: 1.25;
  }

  header.header #mobile-menu-items .nav-mobile--buttons .header-buttons--login::after,
  header.header #mobile-menu-items .nav-mobile--buttons .header-buttons--portal::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    width: 2.125rem;
    height: 2.125rem;
    margin: 0;
    border-radius: var(--radius-circle);
    background-color: rgba(20, 44, 51, 0.06);
    pointer-events: none;
  }

  header.header #mobile-menu-items .nav-mobile--buttons .header-buttons--login::before,
  header.header #mobile-menu-items .nav-mobile--buttons .header-buttons--portal::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    width: 2.125rem;
    height: 2.125rem;
    margin: 0;
    background: url("./assets/kamuno/locker-black.svg") center calc(50% + 1px) / 10px 10px no-repeat;
    pointer-events: none;
    z-index: 1;
  }

  /* White nav section */
  header.header #mobile-menu-items .nav-mobile--links {
    padding: 20px 1.15rem 0.25rem !important;
    row-gap: 0;
    background-color: var(--color-white);
    flex: 1 1 auto;
    min-height: 0;
  }

  header.header #mobile-menu-items .nav-mobile--item,
  header.header #mobile-menu-items .nav-mobile--item:not(:last-child) {
    display: block;
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 0;
    padding-bottom: 0;
    margin: 0 0 0.55rem;
    border-bottom: 0.1rem solid var(--color-light-grey--2);
  }

  header.header #mobile-menu-items .nav-mobile--item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  header.header #mobile-menu-items .nav-mobile--item li a {
    margin-bottom: 0;
  }

  header.header #mobile-menu-items .nav-mobile--item li:last-child a {
    padding-bottom: 0;
  }

  header.header #mobile-menu-items .nav-group {
    display: block;
    margin: 0 0 0.3rem;
    padding: 0;
    font-family: var(--font-alaska);
    font-size: var(--font-default);
    font-weight: var(--weight-medium);
    line-height: 1.3;
    color: var(--color-secondary);
    text-decoration: none;
  }

  header.header #mobile-menu-items .nav-mobile--item ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  header.header #mobile-menu-items .nav-mobile--item li {
    margin: 0;
    padding: 0;
  }

  header.header #mobile-menu-items .nav-mobile--item li:not(:last-child) {
    margin-bottom: 0;
  }

  header.header #mobile-menu-items .nav-mobile--item li a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.15rem 0;
    font-family: var(--font-alaska);
    font-size: var(--font-small);
    font-weight: var(--weight-light);
    line-height: 1.35;
    color: var(--color-secondary-light);
    text-decoration: none;
    background: transparent;
    border-radius: 0;
  }

  header.header #mobile-menu-items .nav-mobile--item li a:hover,
  header.header #mobile-menu-items .nav-mobile--item li a:active {
    color: var(--color-secondary);
    background: transparent;
  }

  /* Language switcher — bottom of drawer */
  header.header #mobile-menu-items .nav-mobile--lang {
    flex-shrink: 0;
    margin-top: auto;
    padding: 0.85rem 1.15rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--color-white);
    border-top: 0.1rem solid var(--color-light-grey--2);
    justify-content: flex-start;
    align-items: flex-start;
  }

  header.header #mobile-menu-items .nav-mobile--lang .lang-list {
    position: static;
    visibility: visible;
    opacity: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    transform: none;
    background: transparent;
  }

  header.header #mobile-menu-items .nav-mobile--lang .lang-list li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  header.header #mobile-menu-items .nav-mobile--lang .lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: var(--radius-small);
    background: transparent;
    font-family: var(--font-alaska);
    font-size: var(--font-small);
    font-weight: var(--weight-light);
    line-height: 1.2;
    color: var(--color-light-grey--3);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  header.header #mobile-menu-items .nav-mobile--lang .lang-btn.nav-link-active--lang,
  header.header #mobile-menu-items .nav-mobile--lang .lang-btn[aria-current="true"] {
    color: var(--color-secondary) !important;
    background-color: var(--color-light-grey--2-alpha) !important;
    font-weight: var(--weight-normal);
  }

  header.header #mobile-menu-items .nav-mobile--lang > img.icon,
  header.header #mobile-menu-items .nav-mobile--lang > .lang-text {
    display: none !important;
  }
}

/* ── Chrome refinements (shared header/footer improvements) ── */

/* Shared footer alignment (all opted-in pages) */
footer.kamuno-footer {
  overflow-x: clip;
}

footer.kamuno-footer .col-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  min-width: 0;
}

footer.kamuno-footer .footer-logo {
  align-self: flex-start;
}

footer.kamuno-footer .col-logo .footer-text,
footer.kamuno-footer .col-logo p.footer-text {
  margin: 0;
  padding: 0;
  width: 100%;
}

footer.kamuno-footer .footer-link,
footer.kamuno-footer .footer-text--contact .contact-link {
  margin-left: 0;
}

footer.kamuno-footer .col-navs,
footer.kamuno-footer .col-navs.content-center {
  align-items: start;
  justify-items: start;
}

footer.kamuno-footer .col-nav {
  align-items: flex-start;
}

footer.kamuno-footer .col-navs .footer-heading,
footer.kamuno-footer .col-navs .footer-heading.subheading {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 0 0.75rem;
  border-radius: 0;
}

footer.kamuno-footer .col-navs .footer-nav--links,
footer.kamuno-footer .col-navs .footer-nav--links li {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer.kamuno-footer .col-navs .footer-nav--links a {
  display: inline-block;
  margin: 0;
  padding: 0;
  overflow-wrap: break-word;
}

/* Small tablet only (~901px–1350px): 2×2 link grid so columns are not clipped */
@media only screen and (max-width: 84.375em) and (min-width: 56.3125em) {
  footer.kamuno-footer .container,
  header.header .header-nav .header-content.container,
  header.header .header-nav .header-top.container {
    box-sizing: border-box;
    padding-left: clamp(1.5rem, 3vw, 3rem);
    padding-right: clamp(1.5rem, 3vw, 3rem);
  }

  header.header .header-nav .header-content.container,
  header.header .header-nav .header-top.container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  footer.kamuno-footer .col-navs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
    width: 100%;
  }

  footer.kamuno-footer .col-navs .footer-nav--links a {
    overflow-wrap: break-word;
  }
}

/* Transparent over dark sections (hero, etc.) — no solid white block at top */
html.has-header-on-dark:not(.has-scrolled-header) header.header {
  background-color: transparent;
  background: transparent;
}

/* Frosted header background after scroll — light sections only */
html.has-scrolled-header:not(.has-header-on-dark) header.header {
  --globalnav-backdrop-filter: saturate(180%) blur(20px);
  --globalnav-background: rgb(255 255 255 / 28%);
  background-color: transparent;
  background: var(--globalnav-background);
  -webkit-backdrop-filter: var(--globalnav-backdrop-filter);
  backdrop-filter: var(--globalnav-backdrop-filter);
  transition:
    background 0.35s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease;
}

html.has-scrolled-header.has-header-on-dark header.header {
  --globalnav-backdrop-filter: saturate(180%) blur(20px);
  --globalnav-background: rgb(18 25 32 / 42%);
  background-color: transparent;
  background: var(--globalnav-background);
  -webkit-backdrop-filter: var(--globalnav-backdrop-filter);
  backdrop-filter: var(--globalnav-backdrop-filter);
  transition:
    background 0.35s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease;
}

/* Soft shadow below header — gradient layer on ::before so backdrop-filter stays clean. */
header.header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 24px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 44, 51, 0.12),
    rgba(20, 44, 51, 0)
  );
  transition: opacity 0.35s ease;
}

html.has-scrolled-header header.header::before {
  opacity: 1;
}

html.has-scrolled-header.has-header-on-dark header.header::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.32),
    rgba(0, 0, 0, 0)
  );
}

header.header .header-nav {
  position: relative;
  z-index: 2;
  overflow: visible;
}

header.header {
  transition:
    background 0.35s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease;
}

/* Opted-in site pages — wins over project-local overrides (e.g. blog globals). */
body.page-blog header.header,
body.page-kmu-studie header.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  header.header,
  html.has-scrolled-header header.header,
  header.header::before,
  .header-top {
    transition: none;
  }

}

/* Light header chrome over dark sections */
html.has-header-on-dark header.header .header-logo {
  filter: brightness(0) invert(1);
}

html.has-header-on-dark header.header::after {
  background-color: rgba(255, 255, 255, 0.1);
}

html.has-header-on-dark header.header .border {
  border-top-color: rgba(255, 255, 255, 0.1);
}

html.has-header-on-dark header.header .header-content .header-nav--main a,
html.has-header-on-dark header.header .header-content .header-nav--main a > * {
  color: rgba(255, 255, 255, 0.94);
}

html.has-header-on-dark
  header.header
  .header-nav--main
  > .nav-list-item
  > a:not(.header-nav--sub a)::after {
  background-color: #fff;
  background-image: none;
}

header.header .header-content .header-nav--sub a,
header.header .header-content .header-nav--sub a > * {
  color: #142c33;
}

html.has-header-on-dark header.header .header-content .header-nav--sub a,
html.has-header-on-dark header.header .header-content .header-nav--sub a > * {
  color: #142c33;
}

header.header .lang-list a,
header.header .lang-list a > * {
  color: #142c33;
}

html.has-header-on-dark header.header .lang-list a,
html.has-header-on-dark header.header .lang-list a > * {
  color: #142c33;
}

html.has-header-on-dark header.header .header-top .lang,
html.has-header-on-dark header.header .header-top .lang .lang-text {
  color: rgba(255, 255, 255, 0.94);
}

html.has-header-on-dark header.header .header-top .lang .icon {
  opacity: 1;
  filter: brightness(0) invert(1);
}

html.has-header-on-dark header.header .header-top .header-buttons--login,
html.has-header-on-dark header.header .header-top .header-buttons--portal {
  color: rgba(255, 255, 255, 0.94);
  background-color: rgba(255, 255, 255, 0.14);
}

html.has-header-on-dark header.header .header-top .header-buttons--login:hover,
html.has-header-on-dark header.header .header-top .header-buttons--portal:hover {
  background-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.94);
}

html.has-header-on-dark header.header .header-top .header-buttons--login::after,
html.has-header-on-dark header.header .header-top .header-buttons--portal::after {
  background-color: rgba(255, 255, 255, 0.18);
}

html.has-header-on-dark header.header .header-top .header-buttons--login::before,
html.has-header-on-dark header.header .header-top .header-buttons--portal::before {
  filter: brightness(0) invert(1);
}

header.header .header-logo,
header.header .header-content .header-nav--main a,
header.header .header-top .lang,
header.header .header-top .lang .icon,
header.header .header-top .header-buttons--login,
header.header .header-top .header-buttons--portal,
header.header .border {
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    filter 0.25s ease,
    opacity 0.25s ease;
}

header.header::after {
  transition: background-color 0.25s ease;
}

.header-top > .header-content--right {
  align-items: center;
  height: fit-content;
}

/* Next.js embed — footer/cookie use display:contents; header needs a real box for sticky. */
.site-chrome-embed:not(.site-chrome-embed--header) {
  display: contents;
}

.site-chrome-embed--header {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

/* Study CTA hidden by default; opt-in pages show via .page-kmu-studie rules */
.header-study-cta {
  display: none !important;
}

/* KMU Studie: Jetzt teilnehmen instead of Kredit anfragen */
.page-kmu-studie .header .header-cta-kamuno {
  display: none !important;
}

.page-kmu-studie .header .header-study-cta {
  display: inline-flex !important;
  box-sizing: border-box;
  min-height: 34px;
  width: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease,
    width 0.35s ease,
    padding 0.35s ease;
}

.page-kmu-studie .header .header-study-cta.is-visible {
  width: fit-content;
  max-width: none;
  padding: 0 20px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.35s ease,
    transform 0.18s ease,
    visibility 0.35s ease,
    width 0.35s ease,
    padding 0.35s ease,
    box-shadow 0.18s ease;
}

.page-kmu-studie .header .header-study-cta.is-visible:hover {
  transform: translateY(0) scale(1.03);
  box-shadow: 0 14px 32px rgba(47, 203, 99, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  .page-kmu-studie .header .header-study-cta {
    transform: none;
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease,
      width 0.2s ease,
      padding 0.2s ease;
  }

  .page-kmu-studie .header .header-study-cta.is-visible,
  .page-kmu-studie .header .header-study-cta.is-visible:hover {
    transform: none;
  }
}

/* KMU Studie: desktop language toggle visible; EN/FR disabled in dropdown */
.page-kmu-studie .header-top .lang-dropdown,
.page-kmu-studie .header-top .lang-dropdown .lang-text {
  color: var(--color-light-grey--3);
}

.page-kmu-studie .header-top .lang-dropdown .icon {
  opacity: 0.45;
}

/* KMU Studie: EN/FR visible but disabled (DE only active) */
.page-kmu-studie .lang-list .lang-btn[lang="en"],
.page-kmu-studie .lang-list .lang-btn[lang="fr"],
.page-kmu-studie .lang-list .lang-btn.lang-btn--disabled {
  pointer-events: none;
  cursor: not-allowed;
  color: var(--color-light-grey--3) !important;
  opacity: 0.45;
  background-color: transparent !important;
  font-weight: var(--weight-light) !important;
}

.page-kmu-studie .lang-list .lang-btn[lang="en"]:hover,
.page-kmu-studie .lang-list .lang-btn[lang="fr"]:hover,
.page-kmu-studie .lang-list .lang-btn.lang-btn--disabled:hover,
.page-kmu-studie .lang-list .lang-btn[lang="en"]:active,
.page-kmu-studie .lang-list .lang-btn[lang="fr"]:active,
.page-kmu-studie .lang-list .lang-btn.lang-btn--disabled:active {
  color: var(--color-light-grey--3) !important;
  background-color: transparent !important;
}

.header-top .lang {
  padding-top: 0;
  padding-bottom: 0;
  align-self: center;
}

.header-top .header-buttons {
  align-items: center;
}

.header-top .header-buttons--login,
.header-top .header-buttons--portal {
  padding: 8px 2.5rem 8px calc(0.5rem + 1.75rem + 4px);
  line-height: 1.15;
}

.header-top .header-buttons--login::after,
.header-top .header-buttons--portal::after {
  width: 1.75rem;
  height: 1.75rem;
  left: 0.5rem;
}

.header-top .header-buttons--login::before,
.header-top .header-buttons--portal::before {
  width: 12px;
  height: 12px;
  left: calc(0.5rem + 0.875rem);
  background: url("./assets/kamuno/locker-black.svg") center / 12px 12px no-repeat;
}

@media only screen and (max-width: 48em) {
  header.header .header-nav .header-content.container,
  header.header .header-nav .header-top.container {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  header.header .header-logo--link {
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (min-width: 48.0625em) and (max-width: 84.375em) {
  .header-nav--main {
    gap: calc(var(--gap-small) * 1.25);
  }

  .header-content--left {
    gap: clamp(1.35rem, 2.25vw, 2.75rem);
  }

  header.header .header-content.container {
    gap: 0.75rem;
  }
}

@media (max-width: 1024px) {
  footer.kamuno-footer .featured-in-logos {
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    gap: 3rem;
    row-gap: 2.5rem;
  }

  footer.kamuno-footer .featured-in-logos img {
    width: auto;
    max-width: min(13rem, 32vw);
    height: auto;
    max-height: 3rem;
    object-fit: contain;
    object-position: center;
  }

  footer.kamuno-footer .featured-in-logos img:last-child {
    max-width: min(11.5rem, 30vw);
    max-height: 4.5rem;
  }
}

@media (max-width: 600px) {
  footer.kamuno-footer .featured-in-logos {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 3rem;
    row-gap: 3rem;
  }

  footer.kamuno-footer .featured-in-logos img {
    width: auto;
    max-width: min(24rem, 98vw);
    height: auto;
    max-height: 3.85rem;
    object-fit: contain;
    object-position: center;
  }

  footer.kamuno-footer .featured-in-logos img:last-child {
    max-width: min(22rem, 94vw);
    max-height: 5.5rem;
  }
}

@media only screen and (max-width: 26.25em) {
  footer.kamuno-footer .col-navs {
    grid-template-columns: 1fr;
  }
}