/* =========================================================
   BIM Something — theme CSS replicating the original
   Infomaniak "ik_idea" theme (used on top of Bootstrap 5.3).
   Colors:  color1 #1d1d1d · color2 #737373 · bg #f3f3f3
   Fonts:   Rubik (headings/buttons) · Roboto (body/menu)
   ========================================================= */

:root {
  --color1: #1d1d1d;
  --color2: #737373;
  --color1_bw: rgba(255, 255, 255, 0.8);
  --color2_bw: rgba(255, 255, 255, 0.8);
  --color1_125: #161616;
  --color2_125: #565656;
  --color2_25: #dcdcdc;
  --color2_175: #1d1d1d;
  --font1: "Rubik";
  --font2: "Roboto";
}

html { scroll-behavior: smooth; }
body, #website {
  background: rgb(243, 243, 243);
}

/* ---------- Skip link (visually hidden until keyboard focus) ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color1); color: #fff; padding: 10px 18px;
  font-family: var(--font2), sans-serif; font-weight: 700; text-decoration: none;
  border-radius: 0 0 3px 0;
}
.skip-link:focus { left: 0; }
#contentArea:focus { outline: none; }
/* one radius everywhere (Bootstrap .rounded, .card, etc.) */
#website { --bs-border-radius: 3px; }
#website, #website p { font-family: var(--font2), sans-serif; }
#website h1, #website h2, #website h3,
#website h4, #website h5, #website h6 { font-family: var(--font1), sans-serif; font-weight: 700; }
#website a.btn, #website button.btn { font-family: var(--font1), sans-serif; }

#contentArea { color: rgba(0, 0, 0, .65); font-size: 1.1rem; letter-spacing: -0.02em; }
#contentArea h1, #contentArea h2, #contentArea h3,
#contentArea h4, #contentArea h5, #contentArea h6 { color: var(--color2_175); }
#contentArea a:not(.btn) { color: var(--color1); }

.kedit { position: relative; }

