/**
 * @file
 * Visu-Lux: the classic Business look of visu-lux.com, rebuilt mobile-first.
 *
 * Everything that defines the look is in the variables below. The page width
 * is chosen in Appearance > Settings > Visu-Lux (class on <html>).
 */

/* Droid Sans, self-hosted (no Google Fonts request). */
@font-face {
  font-family: "Droid Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/droidsans-bold-webfont.woff2) format("woff2"), url(../fonts/droidsans-bold-webfont.woff) format("woff");
}

:root {
  --vl-brand: #472d12;          /* menu tabs, buttons, links */
  --vl-brand-hover: #442b27;
  --vl-page-bg: #eeeeee;        /* grey around the sheet */
  --vl-sheet-bg: #ffffff;
  --vl-text: #333333;
  --vl-muted: #666666;
  --vl-line: #eeeeee;
  /* Body text: the system font (light, no download). Headings and menu keep the
     Droid Sans of the old site, which only exists as a bold cut. */
  --vl-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vl-font-heading: "Droid Sans", Arial, Helvetica, sans-serif;

  --vl-page-max: 1400px;        /* overridden by the layout classes below */
  --vl-gutter: clamp(16px, 4vw, 40px);
  --vl-nav-breakpoint: 900px;   /* documentation only; media queries can't use variables */
}

/* Page width setting: the white sheet (--vl-page-max) and the width that
   header, slider, text and footer share inside it (--vl-inner-max), so their
   edges line up. */
html.layout-classic { --vl-page-max: 1000px; --vl-inner-max: 920px; }
html.layout-wide { --vl-page-max: 1320px; --vl-inner-max: 1200px; }
html.layout-full { --vl-page-max: none; --vl-inner-max: 1440px; }

/* ---------------------------------------------------------------- base -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (min-width: 1200px) {
  html body {
    font-size: 16px;
  }
}

body {
  margin: 0;
  background: var(--vl-page-bg);
  color: var(--vl-text);
  font-family: var(--vl-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--vl-brand);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
  color: var(--vl-brand-hover);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--vl-brand);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4,
.main-menu__link,
.slideshow__caption,
.nav-toggle {
  font-family: var(--vl-font-heading);
}

h1,
h2,
h3,
h4 {
  color: #000;
  font-weight: normal;
  line-height: 1.25;
  letter-spacing: 0.5px;
}

h1 { font-size: clamp(22px, 2.5vw, 26px); margin: 0 0 0.6em; }
h2 { font-size: 21px; margin: 0.8em 0 0.4em; }
h3 { font-size: 18px; margin: 0.8em 0 0.4em; }
h4 { font-size: 16px; }

p { margin: 0 0 0.8em; }

/* Content from the old site has fixed widths/heights on images: let them shrink. */
img {
  max-width: 100%;
  height: auto;
}

iframe,
video {
  max-width: 100%;
}

/* --------------------------------------------------------------- sheet -- */
.page-sheet {
  max-width: var(--vl-page-max);
  margin: 0 auto;
  padding: 0 var(--vl-gutter) 35px;
  background: var(--vl-sheet-bg);
  border-top: 3px solid var(--vl-brand);
  min-height: 100vh;
}

html.layout-full .page-sheet {
  border-left: 0;
  border-right: 0;
}

/* -------------------------------------------------------------- header -- */
.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  border-bottom: 1px solid var(--vl-line);
}

.site-header__branding {
  padding: 14px 0;
}

.site-header__branding img {
  display: block;
  width: auto;
  max-height: 72px;
}

@media (min-width: 900px) {
  .site-header__branding img {
    max-height: 131px; /* the logo's natural size, as on the old site */
  }
}

/* Menu button: small screens only. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.9em;
  border: 1px solid var(--vl-brand);
  border-radius: 4px;
  background: var(--vl-sheet-bg);
  color: var(--vl-brand);
  font: inherit;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.is-nav-open .nav-toggle__bars { background: transparent; }
.is-nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.is-nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------- menu -- */
.site-nav {
  display: none;
  flex-basis: 100%;
  padding-bottom: 0.75rem;
}

.is-nav-open .site-nav {
  display: block;
}

