/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Elements
Base HMTL elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
  line-height: 71px
}

h4,
h5,
h6 {
  line-height: 48px
}

/* Lists */

ul,
ol {
  margin: 0 0 1.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
  text-decoration: none;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Header DND sections */

.header .dnd-section {
  padding: 0;
}

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
}

.header__row-1 {
  padding-top: 1rem;
}

.header__row-1,
.header__row-2 {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
  }

  .header__column {
    position: relative;
  }

  .header__row-1 {
    padding-top: 0;
  }

  .header__row-2 {
    justify-content: center;
    padding: 1.05rem;
  }
}

/* Navigation skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Logo */

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: auto;
  max-width: 200px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .header__logo {
    margin: 0 auto;
    width: 100%;
  }
}

.header__logo img {
  max-width: 100%;
}

.header__logo .logo-company-name {
  font-size: 1.167rem;
  margin-top: 0.7rem;
}

.header__logo--main {
  padding-top: 1rem;
}

/* Search bar */

.header__search {
  padding: 0 1rem;
  width: auto;
}




.header__search .hs-search-field__input {
  
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-position: center right 15px;
    background-repeat: no-repeat;
  
  height: 45px;
  padding: 0 0.7rem;
}




.header__search .hs-search-field--open .hs-search-field__input {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  max-width: 100%;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: #FFF;
  border: 2px solid #D1D6DC;
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid #D1D6DC;
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: #494A52;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

@media (min-width: 767px) {
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search label {
    margin: 0 1rem 0 0;
  }

  .header__search .hs-search-field__input {
    width: auto;
  }
}

@media (max-width: 767px) {
  .header__search {
    border-top: 2px solid #CED4DB;
    order: 1;
    padding: 1.05rem;
  }
}

/* Language switcher */

.header__language-switcher {
  cursor: pointer;
  padding-right: 1.4rem;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

.header__language-switcher .lang_list_class {
  border: 2px solid;
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  display: block;
  left: calc(100% - 24px);
  opacity: 0;
  min-width: 100px;
  padding-top: 0;
  text-align: left;
  top: 100%;
  transition: opacity 0.3s;
  visibility: hidden;
}

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  transition: opacity 0.3s;
  visibility: visible;
}

.header__language-switcher .lang_list_class:before {
  left: 70%;
  top: -25px;
}

.header__language-switcher .lang_list_class:after {
  left: 70%;
  top: -22px;
}

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  transition: 0.3s;
}

.header__language-switcher .lang_list_class li {
  border: none;
  font-size: 18px;
  padding: 0.35rem 0.7rem;
}

.header__language-switcher .lang_list_class li:first-child {
  border-radius: 6px 6px 0 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.header__language-switcher .lang_list_class li:hover {
  transition: background-color 0.3s;
}

.header__language-switcher--label {
  display: flex;
  position: relative;
}

.header__language-switcher--label-current {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  margin-bottom: 0.175rem;
  margin-left: 0.7rem;
}

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #494A52;
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

@media (max-width: 767px) {
  .header__language-switcher {
    border-top: 2px solid #CED4DB;
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    left: 30px;
    opacity: 1;
    padding: 0 1.05rem;
    top: 0;
    visibility: visible;
  }

  .header__language-switcher .lang_list_class li {
    background-color: inherit;
    font-size: 0.917rem;
  }

  .header__language-switcher--label-current {
    display: none;
  }

  .header__language-switcher .globe_class {
    background-image: none;
  }

  .header__language-switcher .lang_list_class li:hover{
    background-color: inherit;
  }

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }}

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 767px) {
  .header__navigation,
  .header__search,
  .header__language-switcher {
    display: none;
    width: 100%;
  }

  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    background-color: #13163c;
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }

  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    cursor: pointer;
    margin: 0 5vw;
    position: relative;
  }

  .header__navigation--toggle.hide,
  .header__search--toggle.hide,
  .header__language-switcher--toggle.hide {
    display: none;
  }

  .header__navigation--toggle.open,
  .header__search--toggle.open,
  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__navigation--toggle:after,
  .header__search--toggle:after,
  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__navigation--toggle.open:after,
  .header__search--toggle.open:after,
  .header__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__navigation--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: cover;
    height: 25px;
    width: 25px;
    filter: contrast(0%) brightness(2);
  }

  .header__navigation--toggle:after {
    content: ""; /* "Menu"; */
  }

  .header__language-switcher--toggle {
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__language-switcher--toggle:after {
    content: "Language";
  }

  .header__search--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__search--toggle:after {
    content: "Search";
  }

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
    filter: contrast(0%) brightness(2);
  }

  .header__close--toggle.show {
    display: block;
  }
}