/* ---------- Buttons (theme overrides) ---------- */
#website .btn-primary { background-color: var(--color1); border-color: var(--color1); }
#website .btn-primary:hover { background-color: var(--color1_125); border-color: var(--color1_125); }
#website .btn-outline-primary { color: var(--color1); border-color: var(--color1); }
#website .btn-outline-primary:hover { background-color: var(--color1); color: var(--color1_bw); border-color: var(--color1); }
#website .btn-link { color: var(--color1); }
.btn-color2 { color: var(--color2_bw); background-color: var(--color2); border-color: var(--color2); }
.btn-color2:hover, .btn-color2:focus, .btn-color2:active { color: var(--color2_bw); background-color: var(--color2_125); border-color: var(--color2_125); }
.btn-outline-color1 { color: var(--color1); border-color: var(--color1); }
.btn-outline-color1:hover { color: var(--color1_bw); background-color: var(--color1); border-color: var(--color1); }
.btn.btn-xl { border-radius: 3px; padding: 16px 26px; font-size: 24px; line-height: 1.33333; }
/* single accent color, reserved for the booking CTA */
#website .btn-success {
  --bs-btn-bg: #1a7a4e; --bs-btn-border-color: #1a7a4e;
  --bs-btn-hover-bg: #15633f; --bs-btn-hover-border-color: #15633f;
  --bs-btn-active-bg: #125536; --bs-btn-active-border-color: #125536;
  --bs-btn-disabled-bg: #1a7a4e; --bs-btn-disabled-border-color: #1a7a4e;
}
.bs-1 { box-shadow: 0 15px 25px -15px #0006; }
.bs-2, .btn.bs-2 { box-shadow: 1px 1px 3px #0003; }
.bs-3, .btn.bs-3 { box-shadow: 2px 2px 10px #0003, 2px 2px 5px #0003, 1px 1px 3px #0003, 1px 1px 2px #0003, 1px 1px 1px #00000080; }
.koButtons { clear: both; margin: 20px 0 10px; }
.koButtons .btn:not(.btn-link) { min-width: 160px; padding-left: 25px; padding-right: 25px; }

/* ---------- Separator ---------- */
.koSeparator { clear: both; width: 50%; max-width: 100%; height: 5px; min-height: 1px; margin: 30px auto; font-size: .1px; }
.koSeparator.koSeparatorLeft { margin-left: 0; margin-right: auto; }

/* ---------- Dark sections ---------- */
#website .keditDark { color: #ffffffb3; }
#website .keditDark strong { color: #ffffffe6; }
#website .keditDark h1, #website .keditDark h2, #website .keditDark h3,
#website .keditDark h4, #website .keditDark h5 { color: #fff; }
#website .keditDark a:not(.btn) { color: #ffffffb3; }
#website .keditDark a:not(.btn):hover { color: #fff; }
#contentArea .keditWhite { color: #000000b3; }

/* ---------- Pre-title ---------- */
.koPreTitle { text-transform: uppercase; letter-spacing: 2px; color: #00000099; font-size: 1rem; font-weight: 700; }

/* ---------- Utility (BS4 leftovers used by theme) ---------- */
.mt-n5 { margin-top: -3rem !important; }
.col-items-middle { display: flex; align-items: center; }
.col-items-middle .col-container { width: 100%; }
.fs-90  { font-size: 90%; }
.fs-110 { font-size: 110%; }
.fs-120 { font-size: 120%; }
.fs-130 { font-size: 130%; }
.fs-150 { font-size: 150%; }
.text-dark1 { color: rgb(29, 29, 29); }
.text-dark2 { color: rgb(42, 42, 42); }
.text-light1 { color: #f7f7f7; }

/* ---------- Homepage service cards ---------- */
.svc-card { background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-top: 3px solid var(--color1); box-shadow: 0 14px 32px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .07); padding: 24px 26px; transition: transform .25s ease, box-shadow .25s ease; }
.svc-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0, 0, 0, .15), 0 3px 8px rgba(0, 0, 0, .08); }
.svc-card-label { font-family: var(--font2), sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--color2); border-bottom: 1px solid rgba(0, 0, 0, .07); padding-bottom: 8px; margin-bottom: 12px; }
#contentArea .svc-card ul { list-style: none; margin: 0; padding: 0; }
#contentArea .svc-card li { position: relative; padding-left: 26px; margin-bottom: 8px; color: var(--color1); }
#contentArea .svc-card li:last-child { margin-bottom: 0; }
.svc-card li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 3px; font-size: 12px; color: var(--color2); }
.btn.svc-more { border-width: 2px; }

/* ---------- Logo wall (partners / certifications, colored) ---------- */
.logo-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 36px 70px; margin-top: 10px; }
.logo-wall img { max-height: 90px; width: auto; max-width: 420px; object-fit: contain; transition: transform .2s ease; }
.logo-wall img:hover { transform: scale(1.06); }
.logo-wall.logo-wall-lg img { max-height: 120px; max-width: 500px; }
@media (max-width: 767.98px) {
  .logo-wall { gap: 24px 40px; }
  .logo-wall img { max-height: 64px; max-width: 240px; }
  .logo-wall.logo-wall-lg img { max-height: 90px; max-width: 300px; }
}

/* ---------- Micro-interactions ---------- */
.ref-card { transition: transform .25s ease; }
.ref-card:hover { transform: translateY(-4px); }
#website .btn { border-radius: 3px; transition: all .2s ease; }
#website .btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .svc-card, .ref-card, .logo-wall img, #website .btn { transition: none; }
  .svc-card:hover, .ref-card:hover, .logo-wall img:hover, #website .btn-success:hover { transform: none; }
}

/* square image crop (services overview) */
.kimgRatio1 { aspect-ratio: 1 / 1; overflow: hidden; width: 100%; }
.kimgRatio1 img { width: 100%; height: 100%; object-fit: cover; }
.kimgRatio { text-align: center; }
.kimgRatio img { max-width: 100%; height: auto; }