.main-menu,
.main-menu__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-top: 1px solid var(--vl-line);
}

.main-menu__link {
  flex: 1;
  display: block;
  padding: 0.85em 0.75em;
  color: var(--vl-muted);
}

.main-menu__link:hover,
.main-menu__link:focus,
.main-menu__link.is-active,
.is-active-trail > .main-menu__link {
  background: var(--vl-brand);
  color: #fff;
  text-decoration: none;
}

.submenu-toggle {
  width: 3em;
  border: 0;
  border-left: 1px solid var(--vl-line);
  background: transparent;
  color: var(--vl-muted);
  cursor: pointer;
}

.submenu-toggle::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.is-open > .submenu-toggle::before {
  transform: rotate(-135deg);
}

.main-menu__sub {
  display: none;
  flex-basis: 100%;
  padding-left: 1em;
}

.is-open > .main-menu__sub {
  display: block;
}

/* Desktop: tabs on the right, dropdowns on hover/focus (like the old site). */
@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    flex-basis: auto;
    align-self: center;
    padding: 0;
  }

  .main-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
  }

  .main-menu > .main-menu__item {
    border: 0;
  }

  .main-menu > .main-menu__item > .main-menu__link {
    padding: 0.8em 14px;
    border-radius: 4px;
    line-height: 1;
  }

  .main-menu > .main-menu__item.has-children > .main-menu__link {
    padding-right: 28px;
  }

  /* The toggle becomes a small arrow inside the tab; hover/focus opens. */
  .main-menu > .main-menu__item > .submenu-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    padding: 0;
    border: 0;
    color: inherit;
    pointer-events: none;
  }

  .main-menu > .main-menu__item:hover > .submenu-toggle,
  .main-menu > .main-menu__item:focus-within > .submenu-toggle,
  .main-menu > .main-menu__item.is-active-trail > .submenu-toggle {
    color: #fff;
  }

  .main-menu__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 14em;
    padding: 6px 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  }

  /* Small invisible bridge so the dropdown doesn't close on the way down. */
  .main-menu > .main-menu__item.has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
  }

  .main-menu__item:hover > .main-menu__sub,
  .main-menu__item:focus-within > .main-menu__sub {
    display: block;
  }

  .main-menu__sub .main-menu__item {
    border-top: 0;
    border-bottom: 1px solid #ececee;
  }

  .main-menu__sub .main-menu__link {
    padding: 0.75em 1.2em;
  }

  .main-menu__sub .submenu-toggle {
    display: none;
  }
}

/* ----------------------------------------------------------- slideshow -- */
.site-slideshow {
  margin: 0 calc(-1 * var(--vl-gutter)) 30px;
}

@media (min-width: 900px) {
  .site-slideshow {
    margin: 0 0 40px;
  }
}

.slideshow {
  position: relative;
}

.slideshow__track {
  position: relative;
  display: grid;
  overflow: hidden;
  background: #f4f4f4;
}

/* All slides share one grid cell; only the active one is visible. */
.slideshow__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s;
}

.slideshow__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.slideshow__slide img {
  display: block;
  width: 100%;
  height: auto;
}

.slideshow__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5em 0.75em;
  background: rgba(30, 20, 10, 0.72);
  color: #fff;
  font-size: clamp(15px, 2vw, 22px);
}

/* Phones: caption under the image instead of covering a third of it. */
@media (max-width: 599px) {
  .slideshow__caption {
    position: static;
    font-size: 14px;
  }
}

.slideshow__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 4px;
}

.slideshow__dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid var(--vl-brand);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.slideshow__dot.is-active {
  background: var(--vl-brand);
}

/* On phones the dots get a bigger touch target. */
@media (pointer: coarse) {
  .slideshow__dot {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow__slide {
    transition: none;
  }
}

/* -------------------------------------------------------- main content -- */
.site-main {
  padding-top: 24px;
}

@media (min-width: 900px) {
  .site-main.has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 40px;
  }
}