/* Relaunch header: 96 px, logo 40 px, menu 17 px SemiBold, gap 40, CTA right */
.header .header__container { min-height: 96px; align-items: center; padding-top: 0; }
.header .header__logo--main { padding-top: 0; }
.header .header__logo img { height: 40px !important; width: auto !important; }
.header .header__column { display: flex; align-items: center; gap: 40px; }
.header .header__row-1 { display: none; }
.header .header__row-2 { display: flex; align-items: center; gap: 40px; }
.header .header__navigation .menu__link,
.header .header__navigation .menu__item > a { font-size: 17px !important; font-weight: 600 !important; color: #ffffff; text-transform: none; }
.header .header__navigation .menu__item { margin: 0 20px; }
/* Relaunch: menu centred between logo and CTA (reference: nav 464–935 px at 1440) */
.header .header__column { flex: 1 1 auto; }
.header .header__row-2 { flex: 1 1 auto; justify-content: flex-end; }
.header .header__navigation { margin: 0 auto; }
.header .header__navigation--toggle, .header .header__close--toggle { display: none; }
/* Relaunch mobile + tablet header (up to 1023 px, Christian 22.9.): one row with logo left, small CTA and
   burger right; the menu opens as a full-width panel under the header with 52 px tap targets.
   Selectors carry .header so they beat the theme toggles above (the old rule hid the close icon). */
@media (max-width: 1023px) {
  .header .header__container { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 12px 20px; position: relative; }
  .header .header__logo, .header .header__logo--main { flex: 0 0 auto; width: auto; max-width: 160px; margin: 0; padding: 0; }
  .header .header__logo img { height: 32px !important; }
  .header .header__column { position: static; flex: 0 1 auto; width: auto; gap: 0; }
  .header .header__row-2 { position: static; justify-content: flex-end; gap: 12px; padding: 0; }
  .header .header__cta { order: 1; display: block; width: auto; }
  .header .header__cta .bb-btngroup__button { padding: 10px 14px; font-size: 14px; line-height: 20px; white-space: nowrap; }
  .header .header__navigation--toggle,
  .header .header__close--toggle { order: 2; display: block; flex: 0 0 auto; width: 30px; height: 30px; margin: 0; filter: none; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat; }
  .header .header__close--toggle { display: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .header .header__navigation--toggle.hide { display: none; }
  .header .header__close--toggle.show { display: block; }
  .header .header__navigation--toggle:after { display: none; }
  .header .header__navigation { display: none; order: 3; width: auto; margin: 0; }
  .header .header__navigation.open { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 50; min-height: calc(100vh - 72px); padding: 8px 20px 40px; background-color: #13163c; }
  .header .header__navigation.open .bb-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .header .header__navigation.open .bb-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .header .header__navigation.open .bb-nav__link { display: block; padding: 15px 0; font-size: 20px !important; line-height: 22px; }
}
@media (max-width: 374px) {
  .header .header__cta .bb-btngroup__button { padding: 8px 12px; font-size: 14px; }
  .header .header__logo img { height: 28px !important; }
}
/* language switcher */

.globe_class {
  background-image: none;
  width: auto;
  height: auto;
  background-image: none !important;
  height: auto !important;
  width: auto !important;
}

.footer__language-switcher {
  position: fixed;
  right: 15.4px;
  width: initial;
  max-width: initial;
  bottom: 15px;
  z-index: 999;
}


.footer__language-switcher ul.lang_list_class li a {
  font-family: "Cerebri", Sans-serif;
  font-size: 0;
  fill: #FFFFFF;
  color: #FFFFFF;
  background-color: transparent;
  background-image: linear-gradient(150deg, #5ed4c2 25%, #192568 100%);
  border-radius: 100% 100% 100% 100%;
  padding: 22px 20px 22px 20px;
  display: inline-block;
  font-weight: 700;
}

.footer__language-switcher ul.lang_list_class li a:hover {
  background-color: transparent;
  background-image: linear-gradient(230deg, #192568 0%, #5ed4c2 33%);
  color: #fff;
}

.footer__language-switcher ul.lang_list_class {
  position: relative;
  left: 0;
  transform: translateX(0);
  padding: 0;
  top: 0;
  display: block;
}

.footer__language-switcher .lang_list_class:after, .lang_list_class:before {
  display: none;
}

.footer__language-switcher .lang_list_class li {
  position: relative;
  line-height: 1;
  font-size: inherit;
  padding: 0;
  background-color: transparent;
  border-left: 0;
  border-right: 0;
}

.footer__language-switcher .lang_list_class li {
  padding: 0 !important;
  border: 0 !important;
  width: 100%;
}

.footer__language-switcher .footer__language-switcher--label-current {
  display: none;
}

.footer__language-switcher a.lang_switcher_link[lang="de"]:before {
  content: 'DE';
  font-size: 22px;
}

.footer__language-switcher a.lang_switcher_link[lang="en"]:before {
  content: 'EN';
  font-size: 22px;
}

html[lang="de"] .footer__language-switcher a.lang_switcher_link[lang=de] {
  display: none !important;
}

html[lang="en"] .footer__language-switcher a.lang_switcher_link[lang=en] {
  display: none !important;
}

/* Relaunch: footer like the live site (white band, navy text) — doubled class beats theme-overrides.css, which loads later */
.footer.footer { background-color: #ffffff; }
.footer.footer, .footer.footer p, .footer.footer span, .footer.footer a { color: #192568; }

/* Relaunch responsive footer (22.9.): legal items spaced by gap instead of &nbsp; so they wrap cleanly.
   Below 1200 px the legal line and the "Member of" logos stack and centre; logos keep their size and wrap. */
/* (c) in eigener Zeile, die drei Rechtslinks als Gruppe darunter (Christian, 25.9.2026: "Cookies ist nicht in
   einer Zeile wie Impressum und Datenschutz"). Gemessen: Die Spalte ist am Desktop nur 481-546 px breit,
   (c) plus drei Links brauchen ueber 600 px - so brachen die Links auseinander. Die AGB stehen seit 25.9.
   nicht mehr im Footer (gehen nur mit Angeboten und Rechnungen raus). */
.footer .bb-footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer .bb-footer-links { display: flex; flex-wrap: wrap; gap: 6px 30px; }
@media (max-width: 1199px) {
  .footer .dnd-section > .row-fluid { flex-wrap: wrap; }
  .footer .span5.dnd-column, .footer .span7.dnd-column { float: none; flex: 0 0 100%; width: 100%; max-width: 100%; margin-left: 0; }
  .footer .bb-footer-legal { align-items: center; }
  .footer .bb-footer-links { justify-content: center; }
  .footer .span7.dnd-column { padding-top: 28px; }
  .footer .span7.dnd-column > .row-fluid-wrapper > .row-fluid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 36px; }
  .footer .span7.dnd-column .dnd-column { float: none; width: auto; min-height: 0; margin: 0; padding: 0 !important; flex: 0 0 auto; }
  .footer .span7.dnd-column .dnd-row { padding: 0 !important; }
  .footer .span7.dnd-column img { max-width: 100%; height: auto; }
}
@media (max-width: 767px) {
  /* 16 px und 20 px Abstand: die drei Links passen damit ab 360 px Breite in eine Zeile */
  .footer .bb-footer-legal { font-size: 16px !important; gap: 8px; }
  .footer .bb-footer-links { gap: 8px 20px; }
  .footer .span7.dnd-column .span2.dnd-column { flex-basis: 100%; }
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
/* Brand tokens — literal values on purpose: theme.* does not resolve in this portal's stylesheets (neither in WE7's theme-overrides.css). Colors = theme palette. */
:root {
  --bb-navy-dark:  #101028;
  --bb-navy:       #192568;
  --bb-teal:       #5ed4c2;
  --bb-teal-dark:  #2890a8;
  --bb-mint:       #dff6f3;
  --bb-soft-grey:  #fafafb;
  --bb-light:      #ffffff;
}};
  --bb-navy:       #427075;
  --bb-teal:       #131932;
  --bb-teal-dark:  ;
  --bb-mint:       ;
  --bb-soft-grey:  ;
  --bb-light:      #E1E2E7;
}

/* ==========================================================================
   Brand tokens and section variants (relaunch)

   The body is globally dark via .main-background, so sections are dark by
   default; .bb-section--light and --mint invert that locally.
   ========================================================================== */

/* Tokens are defined in main.css (theme.* is not resolved inside included partials). */};
  --bb-navy:       ;
  --bb-teal:       ;
  --bb-teal-dark:  ;
  --bb-mint:       ;
  --bb-soft-grey:  ;
  --bb-light:      ;
}

/* --- Section variants ---------------------------------------------------
   Set as the class parameter on that section's dnd_section tag:
   class="bb-section bb-section--light"
   -------------------------------------------------------------------------- */

.bb-section {
  position: relative;
}

/* Dark: matches the default ground, set explicitly for sections that sit
   next to a light neighbour. */
.bb-section--dark {
  background-color: var(--bb-navy-dark);
  color: var(--bb-light);
}

.bb-section--dark h1,
.bb-section--dark h2,
.bb-section--dark h3,
.bb-section--dark h4,
.bb-section--dark h5,
.bb-section--dark h6 {
  color: var(--bb-teal);
}

.bb-section--dark a:not(.button):not(.cta_button) {
  color: var(--bb-teal);
}

/* Light: inverts the dark ground. */
.bb-section--light,
.bb-section--mint {
  color: var(--bb-navy);
}

.bb-section--light {
  background-color: var(--bb-soft-grey);
}

.bb-section--mint {
  background-color: var(--bb-mint);
}

.bb-section--light h1,
.bb-section--light h2,
.bb-section--light h3,
.bb-section--light h4,
.bb-section--light h5,
.bb-section--light h6,
.bb-section--mint h1,
.bb-section--mint h2,
.bb-section--mint h3,
.bb-section--mint h4,
.bb-section--mint h5,
.bb-section--mint h6 {
  color: var(--bb-navy);
}

.bb-section--light p,
.bb-section--light li,
.bb-section--mint p,
.bb-section--mint li {
  color: var(--bb-navy);
}

.bb-section--light a:not(.button):not(.cta_button),
.bb-section--mint a:not(.button):not(.cta_button) {
  color: var(--bb-teal-dark);
}

/* Cards on a light ground need their own surface, otherwise they vanish
   into the background. */
.bb-section--light .bb-card,
.bb-section--mint .bb-card {
  background-color: var(--bb-light);
}

/* --- Embedded HubSpot form (contact sections) -----------------------------
   Centre the form and give the submit button the theme button look.
   -------------------------------------------------------------------------- */
.bb-section .hs_cos_wrapper_type_form form.hs-form {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px;
  border-radius: 8px;
  background-color: var(--bb-light, #ffffff);
  color: var(--bb-navy, #192568);
}

.bb-section .hs-form label,
.bb-section .hs-form legend,
.bb-section .hs-form .hs-richtext,
.bb-section .hs-form .hs-richtext p {
  color: var(--bb-navy, #192568);
}

.bb-section .hs-form .hs-input {
  border: 1px solid #d1d6dc;
  border-radius: 4px;
  background-color: #ffffff;
  color: var(--bb-navy, #192568);
}

.bb-section .hs-form .hs-input:focus {
  outline: none;
  border-color: var(--bb-teal, #5ed4c2);
}

.bb-section .hs-form .hs-button {
  display: inline-block;
  padding: 14px 32px;
  border: 0;
  border-radius: 4px;
  background-color: var(--bb-teal, #5ed4c2);
  color: var(--bb-navy-dark, #101028);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.bb-section .hs-form .hs-button:hover {
  opacity: .85;
}

.bb-section .hs-form .actions {
  text-align: center;
}

/* Teal band (divider-green-bg): dark copy, navy buttons */
.bb-section--teal,
.bb-section--teal h1, .bb-section--teal h2, .bb-section--teal h3, .bb-section--teal h4,
.bb-section--teal p, .bb-section--teal li,
.bb-section--teal #bb-heading h2,
.bb-section--teal #bb-heading .subheading {
  color: var(--bb-navy, #192568) !important; /* module writes an inline colour */
}

.bb-section--teal .bb-btngroup__button,
.bb-section--teal .hs-form .hs-button {
  background-color: var(--bb-navy, #192568);
  color: var(--bb-light, #ffffff);
}

.bb-section--teal .bb-btngroup__link {
  border-color: var(--bb-navy, #192568);
  color: var(--bb-navy, #192568);
}

.bb-section--teal .bb-btngroup__link:hover {
  background-color: var(--bb-navy, #192568);
  color: var(--bb-light, #ffffff);
}

.bb-section--teal .social-links svg,
.bb-section--teal .social-links path {
  fill: var(--bb-navy, #192568);
}


/* === Relaunch design handoff (17.09.) === */

/* Handwriting: Caveat provides only the capital I (dearJoe draws it as a bare stroke) */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  /* Subset with the single glyph "I" (1.5 kB), embedded so no request goes to Google. SIL OFL. */
  src: url(data:font/woff2;base64,d09GMgABAAAAAAXQAA8AAAAACswAAAV4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbXhyDLgZgP1NUQVQcADwRCAqIRIYjCwwAATYCJAMUBCAFg2wHIBucCMjEh+i0f7M7QeGwTCr6xDQV0x6kTVLknN+cnB7gL3j//3tV/5gUCoc+BQOUKP2x7xsnsTU69gIs1sekufGXNknBCs5VEM+lg9lBv0eCALCHRAmvI5ot/BELJr+wvB6O7bN0nXAE7eD+KIa1aXs7IR5huskUDMQgYN+rTOBKKWDJZfAGAwlYeFNOaGa1647vgGSEwhP2wr4YW0ktmFyQLwRC/NSehBMJ/sbneIYL2If16MZ4pMIbLIT40Q5Jf6xaCuzryatsllCIlLUrCzCG3mcg+FLjbfEuBE8gPmFtihQr0WsCwRmNF0M7TIgmVqSDrddRJlgp8MIgkwSdEDtZQSeDYGQL4kSe5iQ4Ps6Hef1Aau1HgkM1npEZ6vowbftWSh4wEyEAmPUMbVQWHkymIxY/wurYA4avBplSeiZvUm0BrkGFEvba/68yU9gnJA2Asb5OtjKzCVZtCMSLYcmgUcycpmYdSa1Nm/WYbS9SBF8D0A13q1DC81SSS3ie/5Qfc17jJs/DKQZBCWwvezSIBiCregD1ieCF/+WUZVl2dsOmBU5zHTVTGtqmzF3QMHGB/cRxhnPx3Oio3PgwKcnDOOJh3H96t9y4e7f8jf2y9eYzZgk3KjMY5Ubr3SCLVW60SPUbgu6elQ4NBnJn/F+VcJxEb1JwphMmCTco2fPqHpNimTXIatVLD44V3rplxlLzOMO5eOrcRW43u5/ZH3vDNm2EtQpKs8lW+T09ePXVVz05A+qB/NclS7nRcRx3LvF12TKDzDA8PN6icqtcP+JhPH16NzGMkFnvPb6bjBwny84Ems+d21G0pNtW+QajfMPdIMtdO8tBxVJzvPkME2n9oGIZh6WcZKlpj2LwhIQzmUx1H+RM0g0bLHLrBr1ebnxFqR+UcGbZ+tH1tgbO1sC1/i8t5RQrrok8dR+LzmY4PMp4lJPs8Kq071SE2/GS9xxek1LHaIeHGAto1aqf33VU2An3PNuR2tmY8aP8XUXy24+Uyko+mn4Ue1pduCRE7JWr3TVlNnE3LmeX6oKqdUc6ci1Ylrs1T1AUVxTPWvrTeebNwOR8+swt98PLC8Bs+zRmdXDq4u4YX4HI4VeczJqn8X1ujVTYWfa+4EIt4zN+8/xQnPzBC6WsyiGH0o/ib7kUzksR01jtk3YN8Vyzgl3aN7NmYECTU4Tln2xz+9ItrijebbAx/WfRu4HB+QKnbOUkt4KV2LfDX/1qSGDJ7d64lf1Cwf1ofCJ3vkZU1WIVcga2vxgXyAycdMt5wal7u9evDnZO+puxaRD6mQ9Os71NlxMKoPqcfULrULNc54xlrGDrTLEnfV1Cc/uFogmsr2L7p7NyxHuyUc+wa1OFf/zkdinR0e/296+q4zxpxqxAoddHPWrv7TndHzn0JJ1Yoc7fKvvQW979E6355VntLDldAgD4Ed+AW7H0q8rUGU7pv4lZ9nvWhdcnpf9M7nyn+bU0fuP/D+j77L33DjNvF8JbPY+W8xv/q6PvE9eaLGCm8NeJAeEy61dxxc9frGFkPERE8NYtYu03vGCD3jhLbcT4Prxp/j/wBWgMHHFEYxGPuRtpuyaAO6ZrQngju+iI+K+7AUT+e3dNgBYtaEIzdO5gHbqRiijhpT5o0IsWdEOHPkTiPS1oRyS60IsmRKEKhShHHmZhAFrx7TpEoA5adKAFuehCOxowHlr0jrqrC51QIRaRiGYXxKlpyMMk1KJgxZTY2pOb0I92zEJvv8yq4XnoQjfmbd4+mLnwX0UjBvFQoR7N0EI1Pl+NXtLdCi00+WIO+i/EPGzQR2jw5eA+sdiEltZ8P2Zr3Rp0oaMm34UuvbsdWjQe2ry8zVHQLAQh33VD3o4/i1hY) format('woff2');
  unicode-range: U+49;
}

/* Buttons — uniform 260 x 72, centred, two lines allowed */
.bb-btngroup { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.bb-btngroup--center { justify-content: center; }
.bb-btngroup__button,
.bb-btngroup__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 72px;
  padding: 0 24px;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out;
}
.bb-btngroup__button { background-color: var(--bb-teal, #5ed4c2); color: var(--bb-navy, #192568); }
.bb-btngroup__button:hover { opacity: .85; color: var(--bb-navy, #192568); }
.bb-btngroup__link { border: 2px solid var(--bb-teal, #5ed4c2); color: var(--bb-teal, #5ed4c2); padding: 0 22px; }
.bb-btngroup__link:hover { background-color: var(--bb-teal, #5ed4c2); color: var(--bb-navy-dark, #101028); }

/* Header CTA — compact variant */
.header .bb-btngroup__button { width: auto; height: auto; padding: 12px 24px; font-size: 17px; letter-spacing: .5px; }

/* Teal band: handwriting navy too */
.bb-section--teal .bb-modblock__handwriting,
.bb-section--teal .header-motivation-text { color: var(--bb-navy, #192568); }
.bb-section--teal .bb-btngroup__link { border-color: var(--bb-navy, #192568); color: var(--bb-navy, #192568); }

/* Social icons as 52 px teal circles */
.bb-section .social-links { display: flex; gap: 16px; }
.bb-section .social-links a {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border: 2px solid var(--bb-teal, #5ed4c2); border-radius: 50%;
  background: transparent !important; margin: 0 !important;
}
.bb-section .social-links svg { width: 22px; height: 22px; }
.bb-section .social-links svg, .bb-section .social-links path { fill: var(--bb-teal, #5ed4c2) !important; }

/* Contact form card — 520 px, two-column name row, teal-dark fields */
.bb-section .hs_cos_wrapper_type_form form.hs-form {
  max-width: 520px;
  margin: 0 0 0 auto;
  padding: 32px;
  border-radius: 8px;
  background-color: var(--bb-light, #ffffff);
  color: var(--bb-navy, #192568);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.bb-section .hs-form fieldset { max-width: none; grid-column: 1 / -1; margin: 0; display: contents; }
.bb-section .hs-form .hs-form-field { grid-column: 1 / -1; margin: 0; }
.bb-section .hs-form fieldset.form-columns-2 .hs-form-field { grid-column: auto; width: 100%; float: none; }
.bb-section .hs-form .hs_firstname, .bb-section .hs-form .hs_lastname { grid-column: auto; }
.bb-section .hs-form .hs-form-field > label { display: block; margin: 0 0 6px; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--bb-navy, #192568); }
.bb-section .hs-form .input { margin: 0; }
.bb-section .hs-form .hs-input { width: 100%; box-sizing: border-box; padding: 10px 14px; font-size: 16px; line-height: 24px; border: 1px solid var(--bb-teal-dark, #2890a8); border-radius: 4px; background: #ffffff; color: var(--bb-navy, #192568); }
.bb-section .hs-form textarea.hs-input { min-height: 96px; resize: vertical; }
.bb-section .hs-form .hs-input:focus { outline: none; border-color: var(--bb-teal, #5ed4c2); }
.bb-section .hs-form .hs_recaptcha, .bb-section .hs-form .hs-richtext, .bb-section .hs-form .hs_error_rollup { grid-column: 1 / -1; }
.bb-section .hs-form .actions { grid-column: 1 / -1; text-align: left; margin: 4px 0 0; padding: 0; }
.bb-section .hs-form .hs-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 220px; height: 56px; padding: 0 24px; border: 0; border-radius: 4px;
  background-color: var(--bb-teal, #5ed4c2); color: var(--bb-navy, #192568);
  font-size: 20px; line-height: 24px; font-weight: 700; text-transform: uppercase; cursor: pointer;
}

/* Handoff 17.9.2026: content width 1400 px — no padding on the top-level column,
   nested rows pulled back out so nested content aligns with the section edge */
@media (min-width: 768px) {
  .bb-section .dnd-column { padding: 0 15px; }
  .bb-section .dnd-column.span12,
  .bb-section .row-fluid > .dnd-column:first-child { padding-left: 0; }
  .bb-section .dnd-column.span12,
  .bb-section .row-fluid > .dnd-column:last-child { padding-right: 0; }
}
.bb-section .hs_cos_wrapper_type_rich_text > :last-child { margin-bottom: 0; }
.bb-section .social-links a { width: 56px; height: 56px; }
.bb-section .social-links a > span,
.bb-section .social-links a .hs_cos_wrapper { background: transparent !important; }
.bb-section .hs-form textarea.hs-input { height: 84px; min-height: 84px; }
/* Handoff: centred heading block with body-text subheading is capped at 960 px like the subheading */
#bb-heading.bb-heading--sub-text .heading { max-width: 960px; margin-left: auto; margin-right: auto; }

/* Backgrounds like the live site: the hero sits on the body background (globe + gradient);
   wave and gradient bands are stretched to the section so both wave edges stay visible */
.dnd-section.bb-section--wave,
.dnd-section.bb-section--gradient { background-size: 100% 100% !important; background-position: center top !important; background-repeat: no-repeat !important; }

/* DearJoe-inline: the capital "I" of DearJoe is unreadable — Caveat (loaded as an "I"-only subset above) takes it over, everything else stays DearJoe */
span[style*="DearJoe"], p[style*="DearJoe"], #bb_header .header-motivation-text { font-family: 'Caveat', 'DearJoe', arial, sans-serif !important; }

/* Hover state for every link (buttons keep their own): teal + underline, image links dim slightly */
a:not(.hs-button):not(.bb-btngroup__button):not(.bb-btngroup__link):not(.social-links__link):not(.hs-image-widget):hover,
a:not(.hs-button):not(.bb-btngroup__button):not(.bb-btngroup__link):not(.social-links__link):focus-visible { color: #5ed4c2 !important; text-decoration: underline !important; cursor: pointer; }
.footer.footer a:hover, .footer.footer a:focus-visible { color: #5ed4c2 !important; text-decoration: underline !important; }
a:hover img, .social-links__link:hover, #bb_contact .contact-image a:hover, #bb_contact .social-image a:hover { opacity: .75; transition: opacity .15s ease; }
#bb_button .hs-button:hover, #bb_contact .hs-button:hover { filter: brightness(1.12); text-decoration: none !important; }

/* Legal pages (Impressum, Datenschutz): readable heading hierarchy on navy */
.bb-legal h1 { color: #5ed4c2 !important; font-size: 59px; line-height: 71px; margin: 0 0 40px; }
.bb-legal h2 { color: #ffffff; font-size: 32px; line-height: 40px; text-transform: none; margin: 48px 0 16px; }
.bb-legal h3 { color: #5ed4c2 !important; font-size: 22px !important; line-height: 30px; margin: 32px 0 12px; }
.bb-legal h4 { color: #ffffff !important; font-size: 20px; line-height: 28px; margin: 24px 0 8px; }
.bb-legal p, .bb-legal li { color: #ffffff; font-size: 17px; line-height: 26px; }
.bb-legal a { color: #5ed4c2; word-break: break-word; }
.bb-legal .hs_cos_wrapper_type_rich_text { max-width: 960px; }

/* Content-action cards (Solutions layout): dark text on the white cards; variants for screen cards and five-column icon rows */
#bb_content-action .content-action-element .text, #bb_content-action .content-action-element .text p { color: #192568; }
.bb-cards-screens #bb_content-action .content-action-element .image img { height: 260px; width: auto; max-width: 100%; border-radius: 8px; }
.bb-cards-screens #bb_content-action .content-action-element .title { min-height: 0; padding-top: 24px; }
.bb-cards-screens #bb_content-action .content-action-element { padding: 32px 32px 48px; }
.bb-cards-5 #bb_content-action .bb_content-action { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-column-gap: 24px; margin-left: 0; margin-right: 0; }
.bb-cards-5 #bb_content-action .content-action-element { padding: 24px 20px 40px; }
.bb-cards-5 #bb_content-action .content-action-element .image.circle { width: 150px; height: 150px; border-width: 12px; margin-top: -84px; }
.bb-cards-5 #bb_content-action .content-action-element .image img { height: 72px; }
.bb-cards-5 #bb_content-action .content-action-element .title { min-height: 0; padding-top: 20px; }
.bb-cards-5 #bb_content-action .content-action-element .title h4 { font-size: 20px; line-height: 26px; }
.bb-cards-5 #bb_content-action .content-action-element .text { font-size: 15px; line-height: 22px; }
.bb-cards-5 #bb_content-action .content-action-element .image img { filter: brightness(0) invert(18%) sepia(100%) saturate(600%) hue-rotate(205deg); }
.bb-cards-5 #bb_content-action .content-action-element .title h4 { overflow-wrap: anywhere; hyphens: manual; }
.bb-cards-2 #bb_content-action .bb_content-action { max-width: 1000px; margin-left: auto; margin-right: auto; }
.bb-cards-2 #bb_content-action .content-action-element .title { min-height: 0; padding-top: 24px; }
.bb-cards-2 #bb_content-action .content-action-element { padding-bottom: 48px; }

/* "So funktioniert es" flow: three numbered steps in glowing screen frames, joined by + and = */
.bb-flow { counter-reset: bbstep; }
.bb-flow .span4 { position: relative; counter-increment: bbstep; }
.bb-flow .span4:not(:last-child)::after { content: "+"; position: absolute; right: -22px; top: 160px; width: 44px; text-align: center; font-size: 64px; line-height: 64px; font-weight: 800; color: #5ed4c2; }
.bb-flow .span4:nth-child(2)::after { content: "="; }
.bb-flow #bb_content-element .content-element .image { position: relative; width: 100%; height: 380px; padding: 24px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 20px; border: 1px solid rgba(94,212,194,0.35); background: radial-gradient(circle at 50% 30%, rgba(94,212,194,0.18) 0%, rgba(94,212,194,0.04) 70%, rgba(94,212,194,0) 100%); box-shadow: 0 0 48px rgba(94,212,194,0.18); }
.bb-flow #bb_content-element .content-element .image img { max-height: 320px; max-width: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.bb-flow #bb_content-element .content-element .image::before { content: counter(bbstep); position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: #5ed4c2; color: #101028; font-size: 20px; font-weight: 800; line-height: 44px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.bb-flow #bb_content-element .content-element .title { min-height: 0; padding-top: 28px; }
.bb-flow #bb_content-element .content-element .title h4 { font-size: 22px; line-height: 28px; letter-spacing: 0; margin: 0 0 8px; }
.bb-flow #bb_content-element .bb_content-element .text, .bb-flow #bb_content-element .bb_content-element .text p { font-size: 17px; line-height: 24px; margin: 0; }
.bb-flow .hs_cos_wrapper_type_rich_text { display: block; max-width: 1000px; margin: 0 auto; }

/* AI OS module blocks (section class bb-module): KPI circle from bb_content-circle sits left-aligned under the heading, label beside it */
.bb-module #bb_content-circle .content-circle { justify-content: flex-start; padding: 0; gap: 28px; }
.bb-module #bb_content-circle .content p { margin: 0; }
.bb-module #bb_content-circle .circle { background: #5ed4c2; color: #ffffff; }

/* ---- Responsive pass (Christian 22.9.: desktop frozen, now tablet 768 and phone 390) ---- */
/* Vier Module (start page): icons in the glowing circles in white */
#bb_content-element .content-element .image img[src*="/icons/relaunch/"] { filter: brightness(0) invert(1); }
#bb_content-element .content-element .image:has(img[src*="/icons/relaunch/"]) { flex: 0 0 auto; aspect-ratio: 1 / 1; }

/* Hero H1: smaller steps on tablets, never split a word */
#bb_header .header-content h1 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 1199px) { #bb_header .header-content h1 { font-size: 52px !important; line-height: 1.15 !important; } }
@media (max-width: 1023px) { #bb_header .header-content h1 { font-size: 44px !important; } }
@media (max-width: 767px) { #bb_header .header-content h1 { font-size: 36px !important; } #bb_header .header-motivation-text { font-size: 30px !important; line-height: 1.2 !important; padding-top: 32px; } }

/* AI OS module blocks: text and graphic stack below 1024 px, graphic always after the text */
@media (max-width: 1023px) {
  .bb-module .row-fluid:has(> .dnd-column .bb-graphic) { display: flex; flex-direction: column; }
  .bb-module .row-fluid:has(> .dnd-column .bb-graphic) > .dnd-column { float: none; width: 100%; margin-left: 0; }
  .bb-module .row-fluid > .dnd-column:has(.bb-graphic) { order: 2; margin-top: 40px; }
}
@media (max-width: 767px) {
  /* KPI-Kreis mit Label am Handy mittig (Christian, 23.9.) */
  .bb-module #bb_content-circle .content-circle { flex-direction: row; justify-content: center; gap: 20px; }
  .bb-module #bb_content-circle .circle.large { flex: 0 0 auto; width: 116px; height: 116px; font-size: 32px; }
  .bb-module #bb_content-circle .content { text-align: left; padding-bottom: 0; flex: 0 1 auto; }
  .bb-module #bb_content-circle .content span { font-size: 20px !important; }
}

/* „So funktioniert es“: Am Tablet (768–1023 px) wurden die drei Schritte in
   130-px-Spalten gequetscht — Screens unlesbar, Text mit Trennungen in jeder
   Zeile (Tablet-Check 24.9.). Ab hier stehen die Schritte untereinander, das
   „+“ und „=“ mittig dazwischen. */
@media (max-width: 1023px) {
  .bb-flow .row-fluid { display: flex; flex-direction: column; }
  .bb-flow .row-fluid > .dnd-column.span4 { float: none; width: 100%; margin-left: 0; }
  /* Abstand unter dem Zeichen, sonst sitzt es auf dem Nummern-Badge des naechsten Schritts */
  .bb-flow .span4:not(:last-child)::after { position: static; display: block; width: auto; margin: 28px auto 46px; }
  .bb-flow #bb_content-element .content-element .image { height: auto; padding: 28px; }
  .bb-flow #bb_content-element .content-element .image img { max-height: 300px; }
  .bb-flow #bb_content-element .content-element .text,
  .bb-flow #bb_content-element .content-element .title { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* DearJoe lines: 40 px is too big for a phone */
@media (max-width: 767px) {
  .dnd-section p[style*="font-size: 40px"]:has(> span[style*="DearJoe"]) { font-size: 28px !important; line-height: 1.25; }
}

/* Start "Problem": productivity icon and the 90 % figure centred once the columns stack
   (the row's 340 px left indent is dropped here too, in case the page keeps an older copy of the section) */
@media (max-width: 1023px) {
  .dnd-section .row-fluid-wrapper.dnd-row:has(> .row-fluid > .dnd-column #bb_process-calculation) { padding-left: 0 !important; }
}
.dnd-section p[style*="font-size: 96px"] { white-space: nowrap; }
@media (max-width: 767px) {
  .dnd-section .row-fluid:has(> .dnd-column #bb_process-calculation) > .dnd-column { text-align: center; }
  .dnd-section .row-fluid:has(> .dnd-column #bb_process-calculation) #bb_process-calculation .process-item { width: auto; padding-right: 0; }
  .dnd-section .row-fluid:has(> .dnd-column #bb_process-calculation) p { text-align: center !important; }
  .dnd-section .row-fluid:has(> .dnd-column #bb_process-calculation) p[style*="font-size: 96px"] { font-size: 72px !important; white-space: nowrap; }
}

/* Bots am Handy (Christian, 23.9.): überall dieselbe Größe wie der Bot im Hero (max. 280 × 226 px).
   In „Zwei Wege" steht der fragende Bot direkt unter der Überschrift — die Spalten werden dafür
   per display:contents aufgelöst, damit sich Überschrift, Bot, Sprechblasen und Button frei ordnen lassen. */
@media (max-width: 767px) {
  .body-container img[src*="bobby"],
  .body-container img[src*="Bobby"] { max-width: 280px !important; max-height: 226px !important; width: auto !important; height: auto !important; object-fit: contain; }
  .body-container .dnd-section:has(img[src*="bobby_question"]) > .row-fluid { display: flex; flex-direction: column; }
  .body-container .dnd-section:has(img[src*="bobby_question"]) > .row-fluid > .dnd-column { display: contents; }
  .body-container .dnd-section:has(img[src*="bobby_question"]) .dnd-row:has(#bb-heading) { order: 1; }
  .body-container .dnd-section:has(img[src*="bobby_question"]) .dnd-row:has(img[src*="bobby_question"]) { order: 2; margin: 8px 0 0 !important; }
  .body-container .dnd-section:has(img[src*="bobby_question"]) .dnd-row:has(#bb_questions) { order: 3; padding-top: 24px !important; }
  .body-container .dnd-section:has(img[src*="bobby_question"]) .dnd-row:has(#bb_button) { order: 4; }
}

/* Abstände auf dem Handy (Christian, 22.9.: "die Abschnitte sind teilweise zu weit auseinander").
   Der Desktop-Rhythmus (80–110 px je Sektionskante, 40–80 px je Zeile) addiert sich zwischen zwei
   Sektionen auf 160–200 px — auf 390 px Breite viel zu viel. Nur unter 768 px, Desktop bleibt wie er ist. */
@media (max-width: 767px) {
  .body-container .dnd-section { padding-top: 32px !important; padding-bottom: 32px !important; }
  .body-container .dnd-section .dnd-row:has(#bb_carousel) { padding-top: 28px !important; }
  .body-container .dnd-section .dnd-row:has(#bb_content-element) { padding-top: 20px !important; }
  .body-container .dnd-section .dnd-row:has(#bb_process-calculation) { padding-top: 16px !important; }
  .body-container .dnd-section .dnd-row:has(#bb_button) { margin-top: 20px !important; }
  .body-container .dnd-section .dnd-row:has(#bb_contact) { padding-top: 24px !important; }
  .body-container .dnd-column:has(img[src*="bobby_question"]) { margin-top: 16px !important; }
  .body-container #bb_button { padding-top: 12px !important; padding-bottom: 12px !important; }
  .body-container #bb-heading { margin-bottom: 24px !important; }
  #bb_header .header-motivation-text { padding-top: 32px; }
  #bb_header .bb_header { row-gap: 28px; }
  .dnd-section:not(.bb-flow) #bb_content-element .content-element { padding: 16px 0 !important; }
  .dnd-section:not(.bb-flow) #bb_content-element .content-element .title { padding-top: 16px; }
}

/* AI OS auf dem Handy (Christian, 22.9.): Abstände wie auf der Startseite, Zeile unter „Modulare Nutzung" kleiner */
@media (max-width: 767px) {
  #bb_header .header-motivation-text { padding-top: 32px !important; }
  .bb-flow #bb_content-element .content-element { padding: 0 0 8px !important; }
  .bb-flow #bb_content-element .content-element .image { height: auto !important; padding: 16px !important; }
  .bb-flow #bb_content-element .content-element .image img { max-height: 220px !important; }
  .bb-flow #bb_content-element .content-element .title { padding-top: 20px; }
  .bb-flow .span4:not(:last-child)::after { font-size: 44px !important; line-height: 44px !important; margin: 10px auto 14px !important; }
  .bb-fgrid { gap: 16px !important; }
  .bb-fgrid__card, .bb-fgrid__card--wide { padding: 20px 20px 24px !important; }
  .bb-fgrid__art { max-height: 150px; }
  .bb-panels, .bb-panels--3 { gap: 36px !important; }
  .bb-panel { padding: 36px 22px 26px !important; }
  .bb-panel__image { padding-top: 20px !important; }
  .bb-panel__title { font-size: 24px !important; line-height: 30px !important; }
  .body-container p > span[style*="font-size: 40px"] { font-size: 24px !important; }
  .bb-module .row-fluid > .dnd-column:has(.bb-graphic) { margin-top: 24px !important; }
}

/* Buttons am Handy (Christian, 23.9.): näher an das Element darüber und an den Text darunter.
   Das Modul bringt 40 px Eigenabstand und der Wrapper noch einmal 20 px mit — beides wird hier gekappt.
   Handschrift-Claims stehen am Handy mittig („Gemeinsam mit der SVG."). */
@media (max-width: 767px) {
  .body-container #bb_button { padding-top: 4px !important; padding-bottom: 4px !important; }
  .body-container #bb_button .button-wrapper { padding: 8px 20px !important; gap: 16px !important; }
  .body-container .dnd-section .dnd-row:has(#bb_button) { margin-top: 8px !important; padding-top: 8px !important; }
  .body-container .dnd-section .dnd-row:has(#bb_contact) { padding-top: 8px !important; }
  .body-container p:has(> span[style*="DearJoe"]) { text-align: center !important; }
}

/* Eine Leerzeile mehr über jeder Sektions-Überschrift am Handy (Christian, 23.9.) */
@media (max-width: 767px) {
  .body-container .dnd-section .dnd-row:has(#bb-heading),
  .body-container .dnd-section .dnd-row:has(.hs_cos_wrapper_type_rich_text h2) { padding-top: 28px !important; }
}

/* Hero am Handy (Christian, 23.9.): Bild dicht am Text darüber. Im AI-OS-Hero (Sektion ohne Button)
   sitzt die Weltkugel direkt unter dem Absatz, und der Abstand zur Sektion „So funktioniert es"
   wird im gleichen Verhältnis kleiner. Das Modul selbst setzt 50 px, daher !important. */
@media (max-width: 767px) {
  #bb_header .bb_header { row-gap: 24px !important; }
  .body-container .dnd-section:has(#bb_header):not(:has(#bb_button)) #bb_header .bb_header { row-gap: 8px !important; }
  .body-container .dnd-section:has(#bb_header):not(:has(#bb_button)) { padding-bottom: 8px !important; }
  .body-container .dnd-section:has(#bb_header):not(:has(#bb_button)) + .dnd-section { padding-top: 8px !important; }
}

/* Hero-Grafiken (SVG) am Handy über die volle Spaltenbreite — der Modul-Default 80 % macht
   eine Schemagrafik zu klein; Bot-Fotos bleiben bei 80 %. */
@media (max-width: 767px) {
  #bb_header .header-image img[src$=".svg"] { max-width: 100% !important; }
}

/* Services-Hero am Handy im Hochformat: das Modul bb_header-classic hat kein Mobil-Bildfeld,
   deshalb tauscht die CSS das SVG aus (dieselbe Idee wie das <picture> in bb_graphic). */
@media (max-width: 767px) {
  /* Englische Seite: Hochformat mit englischen Beschriftungen (zuerst, damit die
     allgemeine Regel darunter nicht gewinnt — gleiche Spezifitaet, spaeter zaehlt). */
  #bb_header .header-image img[src*="services-hero"] {
    content: url(/hubfs/raw_assets/public/beyondbots-relaunch/images/graphics/services-hero-m2.svg);
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    max-height: none !important;
  }
  html[lang="en"] #bb_header .header-image img[src*="services-hero"] {
    content: url(/hubfs/raw_assets/public/beyondbots-relaunch/images/graphics/services-hero-m2-en.svg);
  }
}

/* Tablet (768–1199 px): eine Hero-Schemagrafik darf nicht in die 30-%-Spalte gequetscht werden —
   Text und Grafik stehen dort untereinander, die Grafik zentriert bis 720 px (Christian, 24.9.). */
@media (min-width: 768px) and (max-width: 1199px) {
  #bb_header .bb_header:has(.header-image img[src$=".svg"]) { flex-direction: column; row-gap: 32px; }
  #bb_header .bb_header:has(.header-image img[src$=".svg"]) .header-content { width: 100%; padding-right: 0; }
  #bb_header .bb_header:has(.header-image img[src$=".svg"]) .header-image { width: 100%; text-align: center; }
  #bb_header .bb_header:has(.header-image img[src$=".svg"]) .header-image img { max-width: min(100%, 720px); max-height: none; }
}

/* Karriere-Hero: der Claim „Let's automate!" steht am Handy direkt unter dem Textblock
   (Christian, 24.9.) — der Theme-Standard von 32 px Abstand ist dort zu viel. */
@media (max-width: 767px) {
  .bb-hero-tightclaim #bb_header .header-motivation-text { padding-top: 8px !important; }
  /* dafuer mehr Luft zwischen Claim und Foto (Christian, 24.9.) */
  /* muss die AI-OS-Hero-Regel (Hero ohne Button, 8 px) ueberbieten, deshalb derselbe Selektor plus Klasse */
  .body-container .dnd-section.bb-hero-tightclaim:has(#bb_header):not(:has(#bb_button)) #bb_header .bb_header { row-gap: 56px !important; }
}

/* Karriere- und Stellenseiten sprechen Bewerber an, nicht Kunden — dort blendet die Seite
   den Demo-Button im Header aus (Christian, 24.9.). Die Seiten markieren sich selbst
   ueber die Klasse body-container--karriere an ihrem dnd_area. */

/* --- Bewerbungsseiten (klassisch): eingebettetes HubSpot-Formular ----------
   Die Formularmodule der Kontaktsektionen bringen ihr Styling aus bb_contact
   mit; ein pures @hubspot/form hat keins. Diese Karte holt den gleichen Look
   (weisse Karte, zweispaltige Namenszeile, tuerkiser Button) fuer die
   Bewerbungs- und Talent-Pool-Seite.
   -------------------------------------------------------------------------- */
.bb-applyform .hs_cos_wrapper_type_form form.hs-form {
  max-width: 640px; margin: 0 auto; padding: 32px; border-radius: 8px;
  background-color: #ffffff; color: #192568;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; box-sizing: border-box;
}
.bb-applyform .hs-form fieldset { max-width: none; grid-column: 1 / -1; margin: 0; display: contents; }
.bb-applyform .hs-form .hs-form-field { grid-column: 1 / -1; margin: 0; }
.bb-applyform .hs-form fieldset.form-columns-2 .hs-form-field { grid-column: auto; width: 100%; float: none; }
.bb-applyform .hs-form .hs-form-field > label { display: block; margin: 0 0 6px; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #192568; }
.bb-applyform .hs-form legend,
.bb-applyform .hs-form .hs-field-desc,
.bb-applyform .hs-form .hs-richtext,
.bb-applyform .hs-form .hs-richtext p { color: #192568; }
.bb-applyform .hs-form .input { margin: 0; }
.bb-applyform .hs-form .hs-input { width: 100%; box-sizing: border-box; padding: 10px 14px; font-size: 16px; line-height: 24px; border: 1px solid #d1d6dc; border-radius: 4px; background: #ffffff; color: #192568; }
.bb-applyform .hs-form select.hs-input { height: 46px; }
.bb-applyform .hs-form input[type="file"].hs-input { padding: 9px 14px; border-style: dashed; background: #f7f8fa; }
.bb-applyform .hs-form textarea.hs-input { min-height: 96px; resize: vertical; }
.bb-applyform .hs-form .hs-input:focus { outline: none; border-color: #5ed4c2; }
.bb-applyform .hs-form .hs_recaptcha,
.bb-applyform .hs-form .hs-richtext,
.bb-applyform .hs-form .hs_error_rollup,
.bb-applyform .hs-form .legal-consent-container,
.bb-applyform .hs-form .hs_submit { grid-column: 1 / -1; }
.bb-applyform .hs-form .hs-error-msgs, .bb-applyform .hs-form .hs-error-msg { color: #b3261e; list-style: none; padding: 0; margin: 4px 0 0; }
.bb-applyform .hs-form .actions { grid-column: 1 / -1; display: flex; justify-content: center; margin: 4px 0 0; padding: 0; }
.bb-applyform .hs-form .hs-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 220px; height: 56px; padding: 0 24px; border: 0; border-radius: 4px;
  background-color: #5ed4c2; color: #101028;
  font-size: 20px; line-height: 24px; font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.bb-applyform .hs-form .hs-button:hover { background-color: #4fc2b0; }
.bb-applyform .submitted-message { color: #ffffff; font-weight: 700; font-size: 24px; text-align: center; }
@media (max-width: 767px) {
  .bb-applyform .hs_cos_wrapper_type_form form.hs-form { grid-template-columns: 1fr; padding: 20px; }
  .bb-applyform .hs-form .hs-button { width: 100%; }
}

/* Datumsfeld im Bewerbungsformular (main.js macht aus dem Textfeld ein
   type="date"): gleiche Hoehe wie die uebrigen Felder, Kalendersymbol sichtbar. */
.bb-applyform .hs-form input[type="date"].hs-input {
  height: 46px;
  appearance: none;
  -webkit-appearance: none;
}
.bb-applyform .hs-form input[type="date"].hs-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
}
.bb-applyform .hs-form input[type="date"].hs-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* --- Systemseiten 404/500 (Relaunch-Design) -------------------------------
   Systemvorlagen koennen kein dnd_area, das Markup steht deshalb statisch in
   templates/system/bb_404.html (Generator content/gen_system.py).
   -------------------------------------------------------------------------- */
.bb-error { padding: 96px 24px 120px; }
.bb-error__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 56px;
}
.bb-error__text { flex: 1 1 560px; max-width: 640px; }
.bb-error__art { flex: 0 0 auto; }
.bb-error__art img { width: 360px; max-width: 100%; height: auto; }
.bb-error__overline {
  margin: 0 0 12px; font-family: Cerebri, arial, sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #5ed4c2;
}
.bb-error__h1 {
  margin: 0 0 20px; font-family: Cerebri, arial, sans-serif; font-weight: 900;
  font-size: 52px; line-height: 1.1; color: #5ed4c2;
}
.bb-error__lead {
  margin: 0 0 28px; font-family: Cerebri, arial, sans-serif; font-weight: 400;
  font-size: 20px; line-height: 1.5; color: #ffffff;
}
.bb-error__claim { margin: 0 0 36px; font-size: 34px; line-height: 1.2; color: #5ed4c2; }
.bb-error__buttons { display: flex; flex-wrap: wrap; gap: 16px; }
.bb-error__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 240px; height: 72px; padding: 0 16px; box-sizing: border-box;
  font-family: Cerebri, arial, sans-serif; font-size: 20px; font-weight: 700;
  text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1.15;
  /* Grundfarbe weiss: ohne sie erbt der Knopf das Theme-Tuerkis und ist auf Navy unlesbar.
     Die schlichte Variante ist damit ein Umriss-Knopf fuer die zweite Aktion. */
  color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.55);
}
.bb-error__btn:hover { color: #ffffff; border-color: #5ed4c2; text-decoration: none; }
.bb-error__btn--blue { background-color: #4269b0; color: #ffffff; border-color: transparent; }
.bb-error__btn--blue:hover { background-color: #365797; color: #ffffff; border-color: transparent; }
.bb-error__btn--dark { background-color: #192568; color: #ffffff; border-color: transparent; }
.bb-error__btn--dark:hover { background-color: #101028; color: #ffffff; border-color: transparent; }
.bb-error__links {
  display: flex; flex-wrap: wrap; gap: 28px; list-style: none; padding: 0; margin: 36px 0 0;
}
.bb-error__links a {
  font-family: Cerebri, arial, sans-serif; font-size: 17px; font-weight: 600;
  color: #5ed4c2; text-decoration: none; border-bottom: 1px solid transparent;
}
.bb-error__links a:hover { border-bottom-color: #5ed4c2; }
@media (max-width: 1023px) {
  .bb-error { padding: 64px 24px 96px; }
  .bb-error__inner { flex-direction: column; gap: 40px; text-align: center; }
  .bb-error__buttons, .bb-error__links { justify-content: center; }
  .bb-error__art img { width: 280px; }
}
@media (max-width: 767px) {
  .bb-error__h1 { font-size: 36px; }
  .bb-error__claim { font-size: 26px; }
  .bb-error__btn { width: 100%; }
}

/* --- Linktree fuer Social-Profile. Schmale, mittige Buttonliste auf Navy;
   wird meist am Handy geoeffnet, deshalb grosse Trefferflaechen. ------------- */
.bb-linktree { padding: 72px 24px 96px; }
.bb-linktree__inner { max-width: 520px; margin: 0 auto; text-align: center; }
.bb-linktree__logo { display: block; width: 220px; height: auto; margin: 0 auto 32px; }
.bb-linktree__overline {
  margin: 0 0 12px; font-family: Cerebri, arial, sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #5ed4c2;
}
.bb-linktree__h1 {
  margin: 0 0 16px; font-family: Cerebri, arial, sans-serif; font-weight: 900;
  font-size: 40px; line-height: 1.15; color: #5ed4c2;
}
.bb-linktree__lead {
  margin: 0 0 36px; font-family: Cerebri, arial, sans-serif; font-weight: 400;
  font-size: 18px; line-height: 1.5; color: #ffffff;
}
.bb-linktree__links {
  list-style: none; padding: 0; margin: 0 0 36px;
  display: flex; flex-direction: column; gap: 14px;
}
.bb-linktree__link {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 12px 20px; box-sizing: border-box;
  font-family: Cerebri, arial, sans-serif; font-size: 18px; font-weight: 700;
  text-transform: uppercase; text-align: center; line-height: 1.2;
  text-decoration: none; border-radius: 4px;
  /* Grundfarbe weiss setzen: ohne sie erbt der Knopf das Theme-Tuerkis und ist
     auf Navy unlesbar - derselbe Fall wie bei .bb-error__btn. */
  color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.55);
}
.bb-linktree__link:hover {
  background-color: #5ed4c2; border-color: #5ed4c2; color: #101028; text-decoration: none;
}
.bb-linktree__link--primary { background-color: #4269b0; border-color: transparent; }
.bb-linktree__link--primary:hover { background-color: #365797; border-color: transparent; color: #ffffff; }
.bb-linktree__claim { margin: 0; font-size: 30px; line-height: 1.2; color: #5ed4c2; }
/* Die Linktree-Seiten laufen ohne Kopf- und Fusszeile. Impressum und
   Datenschutz muessen trotzdem von jeder Seite aus erreichbar sein. */
.bb-linktree__legal {
  margin: 44px 0 0; font-family: Cerebri, arial, sans-serif; font-weight: 400;
  font-size: 14px; color: rgba(255, 255, 255, 0.55);
}
.bb-linktree__legal a {
  color: rgba(255, 255, 255, 0.55); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.bb-linktree__legal a:hover { color: #5ed4c2; border-bottom-color: #5ed4c2; }
@media (max-width: 767px) {
  .bb-linktree { padding: 56px 20px 80px; }
  .bb-linktree__h1 { font-size: 30px; }
  .bb-linktree__lead { font-size: 17px; }
  .bb-linktree__claim { font-size: 24px; }
}

/* --- Uebrige Systemseiten (Passwortschutz, E-Mail-Einstellungen, Abmeldung,
   Suche) im Relaunch-Design. Die HubSpot-Module bleiben unveraendert, sie
   bekommen nur Kopfzeile und weisse Karte. --------------------------------- */
.bb-systempage { padding: 96px 24px 120px; }
.bb-systempage__inner { max-width: 720px; margin: 0 auto; }
.bb-systempage--search .bb-systempage__inner { max-width: 900px; }
.bb-systempage__overline {
  margin: 0 0 12px; font-family: Cerebri, arial, sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #5ed4c2;
}
.bb-systempage__h1 {
  margin: 0 0 20px; font-family: Cerebri, arial, sans-serif; font-weight: 900;
  font-size: 44px; line-height: 1.15; color: #5ed4c2;
}
.bb-systempage__lead {
  margin: 0 0 32px; font-family: Cerebri, arial, sans-serif; font-weight: 400;
  font-size: 20px; line-height: 1.5; color: #ffffff;
}
.bb-systempage__card {
  background: #ffffff; color: #192568; border-radius: 8px; padding: 32px;
}
.bb-systempage__card,
.bb-systempage__card p,
.bb-systempage__card li,
.bb-systempage__card label,
.bb-systempage__card legend,
.bb-systempage__card h2,
.bb-systempage__card h3 { color: #192568; }
.bb-systempage__card h2 { font-size: 24px; margin: 0 0 16px; }
/* Hinweistexte der Module kommen als h3 und erben sonst die luftige
   Ueberschriften-Zeilenhoehe des Themes. */
.bb-systempage__card h3 { font-size: 18px; font-weight: 400; line-height: 1.5; margin: 0 0 12px; }
.bb-systempage__card a { color: #2890a8; }
.bb-systempage__card input[type="text"],
.bb-systempage__card input[type="email"],
.bb-systempage__card input[type="password"] {
  width: 100%; box-sizing: border-box; padding: 10px 14px; font-size: 16px;
  line-height: 24px; border: 1px solid #d1d6dc; border-radius: 4px;
  background: #ffffff; color: #192568;
}
.bb-systempage__card input:focus { outline: none; border-color: #5ed4c2; }
.bb-systempage__card input[type="submit"],
.bb-systempage__card button[type="submit"],
.bb-systempage__card .hs-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 220px; height: 56px; padding: 0 24px; border: 0; border-radius: 4px;
  background-color: #5ed4c2; color: #101028; font-family: Cerebri, arial, sans-serif;
  font-size: 20px; font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.bb-systempage__card input[type="submit"]:hover,
.bb-systempage__card .hs-button:hover { background-color: #4fc2b0; }
.bb-systempage__card .item label { display: flex; gap: 8px; align-items: flex-start; }
/* HubSpot-Module bringen in der Karte eine eigene H1 mit ("Von E-Mail
   abmelden"). Die doppelt unsere Ueberschrift und wird ausgeblendet. */
.bb-systempage__card .page-header { display: none; }
/* Zweisprachige Kopfzeile: Die Abo-Systemseiten gibt es pro Portal nur einmal,
   englische Empfaenger landen auf derselben Seite. Darum DE und EN untereinander. */
.bb-systempage__h1--pair { margin-bottom: 6px; }
.bb-systempage__h1-alt {
  margin: 0 0 24px; font-family: Cerebri, arial, sans-serif; font-weight: 700;
  font-size: 26px; line-height: 1.2; color: rgba(255, 255, 255, 0.55);
}
.bb-systempage__lead--pair { margin-bottom: 6px; }
.bb-systempage__lead-alt {
  margin: 0 0 32px; font-family: Cerebri, arial, sans-serif; font-weight: 400;
  font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.6);
}
/* Suche: Liste auf Navy, Treffer tuerkis */
.bb-systempage--search .hs-search-results__title { color: #5ed4c2; }
.bb-systempage--search .hs-search-results__description,
.bb-systempage--search li { color: #ffffff; }
.bb-systempage--search input[type="text"],
.bb-systempage--search input[type="search"] {
  box-sizing: border-box; padding: 10px 14px; font-size: 16px; border: 1px solid #2890a8;
  border-radius: 4px; background: #ffffff; color: #192568;
}
@media (max-width: 767px) {
  .bb-systempage { padding: 64px 20px 96px; }
  .bb-systempage__h1 { font-size: 32px; }
  .bb-systempage__h1-alt { font-size: 20px; }
  .bb-systempage__card { padding: 20px; }
  .bb-systempage__card input[type="submit"],
  .bb-systempage__card .hs-button { width: 100%; min-width: 0; }
}

/* --- Sprachumschalter „DE | EN“ (Segmented Control) -----------------------
   Eigenes Markup im Header-Partial statt @hubspot/language_switcher: ein Klick
   statt Hover-Menue, im Brand-Vokabular der Buttons. Zwei Instanzen — eine in
   der Kopfzeile (ab 768 px), eine im Burger-Panel (darunter).
   -------------------------------------------------------------------------- */
.bb-lang {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}
.bb-lang__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 7px 14px; border-radius: 999px;
  font-family: Cerebri, arial, sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .5px; line-height: 1; text-decoration: none;
  color: rgba(255, 255, 255, .75);
  transition: background-color .15s ease, color .15s ease;
}
a.bb-lang__opt:hover, a.bb-lang__opt:focus-visible {
  background: rgba(255, 255, 255, .14); color: #ffffff; text-decoration: none;
}
a.bb-lang__opt:focus-visible { outline: 2px solid #5ed4c2; outline-offset: 2px; }
.bb-lang__opt.is-active { background: #5ed4c2; color: #101028; cursor: default; }

/* Kopfzeile: neben dem Demo-Button, am Handy unsichtbar */
.bb-lang--bar { margin-left: 16px; }
@media (max-width: 767px) { .bb-lang--bar { display: none; } }

/* Burger-Panel: eigene Zeile unter den Menuepunkten, nur am Handy */
.bb-lang--nav { display: none; }
@media (max-width: 767px) {
  .bb-lang--nav { display: inline-flex; margin: 24px 0 8px; }
  .bb-lang--nav .bb-lang__opt { min-height: 44px; padding: 10px 20px; font-size: 16px; }
}

/* Auf Seiten ohne Demo-Button (Karriereseiten) rueckt der Umschalter an dessen
   Stelle, damit in der Kopfzeile keine Luecke entsteht. */
body:has(.body-container--karriere) .bb-lang--bar { margin-left: 0; }

/* Kontaktband am Tablet: Bobby stand mit 128 px neben dem 520-px-Formular und
   wirkte verloren; er darf seine Spalte ausfuellen (Tablet-Check 24.9.). */
@media (min-width: 768px) and (max-width: 1023px) {
  #bb_contact .image img { width: 100%; max-width: 200px; height: auto; }
}

/* Demo-Buchungsseite: Der Cal.com-Kalender kommt hell; auf Navy braucht er eine
   weisse Karte, sonst steht er randlos im Dunkeln. */
.bb-cal {
  max-width: 1000px; margin: 0 auto; padding: 12px;
  background: #ffffff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
/* Die Platzhalterhoehe gilt nur, solange Cal noch laedt. Sobald der iframe da
   ist, bestimmt Cal die Hoehe — sonst blieben unter dem Kalender bis zu 230 px
   weisse Flaeche stehen (Christian, 24.9.). */
.bb-cal__frame { width: 100%; }
.bb-cal__frame:has(iframe) { min-height: 0 !important; }
.bb-cal iframe { display: block; width: 100%; }
@media (max-width: 767px) {
  .bb-cal { padding: 8px; border-radius: 8px; }
}

/* --- Header-Button „Demo anfragen" -----------------------------------------
   Christian, 24.9.: Der Button gehoert nur auf die vier Angebotsseiten (Start,
   AI OS, Services, beyondbots) — Karriere, Bewerbung, Newsletter, Demo, Recht
   und die Systemseiten brauchen ihn nicht. Deshalb umgekehrte Logik: standard-
   maessig aus, sichtbar nur mit der Klasse body-container--cta am dnd_area.
   Die Klassen body-container--karriere und --nocta bleiben an ihren Templates,
   sie steuern jetzt nur noch Abstaende bzw. gar nichts mehr.
   -------------------------------------------------------------------------- */
.header__cta { display: none !important; }
body:has(.body-container--cta) .header__cta { display: block !important; }

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}

/* Base text colour as a literal — theme.text.* does not resolve for this theme (see :root note). Live paragraphs are white via inline styles; the theme default #427075 is unreadable on navy. */
body.main-background {
  color: #ffffff;
}

.main-background {
  background-image: url(https://25679919.fs1.hubspotusercontent-eu1.net/hubfs/25679919/raw_assets/public/beyondbots-relaunch/images/backgrounds/header-globe.svg), url(https://25679919.fs1.hubspotusercontent-eu1.net/hubfs/25679919/raw_assets/public/beyondbots-relaunch/images/backgrounds/main-bg.svg);
  background-position: top left, top center;
  background-repeat: no-repeat, repeat-x;
  background-size: 90%, 100%;
  background-color: var(--bb-navy-dark, #101028);
}

@media (min-width: 768px) {
  .body-container-wrapper {
    min-height: calc(100vh - 200px);
  }
}