/* ---------- Header / navigation ---------- */
#headerMenu { background: rgb(243, 243, 243); padding: 20px; margin: 0; position: relative; z-index: 30; }
/* the <nav> landmark wraps the menu <ul>; keep it invisible to the flex layout */
#headerMenu nav { display: contents; }
#headerMenu .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.logoHolder { white-space: nowrap; padding: 0; }
.logoHolder img { max-height: 84px; height: 84px; width: auto; }
.menuHolder { display: flex; flex-flow: row wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.menuHolder li { display: inline-block; padding: 0; position: relative; }
.menuHolder li a {
  font-family: var(--font2), sans-serif; font-weight: 700;
  font-size: 17px; color: #000; padding: 5px 0; margin: 0 18px;
  border-radius: 0; letter-spacing: .04em;
  text-transform: uppercase; transition: 0.2s all; text-decoration: none; display: block;
}
/* #666 (not --color2 #737373) so the active/hover state passes AA contrast on the #f3f3f3 header */
.menuHolder li.active > a, .menuHolder li > a:hover { color: #666666; }
.menuHolder li.accent1 > a { font-size: 17px; color: #fff; background: var(--color2); padding: 11px 18px; margin: 0 0 0 22px; border-radius: 3px; }
.menuHolder li.accent1.active > a, .menuHolder li.accent1 > a:hover { color: var(--color2_25); background: var(--color2_125); }

/* dropdown (services) */
.menuHolder .dropmenudiv {
  display: none; position: absolute; top: 100%; left: 15px; min-width: 320px;
  background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); border-radius: 3px;
  list-style: none; margin: 0; padding: 8px 0; z-index: 40;
}
.menuHolder li:hover > .dropmenudiv, .menuHolder li:focus-within > .dropmenudiv { display: block; }
.menuHolder .dropmenudiv li { display: block; }
.menuHolder .dropmenudiv li a { font-size: 17px; margin: 0; padding: 10px 20px; text-shadow: none; }
.menuHolder .dropmenudiv li a:hover { background: rgb(243, 243, 243); color: #000; }

/* language switcher (addition, styled to blend in) */
.menuHolder li.lang-switch a, .lang-switch a { display: inline-block; font-family: var(--font2), sans-serif; font-weight: 700; font-size: 15px; color: #000; padding: 2px 6px; margin: 0; text-decoration: none; text-shadow: none; }
/* qualified with .menuHolder li… to outrank the base link rule above (which sets #000) */
.menuHolder li.lang-switch a:hover, .lang-switch a:hover { color: #666666; }
.menuHolder li.lang-switch a.active, .lang-switch a.active { color: #666666; text-decoration: underline; text-underline-offset: 3px; }
.lang-switch .sep { color: #999; font-size: 14px; }
.menuHolder li.lang-switch { margin-left: 20px; white-space: nowrap; }

.nav-toggle { display: none; background: none; border: 0; font-size: 28px; color: #000; cursor: pointer; }

/* ---------- Footer ---------- */
#footerContent .kedit.keditFooter1 { padding: 0; background: var(--color1); }
.keditFooterLine1 { padding: 60px 0 20px; }
#website .keditFooterLogo { max-width: 200px; max-height: 100px; width: auto; height: auto; }
.keditFooterCompany { margin-top: 1.5rem; font-size: 1.1rem; color: #fff; }
.keditFooterCompany b, .keditFooterCompany strong { color: #fff; }
#footerContent ul.sitemap { min-width: inherit; margin-bottom: 30px; display: inline-block; vertical-align: top; list-style: none; padding: 0; }
#footerContent ul.sitemap:not(:last-of-type) { margin-right: 100px; }
#footerContent ul.sitemap li { font-size: inherit; padding: 0; font-weight: 700; line-height: 1.5; }
#footerContent ul.sitemap ul { margin: 10px 0 0; padding: 0; list-style: none; }
#footerContent ul.sitemap ul ul { margin: 0 0 0 16px; }
#footerContent ul.sitemap h5 { color: #fff; }
#website #footerContent ul.sitemap li a { background: inherit; text-decoration: inherit; color: inherit; box-shadow: none; opacity: .7; border: none; border-radius: 0; padding: 0; font-weight: 400; }
#website #footerContent ul.sitemap li a:hover { opacity: 1; }
.keditFooterLine2 { background: #0000001a; }
.keditFooterLine2 .kedit { padding: 20px 0; }
.keditFooterCopyright { opacity: .85; }
#keditFooterModule { text-align: right; }
.social_fa { text-align: center; margin: 0; padding: 0; list-style: none; }
.social_fa a { text-align: center; border-radius: 3px; margin: 0 3px 3px 0; padding: 3px 0 0; display: inline-block; }
.social_fa.social_footer a { background: 0 0; margin: 0; padding: 0; color: #ffffffb3; }
.social_fa.social_footer a:hover { color: #fff; }
.social_footer a + a { margin-left: 14px; }

/* ---------- Scroll to top ---------- */
#scrollToTop {
  background: var(--color1); color: #c7c7c7; text-align: center; opacity: 0; visibility: hidden;
  border-radius: 3px; width: 50px; height: 50px; font-size: 20px; line-height: 50px;
  text-decoration: none; transition: all .2s; display: block; position: fixed; bottom: 20px; right: 20px;
}
#scrollToTop.active { opacity: 1; visibility: visible; z-index: 65401; margin-bottom: 10px; }
#scrollToTop:hover { transform: scale(1.05); }

/* ---------- Home hero ---------- */
.hero-lines { font-size: 2.8rem; line-height: 1.18; color: #f7f7f7; font-family: var(--font1), sans-serif; font-weight: 700; }
/* German compounds are too wide for 2.8rem in the half column */
html[lang="de"] .hero-lines { font-size: 2.4rem; }
.hero-lines div { color: #f7f7f7; }

/* ---------- Service page hero ---------- */
.svc-h1 { font-size: 4.25rem; line-height: 1.1; text-align: left; }
.svc-h1.svc-h1-xl { font-size: 4.8rem; }
.svc-tag { font-family: var(--font1), sans-serif; font-weight: 700; color: #fff; font-size: 290%; line-height: 1.2; }
.svc-sub { font-family: var(--font1), sans-serif; color: #fff; font-size: 190%; line-height: 1.25; }

/* page hero (centered: services/about/projects) */
.page-h1-160 { font-size: 4rem; }
.page-h1-150 { font-size: 3.75rem; }
.page-h1-130 { font-size: 3.25rem; }

/* ---------- QA tiers (table-like grid: titles aligned across columns) ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 8px; margin-top: 16px; }
.tier-head { background-color: var(--color2); text-align: center; padding: 8px 0; margin: 24px 0 16px; }
.tier-head span { color: #fff; display: block; }
/* tier-head/grey-bar are h3 (heading order) but keep the h2 sizing they had */
#contentArea h3.tier-head, #contentArea h3.grey-bar { font-size: calc(1.325rem + .9vw); margin-bottom: .5rem; }
@media (min-width: 1200px) { #contentArea h3.tier-head, #contentArea h3.grey-bar { font-size: 2rem; } }
.tier-label { background: #fff; padding: 16px 12px 0; margin: 0; }
.tier-label span { color: rgb(29, 29, 29); font-size: 110%; }
.tier-list { background: #fff; padding: 8px 12px; margin: 0; height: 100%; }
.tier-list.tier-last { padding-bottom: 24px; }
.tier-list ul { margin: 0; padding-left: 1.5rem; }
.tier-list li { color: rgb(29, 29, 29); }
@media (max-width: 767.98px) {
  .tier-grid { grid-template-columns: 1fr; }
  .tier-grid .tcol-1 { order: 1; }
  .tier-grid .tcol-2 { order: 2; }
  .tier-grid .tcol-3 { order: 3; }
  .tier-grid .tier-list { margin-bottom: 0; }
}

/* grey bar heading (coordination deliverables) */
.grey-bar { background-color: var(--color2); padding: 8px 0 8px 24px; margin-top: 24px; }
.grey-bar span { color: #fff; font-size: 80%; }
.white-list { background: #fff; padding: 8px 8px 8px 24px; }
.white-list ul { margin: 0; }
.white-list li { color: rgb(29, 29, 29); }

/* comparison table */
.koTable td, .koTable th { vertical-align: middle; }
.koTable .check { text-align: center; font-size: 18px; color: var(--color1); }
.koTable .grp { font-weight: 700; font-size: 140%; }

/* ---------- Projects slider ---------- */
.kslider { position: relative; width: 100%; overflow: hidden; }
.kslider-track { display: flex; transition: transform .45s ease; }
.kslide { min-width: 100%; text-align: center; }
.kslide img { max-width: 100%; height: auto; margin: 0 auto; display: inline-block; }
.kslider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--color1); font-size: 44px; cursor: pointer; z-index: 5;
  padding: 0 10px; line-height: 1;
}
.kslider-btn.prev { left: 10px; }
.kslider-btn.next { right: 10px; }
.kslider-dots { text-align: center; margin-top: 14px; }
/* 24px hit area (WCAG 2.2 target size); the visible dot stays 8px via background-clip */
.kslider-dots button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: #0003; background-clip: content-box; padding: 8px; margin: 0; cursor: pointer; }
.kslider-dots button.on { background-color: var(--color1); }

/* ---------- FAQ (collapsible: native <details>, no JS) ---------- */
.faq-item {
  margin-top: 12px; text-align: left;
  background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 3px;
  box-shadow: 1px 1px 3px #0003;
}
.faq-item summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 20px; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.25rem; margin: 0; }
/* CSS chevron (keeps the subset icon fonts untouched) */
.faq-item summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--color1); border-bottom: 2px solid var(--color1);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item .faq-answer { padding: 0 20px 18px; }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* ---------- Content section defaults ---------- */
#contentArea section h2 { margin-bottom: .5rem; }
#contentArea ul, #contentArea ol { margin-bottom: 1rem; }
#contentArea li { margin-bottom: .15rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .menuHolder li a { font-size: 16px; margin: 0 12px; }
  .menuHolder li.accent1 > a { font-size: 16px; padding: 10px 14px; margin-left: 14px; }
  .logoHolder img { max-height: 72px; height: 72px; }
  .hero-lines { font-size: 2.4rem; }
  html[lang="de"] .hero-lines { font-size: 2.1rem; }
}
@media (max-width: 991px) {
  /* narrow columns: drop the forced hero line breaks, wrap naturally */
  .hero-lines { font-size: 2.2rem; }
  .hero-lines br { display: none; }
  .svc-h1, .svc-h1.svc-h1-xl { font-size: 3rem; }
  .svc-tag { font-size: 200%; }
  .svc-sub { font-size: 150%; }
  .page-h1-160, .page-h1-150 { font-size: 2.8rem; }
  .page-h1-130 { font-size: 2.5rem; }
  #footerContent ul.sitemap:not(:last-of-type) { margin-right: 40px; }
}
@media (max-width: 767.98px) {
  .nav-toggle { display: block; }
  #headerMenu .container { flex-wrap: wrap; }
  .menuHolder {
    display: none; width: 100%; flex-direction: column; align-items: stretch; margin-top: 12px;
  }
  .menuHolder.open { display: flex; }
  .menuHolder li { display: block; }
  .menuHolder li a { margin: 0; padding: 10px 6px; font-size: 16px; }
  .menuHolder li.accent1 > a { margin: 8px 0 0; display: inline-block; }
  .menuHolder .dropmenudiv { display: block; position: static; box-shadow: none; background: transparent; min-width: 0; padding: 0 0 0 18px; }
  .menuHolder .dropmenudiv li a { font-size: 16px; padding: 8px 6px; }
  .menuHolder li.lang-switch { margin: 12px 0 0; }
  .logoHolder img { max-height: 64px; height: 64px; }
  .hero-lines, html[lang="de"] .hero-lines { font-size: 1.9rem; }
  .svc-h1, .svc-h1.svc-h1-xl { font-size: 2.3rem; }
  .svc-tag { font-size: 160%; }
  .svc-sub { font-size: 125%; }
  .page-h1-160, .page-h1-150, .page-h1-130 { font-size: 2.2rem; }
  .btn.btn-xl { font-size: 19px; padding: 13px 20px; }
  #keditFooterModule { text-align: left; margin-top: 10px; }
}