.site-content {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Long URLs written out as link text (e.g. in the imprint) may break anywhere. */
.site-content a {
  overflow-wrap: anywhere;
}

/* Wide tables from the old content scroll sideways on phones instead of breaking the page. */
.site-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

@media (min-width: 900px) {
  .site-content table {
    display: table;
  }
}

.site-content td,
.site-content th {
  vertical-align: top;
}

/* ------------------------------------------------------------ page text --
   The migrated content carries a lot of inline styling from the old editor.
   These rules give it one consistent, calm look. */

/* Header, slider, text and footer share one inner width, so edges line up. */
.site-header,
.site-slideshow,
.site-main,
.site-footer {
  max-width: var(--vl-inner-max, 1200px);
  margin-inline: auto;
}

/* --- Normalize the old editor's inline styling to one typographic scale. ---
   Applies to inline style attributes only; pages with their own designed
   <style> blocks (NotifyMe, DriveIn, Checklist) use classes and keep them. */

/* One font for text, one for headings. The content mixes Tahoma, Arial,
   Verdana, Open Sans and Barlow (the last two were never even loaded), both
   inline and in the <style> blocks of the designed pages. */
.text-formatted,
.text-formatted *:not(pre):not(code):not(kbd) {
  font-family: var(--vl-font) !important;
}

.text-formatted :is(h1, h2, h3, h4, h5, h6),
.text-formatted :is(h1, h2, h3, h4, h5, h6) * {
  font-family: var(--vl-font-heading) !important;
}

/* Leftover editor colours: a bright red address line, turquoise links. */
.text-formatted [style*="color: #ff0000"] {
  color: inherit !important;
}

.text-formatted [style*="color: #32a3bd"],
.text-formatted [style*="color: #0095d4"] {
  color: var(--vl-brand) !important;
}

/* Body-text sizes (small, medium, 12-16px, 13.008px …) become the normal size. */
.text-formatted [style*="font-size: small"], .text-formatted [style*="font-size:small"],
.text-formatted [style*="font-size: medium"], .text-formatted [style*="font-size:medium"],
.text-formatted [style*="font-size: 10px"], .text-formatted [style*="font-size: 12px"],
.text-formatted [style*="font-size: 13px"], .text-formatted [style*="font-size: 13.0"],
.text-formatted [style*="font-size: 14px"], .text-formatted [style*="font-size: 16px"] {
  font-size: inherit !important;
}

/* Fine print (captions, "x-small"). */
.text-formatted [style*="font-size: x-small"], .text-formatted [style*="font-size:x-small"],
.text-formatted [style*="font-size: xx-small"], .text-formatted [style*="font-size:xx-small"] {
  font-size: 0.85em !important;
  color: var(--vl-muted);
}

/* Large text was used as headings: give it the heading style. */
.text-formatted [style*="font-size: large"], .text-formatted [style*="font-size:large"] {
  font-size: 1.2em !important;
  font-weight: bold;
}

.text-formatted [style*="font-size: x-large"], .text-formatted [style*="font-size:x-large"],
.text-formatted [style*="font-size: 27px"] {
  display: inline-block;
  font-family: var(--vl-font-heading) !important;
  font-size: clamp(1.3em, 2.2vw, 1.6em) !important;
  line-height: 1.3 !important;
  color: #222 !important;
}

/* Odd inline line heights (15.600000381469727px …) and near-black colours. */
.text-formatted [style*="line-height"] {
  line-height: inherit !important;
}

.text-formatted [style*="color: #333"], .text-formatted [style*="color: #000"],
.text-formatted [style*="color: #2f3030"], .text-formatted [style*="color: #444"],
.text-formatted [style*="color: #555"], .text-formatted [style*="color: rgb(51, 51, 51)"] {
  color: inherit !important;
}

/* Justified text leaves holes, especially on phones. */
.text-formatted [style*="text-align: justify"] {
  text-align: left !important;
}

.text-formatted {
  color: var(--vl-text);
}

.text-formatted p,
.text-formatted ul,
.text-formatted ol {
  margin: 0 0 1em;
}

/* Lists: the old editor wrote one <ul><ul><ul><ul><li> per item; flatten the
   visual nesting so it reads as one normal list. */
.text-formatted ul,
.text-formatted ol {
  padding-left: 1.4em;
}

.text-formatted ul ul,
.text-formatted ul ol,
.text-formatted ol ul,
.text-formatted ol ol {
  margin: 0;
  padding-left: 0;
}

.text-formatted li {
  margin: 0 0 0.35em;
}

/* One list per item (old editor): pull them together into one list. */
.text-formatted ul + ul,
.text-formatted ol + ol {
  margin-top: -0.65em;
}

.text-formatted h2,
.text-formatted h3,
.text-formatted h4 {
  font-family: var(--vl-font-heading);
  margin: 1.6em 0 0.5em;
  color: #222;
  font-weight: bold;
  letter-spacing: 0;
}

.text-formatted > :first-child,
.text-formatted h2:first-child,
.text-formatted h3:first-child {
  margin-top: 0;
}

/* Tables: mostly used for layout in the old content. Light lines, white. */
.text-formatted table {
  width: 100%;
  margin: 0 0 1.25em;
  border: 1px solid #e3ded8;
  border-collapse: collapse;
  background: #fff;
}

.text-formatted th,
.text-formatted td {
  padding: 10px 12px;
  border-bottom: 1px solid #e3ded8;
  text-align: left;
}

.text-formatted th {
  background: #f6f3f0;
  font-weight: bold;
}

/* ------------------------------------------------- title & block spacing -- */
.page-title,
.site-content h1 {
  margin: 0 0 0.75em;
  color: #222;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: bold;
  letter-spacing: 0;
}

.region-content-top > * + *,
.region-content > * + * {
  margin-top: 1.5rem;
}

.region-content-top,
.region-highlighted,
.region-help {
  margin-bottom: 1.5rem;
}

/* Images in the old content come with inline width AND height. Shrinking only
   the width (max-width) would squash them, so: never distort, and inside
   tables keep the given size and let the column grow, as the old theme did. */
.text-formatted img {
  object-fit: contain;
}

.text-formatted td img {
  max-width: none;
}

/* Phones: the old content uses tables for layout (image | text, logo | screenshot).
   Side by side they get cramped or scroll sideways; stack the cells instead. */
@media (max-width: 599px) {
  .text-formatted table,
  .text-formatted thead,
  .text-formatted tbody,
  .text-formatted tr,
  .text-formatted th,
  .text-formatted td {
    display: block;
    width: auto !important;
    max-width: 100%;
  }

  .text-formatted table {
    overflow: visible;
  }

  .text-formatted th,
  .text-formatted td {
    padding: 10px 12px !important;
  }

  .text-formatted td img {
    max-width: 100%;
  }
}

/* Breadcrumb */
.breadcrumb {
  margin-bottom: 1rem;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--vl-line);
  font-size: 12px;
}

