/* VR Smart Guide help center — built 2026-10-13 15:44 from theme/ in vrsg-kb-migration. Do not edit in HubSpot; edit the repo and run theme/deploy_css.py. */

/* ── home-tiles.css ── */
/* VR Smart Guide help center: category tiles on the knowledge base home.
   Goes into Settings → Content → Pages → hilfe.vr-smart-guide.de → Site header HTML,
   inside a style tag. Overrides the HubSpot theme only; remove to undo. */
#hs_cos_wrapper_knowledgebase_category_listing { --hs-kb-home-list-gap: 20px; }
.hs-kb-home-list { max-width: 1040px; margin: 0 auto; padding-top: 56px; padding-bottom: 72px; }

.hs-kb-home-list--tiles .hs-kb-home-list__category {
  min-height: 0; height: auto; padding: 0; max-width: none; display: block;
  background: #fff;
  border: 1px solid #e1e8f0 !important;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 35, 80, .04);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hs-kb-home-list--tiles .hs-kb-home-list__category:hover {
  border-color: #0066b3;
  box-shadow: 0 8px 24px rgba(0, 102, 179, .12);
  transform: translateY(-2px);
}
.hs-kb-home-list--tiles .hs-kb-home-list__category-link {
  display: flex; align-items: center; gap: 18px;
  height: 100%; box-sizing: border-box;
  padding: 22px 24px; min-height: 0;
  text-align: left; text-decoration: none;
}
.hs-kb-home-list--tiles .hs-kb-home-list__icon {
  flex: 0 0 56px; width: 56px; height: 56px; margin: 0; align-items: center;
  display: flex; align-items: center; justify-content: center;
  background: #eaf3fb; border-radius: 12px;
  transition: background .15s;
}
.hs-kb-home-list--tiles .hs-kb-home-list__image { width: 30px; height: 30px; object-fit: contain; }
.hs-kb-home-list--tiles .hs-kb-home-list__icon svg, .hs-kb-home-list--tiles .hs-kb-home-list__icon-svg { width: 30px; height: 30px; }
.hs-kb-home-list--tiles .hs-kb-home-list__category:hover .hs-kb-home-list__icon { background: #d6e8f7; }
.hs-kb-home-list--tiles .hs-kb-home-list__text { flex: 1; min-width: 0; }
.hs-kb-home-list--tiles .hs-kb-home-list__text__category-title {
  margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: #0f2350;
  text-align: left;
}
.hs-kb-home-list--tiles .hs-kb-home-list__category-link::after {
  content: "›"; flex: 0 0 auto; font-size: 26px; line-height: 1; color: #9fb3c8;
  transition: color .15s, transform .15s;
}
.hs-kb-home-list--tiles .hs-kb-home-list__category:hover .hs-kb-home-list__category-link::after {
  color: #0066b3; transform: translateX(3px);
}
@media (max-width: 767px) {
  .hs-kb-home-list { padding: 24px 16px 48px; box-sizing: border-box; }
  .hs-kb-home-list--tiles .hs-kb-home-list__category { width: 100%; max-width: 100%; min-width: 0; }
  .hs-kb-home-list--tiles .hs-kb-home-list__category-link { padding: 16px 18px; }
}


/* ── home-page.css ── */
/* VR Smart Guide help center: header, search hero and footer on the knowledge base home.
   Used together with home-tiles.css. Scoped to the home page (.hs-knowledge-listing-page)
   so article and category pages keep the theme defaults. Remove to undo. */

.hs-knowledge-listing-page {
  --vrsg-navy: #0f2350;
  --vrsg-blue: #0066b3;
  --vrsg-orange: #f07d00;
  --vrsg-bg: #f4f7fb;
}

/* Header: white bar with a thin divider instead of a floating logo */
.hs-knowledge-listing-page .header__bottom {
  background: #fff;
  border-bottom: 1px solid #e6ecf3;
}
.hs-knowledge-listing-page .header__wrapper--bottom {
  max-width: 1040px; margin: 0 auto; padding: 18px 24px; box-sizing: border-box;
}

/* Search hero: deeper gradient, centred heading, larger rounded search field */
.hs-knowledge-listing-page .hs-kb-search-input-wrapper {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 380px at 85% -10%, rgba(0, 102, 179, .55), transparent 70%),
    radial-gradient(600px 300px at 0% 110%, rgba(0, 102, 179, .35), transparent 70%),
    linear-gradient(135deg, #0d1f5c 0%, #10296f 60%, #0b4f96 100%);
  padding: 88px 24px 104px;
}
.hs-knowledge-listing-page .hs-kb-search-input-wrapper::after {
  /* thin orange accent line along the bottom, picking up "GUIDE" in the logo */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--vrsg-blue), var(--vrsg-orange));
}
.hs-knowledge-listing-page .hs-search-field {
  max-width: 720px; margin: 0 auto;
}
.hs-knowledge-listing-page .hs-search-field__label {
  display: block; text-align: center;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.2; font-weight: 700;
  color: #fff; letter-spacing: -.01em;
  margin: 0 0 28px;
}
.hs-knowledge-listing-page .hs-search-field__form { position: relative; }
.hs-knowledge-listing-page .hs-search-field__input {
  height: 60px; width: 100%; box-sizing: border-box;
  padding: 0 72px 0 24px;
  font-size: 17px; color: var(--vrsg-navy);
  background: #fff;
  border: 2px solid transparent; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(5, 18, 60, .28);
  transition: border-color .15s, box-shadow .15s;
}
.hs-knowledge-listing-page .hs-search-field__input::placeholder { color: #7d8ea3; }
.hs-knowledge-listing-page .hs-search-field__input:focus {
  outline: none; border-color: #7fb6e6;
  box-shadow: 0 12px 32px rgba(5, 18, 60, .28), 0 0 0 4px rgba(127, 182, 230, .35);
}
.hs-knowledge-listing-page .hs-search-field__button {
  position: absolute; top: auto; right: 8px; bottom: 8px;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--vrsg-blue); border: 0; border-radius: 10px; cursor: pointer;
  transition: background .15s;
}
.hs-knowledge-listing-page .hs-search-field__button:hover { background: #00558f; }
.hs-knowledge-listing-page .hs-search-field__button svg,
.hs-knowledge-listing-page .hs-search-field__button svg * { fill: #fff !important; width: 18px; height: 18px; }
.hs-knowledge-listing-page .hs-search-field__button .hs_cos_wrapper { display: flex; }

/* Page background and a section heading above the tiles */
.hs-knowledge-listing-page #main-content { background: var(--vrsg-bg); }
.hs-knowledge-listing-page .hs-kb-home-list::before {
  content: "Themen";
  flex: 0 0 100%;
  font-size: 22px; font-weight: 700; color: var(--vrsg-navy);
  margin-bottom: 4px;
}

/* Footer: quiet, centred */
.hs-knowledge-listing-page .footer { background: #fff; border-top: 1px solid #e6ecf3; }
.hs-knowledge-listing-page .footer__bottom {
  max-width: 1040px; margin: 0 auto; padding: 28px 24px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 0;
}
.hs-knowledge-listing-page .footer__bottom > * { margin: 0; }

@media (max-width: 767px) {
  .hs-knowledge-listing-page .hs-kb-search-input-wrapper { padding: 48px 16px 60px; }
  .hs-knowledge-listing-page .hs-search-field__label { margin-bottom: 20px; }
  .hs-knowledge-listing-page .hs-search-field__input { height: 54px; font-size: 16px; }
  .hs-knowledge-listing-page .hs-search-field__button { width: 40px; height: 40px; bottom: 7px; }
  .hs-knowledge-listing-page .header__wrapper--bottom { padding: 14px 16px; }
}


/* ── inner-pages.css ── */
/* VR Smart Guide help center: category and article pages.
   Everything except the home page (which has .hs-knowledge-listing-page).
   Main idea: the search becomes a slim bar so the content starts above the fold. */

body:not(.hs-knowledge-listing-page) {
  --vrsg-navy: #0f2350;
  --vrsg-blue: #0066b3;
  --vrsg-orange: #f07d00;
  --vrsg-line: #e3e9f1;
  --vrsg-soft: #eaf3fb;
  --vrsg-text: #24324a;
  --vrsg-muted: #5f6f85;
}

/* Header, same as the home page */
body:not(.hs-knowledge-listing-page) .header__bottom { background: #fff; border-bottom: 1px solid #e6ecf3; }
body:not(.hs-knowledge-listing-page) .header__wrapper--bottom {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px; box-sizing: border-box;
}

/* Slim search bar instead of the 330px welcome block */
body:not(.hs-knowledge-listing-page) .hs-kb-search-input-wrapper {
  position: relative;
  padding: 18px 24px 20px;
  background: linear-gradient(135deg, #0d1f5c 0%, #10296f 60%, #0b4f96 100%);
}
body:not(.hs-knowledge-listing-page) .hs-kb-search-input-wrapper::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--vrsg-blue), var(--vrsg-orange));
}
body:not(.hs-knowledge-listing-page) .hs-search-field { max-width: 1072px; margin: 0 auto; justify-content: flex-start; }
body:not(.hs-knowledge-listing-page) .hs-search-field__bar { max-width: 560px; }
/* The welcome text stays for screen readers, it just isn't shown */
body:not(.hs-knowledge-listing-page) .hs-search-field__label {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body:not(.hs-knowledge-listing-page) .hs-search-field__form { position: relative; }
body:not(.hs-knowledge-listing-page) .hs-search-field__input {
  height: 46px; width: 100%; box-sizing: border-box;
  padding: 0 56px 0 18px; font-size: 15px; color: var(--vrsg-navy);
  background: #fff; border: 2px solid transparent; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(5, 18, 60, .25);
}
body:not(.hs-knowledge-listing-page) .hs-search-field__input:focus {
  outline: none; border-color: #7fb6e6; box-shadow: 0 6px 18px rgba(5, 18, 60, .25), 0 0 0 4px rgba(127, 182, 230, .35);
}
body:not(.hs-knowledge-listing-page) .hs-search-field__button {
  position: absolute; top: auto; right: 6px; bottom: 6px; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--vrsg-blue); border: 0; border-radius: 8px; cursor: pointer;
}
body:not(.hs-knowledge-listing-page) .hs-search-field__button svg,
body:not(.hs-knowledge-listing-page) .hs-search-field__button svg * { fill: #fff !important; width: 15px; height: 15px; }

/* Page width, breadcrumbs */
body:not(.hs-knowledge-listing-page) #main-content { background: #f6f8fb; }
body:not(.hs-knowledge-listing-page) .hs-kb-content-wrapper--responsive-spacing {
  max-width: 1120px; margin: 0 auto; padding: 0 24px 64px; box-sizing: border-box;
}
body:not(.hs-knowledge-listing-page) .hs-kb-breadcrumb-container { padding: 20px 0 8px; }
body:not(.hs-knowledge-listing-page) .hs-kb-breadcrumbs { margin: 0; padding: 0; font-size: 14px; }
body:not(.hs-knowledge-listing-page) .hs-kb-breadcrumb_item a { color: var(--vrsg-muted); text-decoration: none; }
body:not(.hs-knowledge-listing-page) .hs-kb-breadcrumb_item a:hover { color: var(--vrsg-blue); text-decoration: underline; }
body:not(.hs-knowledge-listing-page) .hs-kb-breadcrumb_item:last-child a { color: var(--vrsg-navy); font-weight: 600; }

/* Sidebar: light blue active state instead of peach, sticks while scrolling */
body:not(.hs-knowledge-listing-page) .hs-kb-content-wrapper--sidebar { gap: 32px; align-items: flex-start; }
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar {
  position: sticky; top: 16px; align-self: flex-start;
  background: #fff; border: 1px solid var(--vrsg-line); border-radius: 14px; padding: 10px;
  max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box;
}
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar .hs-kb-category_accordion_nav_list { margin: 0; padding: 0; }
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar li,
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar ul ul { border: 0 !important; }
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar .hs-kb-category_accordion_nav_list_item,
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar .hs-kb-anchor_toggle,
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar .hs-kb-category_accordion_nav_list_item ul { background: transparent !important; }
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar .hs-kb-category-accordion_link {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 15px; line-height: 1.35; color: var(--vrsg-text); text-decoration: none;
}
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar .hs-kb-anchor_toggle:hover,
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar .hs-kb-category-accordion_link:hover { background: #f2f6fb !important; border-radius: 8px; }
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar .hs-kb-anchor_toggle--active { background: var(--vrsg-soft) !important; border-radius: 8px; }
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar .hs-kb-anchor_toggle--active .hs-kb-category-accordion_link { color: var(--vrsg-blue); font-weight: 600; }
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar ul ul .hs-kb-category-accordion_link { font-size: 14px; padding-left: 22px; color: var(--vrsg-muted); }
/* The open subcategory/article in orange, so it reads apart from the blue open category.
   Darker orange for the text: the logo orange is too light to read at this size. */
body:not(.hs-knowledge-listing-page) .hs-kb-sidebar a.hs-kb-category-accordion_link--active {
  color: #b35900 !important; font-weight: 600; background: #fff3e6 !important;
  box-shadow: inset 3px 0 0 var(--vrsg-orange);
}

/* Content column */
body:not(.hs-knowledge-listing-page) .hs-kb-content { min-width: 0; color: var(--vrsg-text); }
body:not(.hs-knowledge-listing-page) .hs-kb-content h1 {
  font-size: clamp(26px, 3vw, 34px); line-height: 1.2; color: var(--vrsg-navy); letter-spacing: -.01em; margin: 4px 0 20px;
}

/* Category page: each subcategory is a card with a clean link list */
body:not(.hs-knowledge-listing-page) .hs-kb-category-listing { border: 0; margin-bottom: 4px; }
body:not(.hs-knowledge-listing-page) .hs-kb-subcategory-listing {
  background: #fff; border: 1px solid var(--vrsg-line); border-radius: 14px;
  padding: 20px 24px 12px; margin: 0 0 16px;
}
body:not(.hs-knowledge-listing-page) .hs-kb-subcategory-listing h2 {
  font-size: 19px; color: var(--vrsg-navy); margin: 0 0 6px;
}
body:not(.hs-knowledge-listing-page) .hs-kb-category-article-list { list-style: none; margin: 0; padding: 0; border: 0; }
body:not(.hs-knowledge-listing-page) .hs-kb-category-article-list li { border: 0; border-top: 1px solid #eef2f7; margin: 0; padding: 0; }
body:not(.hs-knowledge-listing-page) .hs-kb-category-article-list li:first-child { border-top: 0; }
body:not(.hs-knowledge-listing-page) .hs-kb-category-article-list__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; font-size: 15.5px; color: var(--vrsg-text); text-decoration: none;
}
body:not(.hs-knowledge-listing-page) .hs-kb-category-article-list__link::after {
  content: "›"; font-size: 22px; line-height: 1; color: #9fb3c8; transition: transform .15s, color .15s;
}
body:not(.hs-knowledge-listing-page) .hs-kb-category-article-list__link:hover { color: var(--vrsg-blue); }
body:not(.hs-knowledge-listing-page) .hs-kb-category-article-list__link:hover::after { color: var(--vrsg-blue); transform: translateX(3px); }

/* Article page: content on a white card, readable line length */
body:not(.hs-knowledge-listing-page) article.knowledgebase-post {
  background: #fff; border: 1px solid var(--vrsg-line); border-radius: 14px;
  padding: 32px 40px 36px; box-sizing: border-box;
}
body:not(.hs-knowledge-listing-page) article.knowledgebase-post h1 { margin-top: 0; }
body:not(.hs-knowledge-listing-page) article.knowledgebase-post .hs_cos_wrapper_type_inline_richtext_field {
  font-size: 16.5px; line-height: 1.7; color: var(--vrsg-text); max-width: 72ch;
}
body:not(.hs-knowledge-listing-page) article.knowledgebase-post h2 {
  font-size: 22px; line-height: 1.3; color: var(--vrsg-navy); margin: 36px 0 12px;
}
body:not(.hs-knowledge-listing-page) article.knowledgebase-post h3 { font-size: 18px; color: var(--vrsg-navy); margin: 28px 0 10px; }
body:not(.hs-knowledge-listing-page) article.knowledgebase-post a { color: var(--vrsg-blue); text-underline-offset: 2px; }
body:not(.hs-knowledge-listing-page) article.knowledgebase-post li { margin: 6px 0; }
body:not(.hs-knowledge-listing-page) article.knowledgebase-post img {
  max-width: 100%; height: auto; border: 1px solid var(--vrsg-line); border-radius: 10px;
}
body:not(.hs-knowledge-listing-page) article.knowledgebase-post iframe,
body:not(.hs-knowledge-listing-page) article.knowledgebase-post video {
  display: block; width: 100%; max-width: 720px; height: auto; aspect-ratio: 16 / 9;
  border: 0; border-radius: 12px; background: #000;
}
/* The "Ähnliche Artikel" list at the end of migrated articles */
body:not(.hs-knowledge-listing-page) article.knowledgebase-post h2 + ul:last-child {
  list-style: none; padding: 0; margin-top: 8px;
}
body:not(.hs-knowledge-listing-page) .hs-kb-feedback { margin-top: 24px; }

/* Search results: same card look as the category pages */
body:not(.hs-knowledge-listing-page) .hs-search-results-title { font-size: clamp(24px, 3vw, 30px); color: var(--vrsg-navy); margin: 4px 0 6px; }
body:not(.hs-knowledge-listing-page) .hs-search-results__message { color: var(--vrsg-muted); font-size: 14px; margin: 0 0 16px; }
body:not(.hs-knowledge-listing-page) .hs-search-results__listing { list-style: none; margin: 0; padding: 0; }
body:not(.hs-knowledge-listing-page) .hs-search-results__listing__item {
  background: #fff; border: 1px solid var(--vrsg-line); border-radius: 14px;
  margin: 0 0 12px !important; padding: 18px 22px !important; transition: border-color .15s, box-shadow .15s;
}
body:not(.hs-knowledge-listing-page) .hs-search-results__listing__item:hover {
  border-color: var(--vrsg-blue); box-shadow: 0 8px 24px rgba(0, 102, 179, .10);
}
body:not(.hs-knowledge-listing-page) .hs-search-results__link { display: block; padding: 0; text-decoration: none; }
body:not(.hs-knowledge-listing-page) .hs-search-results__title,
body:not(.hs-knowledge-listing-page) .hs-search-results__link h2 { font-size: 18px; line-height: 1.35; color: var(--vrsg-navy); margin: 0 0 4px; }
body:not(.hs-knowledge-listing-page) .hs-search-results__category {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--vrsg-blue);
  background: var(--vrsg-soft); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px;
}
body:not(.hs-knowledge-listing-page) .hs-search-results__description { font-size: 15px; line-height: 1.6; color: var(--vrsg-text); margin: 0; }
body:not(.hs-knowledge-listing-page) .hs-search-results__pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
body:not(.hs-knowledge-listing-page) .hs-search-results__pagination__link {
  min-width: 36px; height: 36px; padding: 0 10px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--vrsg-line); border-radius: 8px; background: #fff; color: var(--vrsg-text); text-decoration: none;
}
body:not(.hs-knowledge-listing-page) .hs-search-results__pagination__link--active { background: var(--vrsg-blue); border-color: var(--vrsg-blue); color: #fff; }

@media (max-width: 767px) {
  body:not(.hs-knowledge-listing-page) .hs-kb-search-input-wrapper { padding: 12px 16px 14px; }
  body:not(.hs-knowledge-listing-page) .hs-search-field__bar { max-width: none; }
  body:not(.hs-knowledge-listing-page) .hs-kb-content-wrapper--responsive-spacing { padding: 0 16px 48px; }
  body:not(.hs-knowledge-listing-page) .hs-kb-sidebar { position: static; max-height: none; }
  body:not(.hs-knowledge-listing-page) article.knowledgebase-post { padding: 22px 18px 26px; }
  body:not(.hs-knowledge-listing-page) .hs-kb-subcategory-listing { padding: 16px 18px 8px; }
  body:not(.hs-knowledge-listing-page) .hs-kb-breadcrumbs { line-height: 1.5; }
  body:not(.hs-knowledge-listing-page) .hs-kb-breadcrumb_item { padding-top: 0; padding-bottom: 0; }
}