/* Buttons */
.button,
input[type="submit"] {
  padding: 0.45em 0.9em;
  border: 1px solid var(--vl-brand);
  border-radius: 5px;
  background: var(--vl-brand);
  color: #fff;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.button:hover,
input[type="submit"]:hover {
  background: var(--vl-brand-hover);
  color: #fff;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  max-width: 100%;
  padding: 0.4em 0.5em;
  border: 1px solid #acacac;
  border-radius: 3px;
  font: inherit;
}

/* ------------------------------------------------- product overview list --
   Built by scripts/setup-site.php: one row per product, logo | screenshots.
   All logo images share one canvas (stem and ear at the same spot), so they
   line up by themselves; the screenshots get the logo's height. */
.product-overview {
  --po-gap: clamp(10px, 2.5cqw, 32px);
  --po-logo: 0.4;   /* share of the row for the logo */
  container-type: inline-size;
  max-width: 1000px;
  margin: 0 auto;
}

.product-row {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--po-logo) * 100%)) minmax(0, 1fr);
  align-items: center;
  gap: var(--po-gap);
  padding: clamp(6px, 1.5cqw, 14px) clamp(4px, 1.5cqw, 16px);
  border-bottom: 1px solid var(--vl-line);
  border-radius: 6px;
  color: inherit;
  text-decoration: none !important;
  transition: background-color 0.2s;
}

.product-row:last-child {
  border-bottom: 0;
}

.product-row:hover,
.product-row:focus-visible {
  background: #f8f5f2;
}

.product-row__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Screenshots: same height as the logo canvas (minus its padding), side by side. */
.product-row__media {
  --po-h: calc((100cqw - var(--po-gap)) * var(--po-logo) * var(--logo-ratio) * 0.85);
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.8cqw, 8px);
  min-width: 0;
  height: var(--po-h);
}

.product-row__media img {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.product-row__soon {
  color: var(--vl-muted);
  font-style: italic;
}

/* Phones: give the logos a bit more of the row. */
@media (max-width: 599px) {
  .product-overview {
    --po-logo: 0.48;
  }
}

/* Product overview (/produkte…): every product is "logo | screenshots" side by
   side, at every width. The page's own CSS stacks them below 650px (and the
   theme's phone rule would too); keep the two columns and let logo and
   screenshots shrink in proportion instead. */
@media (max-width: 760px) {
  .text-formatted table.vlx-products {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  .text-formatted table.vlx-products colgroup { display: table-column-group !important; }
  .text-formatted table.vlx-products col { display: table-column !important; }
  .text-formatted table.vlx-products tbody { display: table-row-group !important; }
  .text-formatted table.vlx-products tr { display: table-row !important; }

  .text-formatted table.vlx-products td {
    display: table-cell !important;
    vertical-align: middle !important;
  }

  .text-formatted .vlx-logo-column,
  .text-formatted table.vlx-products .vlx-logo-cell {
    width: 34% !important;
  }

  .text-formatted .vlx-media-column,
  .text-formatted table.vlx-products .vlx-media-cell {
    width: 66% !important;
  }

  .text-formatted table.vlx-products .vlx-logo-cell {
    padding: 8px 8px 8px 0 !important;
    text-align: right !important;
  }

  .text-formatted table.vlx-products .vlx-media-cell {
    padding: 8px 0 8px 8px !important;
    text-align: left !important;
  }

  .text-formatted table.vlx-products .vlx-standard-cell {
    padding: 8px 0 !important;
  }

  /* Logos fill their column. */
  .text-formatted .vlx-product-logo {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin-left: auto !important;
  }

  /* The link around a screenshot group needs a width for images to shrink into. */
  .text-formatted .vlx-media-cell > a,
  .text-formatted .vlx-logo-cell > a {
    display: block !important;
    width: 100% !important;
  }

  /* Screenshot groups: always one row, shrinking in proportion. */
  .text-formatted .vlx-media-pack {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  /* Groups (NotifyMe phones, Checklist phone + desktop): one shared height
     that scales with the screen, widths follow; shrink further if needed. */
  .text-formatted .vlx-media-pack img {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: min(28vw, 210px) !important;
    max-height: none !important;
    object-fit: contain;
  }

  /* Single screenshots fill their column. */
  .text-formatted .vlx-media-cell > a > img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ------------------------------------------- widgets from old content -- */
/* The old content brings its own <style> with fixed pixel sizes (630px video
   boxes, 600px career box). Make them fit any screen; !important because those
   inline styles come later in the page. */
.video_wrapper,
.video_wrapper *,
.drivein-video-wrapper,
.drivein-video-wrapper * {
  font-family: var(--vl-font) !important;
}

.video_wrapper,
.drivein-video-wrapper {
  width: min(630px, 100%) !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
}

.video_wrapper .video_trigger,
.video_wrapper .video_layer,
.drivein-video-wrapper .drivein-video-trigger,
.drivein-video-wrapper .drivein-video-layer {
  width: 100% !important;
  height: 100% !important;
}

.video_wrapper .video_trigger,
.drivein-video-wrapper .drivein-video-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  padding: 1em;
}

.video_wrapper .text-center {
  height: auto !important;
  margin: 0;
}

.video_wrapper iframe,
.drivein-video-wrapper iframe {
  width: 100% !important;
  height: 100% !important;
}

.career-section {
  width: auto !important;
  max-width: 600px;
}

/* --------------------------------------------------------------- footer -- */
.site-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--vl-line);
  text-align: center;
}

.site-footer .block + .block {
  margin-top: 20px;
}

/* ---------------------------------------------------------------- misc -- */
.sidebar .block,
.site-sidebar .block {
  margin-bottom: 30px;
}

.site-sidebar h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vl-line);
  color: var(--vl-muted);
  font-size: 16px;
  font-weight: bold;
}