/* 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)
*/

/* ==========================================================================
   Layout - Serviscope Theme
   ========================================================================== */



/* CSS Variables */
:root {
  --column-gap: 2rem;
  --column-width-multiplier: 8.333;
}

/* Content Wrapper */
.content-wrapper {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}


.inner-wrapper {
   max-width: 1280px;
   margin-left: auto;
   margin-right: auto;
}

/* Full Width Container */
.full-width {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Section Spacing */
.section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.section--small {
  padding-top: calc(80px * 0.5);
  padding-bottom: calc(80px * 0.5);
}

.section--large {
  padding-top: calc(80px * 1.5);
  padding-bottom: calc(80px * 1.5);
}

/* Row Fluid (Grid System) */
.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* Mobile Layout - Full Width Columns */

  .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;
  }

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

  .row-fluid .span12 {
    width: 100%;
  }
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

/* Grid Utilities */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 576px) {
  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Spacing Utilities */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }

.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

/* Width Utilities */
.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.max-w-full {
  max-width: 100%;
}

/* Visibility */
.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

@media (max-width: 992px) {
  .md\:hidden {
    display: none;
  }
  
  .md\:block {
    display: block;
  }
}

@media (max-width: 576px) {
  .sm\:hidden {
    display: none;
  }
  
  .sm\:block {
    display: block;
  }
}

/* Body Wrapper */
.body-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.body-container-wrapper {
  flex: 1;
}
.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 HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* ==========================================================================
   Typography - Serviscope Theme
   ========================================================================== */

/* CSS Variables from Theme Settings */
:root {
  --font-primary: VIA-Type, sans-serif;
  --font-secondary: VIA-Type, sans-serif;
  --font-accent: VIA-Type, serif;
  
  --color-primary: #1B1464;
  --color-secondary: #E8F4F8;
  --color-accent: #1B4B9A;
  --color-white: #FFFFFF;
  --color-text-dark: #1B1464;
  --color-text-light: #494A52;
  --color-border: #D1D6DC;
  
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 16px;
  
  --spacing-vertical: 80px;
  --content-max-width: 1500px;
  --container-padding: 24px;
}

/* Body */
body {
  font-family: var(--font-secondary);
  font-size: 16px;
  line-height: 1.6;
  color: #494A52;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Handles word breaking for CJK languages */
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.25rem;
}

p:last-child {
  margin-bottom: 0;
}

/* Anchors */
a {
  color: #1B4B9A;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: #1B1464;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  margin: 0 0 1rem;
  line-height: 1.2;
}

h1 {
  font-size: 48px;
  font-weight: Bold;
  color: #1B1464;
  text-transform: none;
}

h2 {
  font-size: 36px;
  font-weight: Bold;
  color: #1B1464;
  text-transform: none;
}

h3 {
  font-size: 28px;
  font-weight: Bold;
  color: #1B1464;
  text-transform: none;
}

h4 {
  font-size: 22px;
  font-weight: Bold;
  color: #1B1464;
  text-transform: none;
}

h5 {
  font-size: 18px;
  font-weight: Bold;
  color: #1B1464;
  text-transform: none;
}

h6 {
  font-size: 16px;
  font-weight: Bold;
  color: #1B1464;
  text-transform: none;
}

/* Accent Text (Italic Serif) */
.text-accent,
.sc-text-accent {
  font-family: var(--font-accent);
  font-style: italic;
}

/* Lists */
ul, ol {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

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

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

li {
  margin-bottom: 0.25rem;
}

/* Code blocks */
pre {
  overflow: auto;
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: var(--border-radius-small);
  font-size: 0.875rem;
}

code {
  vertical-align: bottom;
  background-color: #f5f5f5;
  padding: 0.125rem 0.375rem;
  border-radius: var(--border-radius-small);
  font-size: 0.875em;
}

pre code {
  background: none;
  padding: 0;
}

/* Blockquotes */
blockquote {
  border-left: 3px solid var(--color-accent);
  margin: 0 0 1.25rem;
  padding: 0.5rem 0 0.5rem 1.25rem;
  font-style: italic;
  color: var(--color-text-light);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Horizontal rules */
hr {
  border: none;
  border-bottom: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* Image alt text */
img {
  font-size: 0.75rem;
  word-break: normal;
}

/* Selection */
::selection {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* Utility Classes */
.text-primary {
  color: var(--color-primary);
}

.text-accent-color {
  color: var(--color-accent);
}

.text-light {
  color: var(--color-text-light);
}

.text-white {
  color: var(--color-white);
}

.text-center {
  text-align: center;
}

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

.text-right {
  text-align: right;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}
/* ==========================================================================
   Buttons - Serviscope Theme
   ========================================================================== */

/* Base Button Styles */
button,
.button,
.hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  border: none;
  outline: none;
  font-family: VIA-Type, sans-serif;
}

button:focus-visible,
.button:focus-visible,
.hs-button:focus-visible {
  outline: 2px solid #1B4B9A;
  outline-offset: 2px;
}

/* Primary Button */
.button,
.button--primary,
.hs-button {
  font-size: 16px;
  font-weight: Bold;
  color: #ffffff;
  background-color: #1B4B9A;
  padding: 16px 32px 16px 32px;
  border-radius: 50px;
  border: 0px none #1B4B9A;

}

.button:hover,
.button--primary:hover,
.hs-button:hover {
  color: #1B1464;
  background-color: #fff;
}

/* Secondary Button */
.button--secondary {
  font-size: 16px;
  font-weight: Bold;
  color: #1B4B9A;
  background-color: #FFFFFF;
  padding: 16px 32px 16px 32px;
  border-radius: 50px;
  border: 2px solid #1B4B9A;

}

.button--secondary:hover {
  color: #FFFFFF;
  background-color: #1B4B9A;
}

/* Ghost Button (Outline) */
.button--ghost {
  font-size: 16px;
  font-weight: Bold;
  color: #1B4B9A;
  background-color: transparent;
  padding: 16px 32px 16px 32px;
  border: 2px solid #1B4B9A;
  border-radius: 50px;
}

.button--ghost:hover {
  color: #FFFFFF;
  background-color: #1B4B9A;
}

/* Link Button */
.button--link {
  font-size: inherit;
  font-weight: 500;
  color: #1B4B9A;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}

.button--link:hover {
  color: #1B1464;
}

/* Button Sizes */
.button--small {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

.button--large {
  font-size: 1.125rem;
  padding: 1rem 2.5rem;
}

/* Full Width Button */
.button--full {
  width: 100%;
}

/* Disabled Button */
button:disabled,
.button:disabled,
.button--disabled,
.hs-button:disabled {
  background-color: #D1D6DC;
  border-color: #D1D6DC;
  color: #494A52;
  cursor: not-allowed;
  opacity: 0.6;
}

button:disabled:hover,
.button:disabled:hover,
.button--disabled:hover,
.hs-button:disabled:hover {
  background-color: #D1D6DC;
  border-color: #D1D6DC;
  color: #494A52;
}

/* No Style Button (Reset) */
.no-button,
.button--reset {
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
  transition: none;
}

.no-button:hover,
.no-button:focus,
.no-button:active,
.button--reset:hover,
.button--reset:focus,
.button--reset:active {
  background: none;
  border: none;
  color: inherit;
}

/* Button with Icon */
.button--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.button--icon svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Button Group */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.button-group--center {
  justify-content: center;
}

.button-group--right {
  justify-content: flex-end;
}



/* Button Component Styles (from macro) */
.sc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: VIA-Type, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 50px;
  padding: 0.875rem 1.75rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 2px solid transparent;  
}

/* Primary Button */
.sc-button--primary {
  background-color: #1B4B9A;
  color: #ffffff;
  border-color: #1B4B9A;
}
    
.sc-button--primary:hover {
  background-color: #fff;
  color: #1B1464;
  border-color: #fff;
}

/* Secondary Button */
.sc-button--secondary {
  background-color: transparent;
  color: #1B4B9A;
  border-color: #1B4B9A;
}

.sc-button--secondary:hover {
  background-color: #1B4B9A;
  color: #ffffff;
}

/* Button Focus States */
.sc-button:focus {
  outline: 2px solid #1B4B9A;
  outline-offset: 2px;
}

.sc-button:focus:not(:focus-visible) {
  outline: none;
}

.sc-button:focus-visible {
  outline: 2px solid #1B4B9A;
  outline-offset: 2px;
}
/* ==========================================================================
   Forms - Serviscope Theme
   ========================================================================== */

/* Form Fields */
.hs-form-field {
  margin-bottom: 1rem;
}

/* Labels */
form label {
  display: block;
  font-family: VIA-Type, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1B1464;
  margin-bottom: 0.375rem;
}

/* Form Title */
.form-title {
  font-family: VIA-Type, sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #1B1464;
  margin-bottom: 1.5rem;
}

/* Help text */
form legend {
  font-size: 0.875rem;
  color: #494A52;
  margin-bottom: 0.5rem;
}

/* 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 input[type=url],
form input[type=date],
form select,
form textarea,
.hs-input:not([type=checkbox]):not([type=radio]) {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: VIA-Type, sans-serif;
  font-size: 1rem;
  color: #1B1464;
  background-color: #FFFFFF;
  border: 1px solid #D1D6DC;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

form input[type=text]:focus,
form input[type=search]:focus,
form input[type=email]:focus,
form input[type=password]:focus,
form input[type=tel]:focus,
form input[type=number]:focus,
form input[type=url]:focus,
form input[type=date]:focus,
form select:focus,
form textarea:focus,
.hs-input:not([type=checkbox]):not([type=radio]):focus {
  border-color: #1B4B9A;
  box-shadow: 0 0 0 3px rgba(27, 75, 154, 0.1);
}

form input::placeholder,
form textarea::placeholder {
  color: #494A52;
  opacity: 0.7;
}

form textarea {
  min-height: 120px;
  resize: vertical;
}

form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23494A52' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

form fieldset {
  max-width: 100% !important;
  border: none;
  padding: 0;
  margin: 0;
}

/* Inputs - checkbox/radio */
form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

form input[type=checkbox],
form input[type=radio],
form .hs-input[type=checkbox],
form .hs-input[type=radio] {
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0 0.5rem 0 0;
  background-color: initial;
  border: initial;
  border-radius: 0;
  cursor: pointer;
  accent-color: #1B4B9A;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

form input[type=radio],
form .hs-input[type=radio] {
  border-radius: 50%;
}

/* Checkbox/Radio Labels */
.hs-form-checkbox-display,
.hs-form-radio-display,
.hs-form-booleancheckbox-display {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.hs-form-checkbox-display span,
.hs-form-radio-display span,
.hs-form-booleancheckbox-display span {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #494A52;
}

/* Inputs - date picker */
.hs-dateinput {
  position: relative;
}

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

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

.fn-date-picker td.is-selected .pika-button {
  border-radius: 4px;
  background-color: #1B4B9A;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 4px !important;
  background-color: #1B4B9A;
  color: #FFF;
}

/* Inputs - file picker */
form input[type=file] {
  background-color: transparent;
  border: 2px dashed #D1D6DC;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
}

form input[type=file]:hover {
  border-color: #1B4B9A;
}

/* Headings and text */
form .hs-richtext,
form .hs-richtext p {
  font-size: 0.9375rem;
  margin: 0 0 1rem;
  color: #494A52;
}

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: 0 !important;
  font-size: 0.875rem;
  line-height: 1.5;
}

.legal-consent-container .hs-form-booleancheckbox-display a {
  color: #1B4B9A;
}

/* Validation */
.hs-form-required {
  color: #dc2626;
  margin-left: 0.25rem;
}

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

.hs-error-msgs {
  list-style: none;
  padding: 0;
  margin: 0.375rem 0 0;
}

.hs-error-msg {
  color: #dc2626;
  font-size: 0.875rem;
}

/* Submit button */
form input[type=submit],
form .hs-button,
.hs-submit .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: VIA-Type, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background-color: #1B4B9A;
  padding: 16px 32px 16px 32px;
  border: none;
  border-radius: 50px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

form input[type=submit]:hover,
form .hs-button:hover,
.hs-submit .hs-button:hover {
  background-color: #fff;
  color: #1B1464;
}

/* Success Message */
.submitted-message {
  padding: 1.5rem;
  text-align: center;
  color: #1B1464;
  background-color: #E8F4F8;
  border-radius: 8px;
}

.submitted-message p {
  margin: 0;
}

/* Captcha */
.grecaptcha-badge {
  margin: 1rem auto 0;
}

/* Search Input */

  .body-container-wrapper .hs-search-field__button {
    padding: 0.875rem 1.25rem;
    background-color: #1B4B9A;
    border: none;
    border-radius: 0 4px 4px 0;
    transition: background-color 0.2s ease;
  }

  .body-container-wrapper .hs-search-field__button:hover {
    background-color: #1B1464;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 0;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 18px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 0.875rem 1rem;
    border-radius: 4px 0 0 4px;
  }

  .body-container-wrapper .hs-search-field__suggestions {
    background: #fff;
    border: 1px solid #D1D6DC;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    display: block;
    padding: 0.75rem 1rem;
    color: #1B1464;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .body-container-wrapper .hs-search-field__suggestions li a:hover {
    background-color: #E8F4F8;
  }


/* Two Column Form Layout */
.hs-form fieldset.form-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hs-form fieldset.form-columns-2 .hs-form-field {
  width: 100%;
}

.hs-form fieldset.form-columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .hs-form fieldset.form-columns-2,
  .hs-form fieldset.form-columns-3 {
    grid-template-columns: 1fr;
  }
}
/* 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
*/

/* ==========================================================================
   Serviscope Header Styles
   Two-row header: Top bar (utility) + Main header (logo, nav, CTA)
   ========================================================================== */

/* CSS Variables from Theme Settings */
:root {
  --header-bg: #FFFFFF;
  --header-nav-color: #1B1464;
  --header-nav-hover: #1B4B9A;
  --header-nav-font-size: 16px;
  --header-cta-bg: #1B4B9A;
  --header-cta-text: #FFFFFF;
  --header-logo-max-width: 180px;
  --header-vertical-padding: 16px;
}

/* Header Base */
.sc-header {
  background-color: var(--header-bg);
  position: relative;
  z-index: 1000;
}

/* Skip Link (Accessibility) */
.sc-header__skip {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sc-header__skip:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 1rem;
  background: var(--header-cta-bg);
  color: var(--header-cta-text);
  z-index: 9999;
}

/* ==========================================================================
   Top Bar - Logo + Utility Navigation (Presse, Blog, FAQ, Suche)
   ========================================================================== */

.sc-header__top-bar {
  border-bottom: 1px solid rgba(27, 20, 100, 0.1);
}

.sc-header__top-bar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.sc-header__utility-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Utility Menu (HubSpot Menu Module) */
.sc-header__utility-nav .hs-menu-wrapper > ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-header__utility-nav .hs-menu-wrapper > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: VIA-Type, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--header-nav-color);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}

.sc-header__utility-nav .hs-menu-wrapper > ul > li > a:hover {
  color: var(--header-nav-hover);
}

/* Hide dropdowns in utility nav */
.sc-header__utility-nav .hs-menu-wrapper > ul > li > ul {
  display: none;
}

.sc-header__utility-link,
.sc-header__search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: VIA-Type, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--header-nav-color);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}

.sc-header__utility-link:hover,
.sc-header__search-toggle:hover {
  color: var(--header-nav-hover);
}

.sc-header__utility-link svg,
.sc-header__search-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ==========================================================================
   Main Header - Logo, Primary Nav, CTA
   ========================================================================== */

.sc-header__main {
  border-bottom: 1px solid rgba(27, 20, 100, 0.1);
}

.sc-header__main-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--header-vertical-padding);
  padding-bottom: var(--header-vertical-padding);
  gap: 2rem;
}

/* Logo */
.sc-header__logo {
  flex-shrink: 0;
}

.sc-header__logo img {
  max-width: var(--header-logo-max-width);
  height: auto;
}

.sc-header__logo .logo-company-name {
  font-family: VIA-Type, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1B1464;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Primary Navigation */
.sc-header__nav-primary {
  flex-grow: 1;
  display: flex;
  justify-content: flex-start;
}

.sc-header__nav-primary .hs-menu-wrapper > ul {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-header__nav-primary .hs-menu-wrapper > ul > li > a {
  font-family: VIA-Type, sans-serif;
  font-size: var(--header-nav-font-size);
  font-weight: 500;
  color: var(--header-nav-color);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
  position: relative;
}

.sc-header__nav-primary .hs-menu-wrapper > ul > li > a:hover,
.sc-header__nav-primary .hs-menu-wrapper > ul > li > a:focus {
  color: var(--header-nav-hover);
}

/* Dropdown Menus - Dark Navy Style */
.sc-header__nav-primary .hs-menu-wrapper > ul > li {
  position: relative;
}

.sc-header__nav-primary .hs-menu-wrapper > ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #1B1464;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 0;
  padding: 1rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  transition: opacity 0.2s ease, visibility 0.2s ease;
  list-style: none;
  margin-top: 0;
}

.sc-header__nav-primary .hs-menu-wrapper > ul > li:hover > ul,
.sc-header__nav-primary .hs-menu-wrapper > ul > li:focus-within > ul {
  opacity: 1;
  visibility: visible;
}

.sc-header__nav-primary .hs-menu-wrapper > ul > li > ul > li > a {
  display: block;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.sc-header__nav-primary .hs-menu-wrapper > ul > li > ul > li > a:hover,
.sc-header__nav-primary .hs-menu-wrapper > ul > li > ul > li > a:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

.sc-header__cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.sc-header__cta-link {
  font-family: VIA-Type, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--header-nav-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sc-header__cta-link:hover {
  color: var(--header-nav-hover);
}

.sc-header__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--header-cta-bg);
  color: var(--header-cta-text);
  font-family: VIA-Type, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sc-header__cta-button:hover {
  background-color: #fff;
  color: #1B1464;
}

/* ==========================================================================
   Mobile Toggle
   ========================================================================== */

.sc-header__mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

/* Hide topbar mobile toggle on desktop */
.sc-header__mobile-toggle--topbar {
  display: none;
}

.sc-header__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}

.sc-header__hamburger span {
  display: block;
  height: 2px;
  background-color: var(--header-nav-color);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.sc-header__mobile-toggle[aria-expanded="true"] .sc-header__hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.sc-header__mobile-toggle[aria-expanded="true"] .sc-header__hamburger span:nth-child(2) {
  opacity: 0;
}

.sc-header__mobile-toggle[aria-expanded="true"] .sc-header__hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================================================
   Search Overlay
   ========================================================================== */

.sc-header__search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--header-bg);
  padding: 1.5rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1002;
}

.sc-header__search-overlay.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.sc-header__search-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sc-header__search-container .hs-search-field {
  flex-grow: 1;
}

.sc-header__search-container .hs-search-field__input {
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  border: 2px solid #D1D6DC;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease;
}

.sc-header__search-container .hs-search-field__input:focus {
  border-color: var(--header-cta-bg);
}

.sc-header__search-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--header-nav-color);
  transition: color 0.2s ease;
}

.sc-header__search-close:hover {
  color: var(--header-nav-hover);
}

/* ==========================================================================
   Mobile Navigation Overlay - Dark Navy Style
   ========================================================================== */

.sc-header__mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  background: #1B1464;
  padding-top: 80px;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
}

.sc-header__mobile-nav.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* Close button positioned in mobile nav */
.sc-header__mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: #FFFFFF;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.sc-header__mobile-close:hover {
  opacity: 0.7;
}

.sc-header__mobile-close svg {
  width: 28px;
  height: 28px;
}

.sc-header__mobile-nav-content {
  padding: 1rem 1.5rem 2rem;
}

/* Mobile Primary Navigation */
.sc-header__mobile-nav-primary .hs-menu-wrapper > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-header__mobile-nav-primary .hs-menu-wrapper > ul > li {
  border: none;
}

.sc-header__mobile-nav-primary .hs-menu-wrapper > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-family: VIA-Type, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sc-header__mobile-nav-primary .hs-menu-wrapper > ul > li > a:hover {
  opacity: 0.7;
}

/* Dropdown chevron for items with children */
.sc-header__mobile-nav-primary .hs-menu-wrapper > ul > li.hs-item-has-children > a::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(45deg);
  margin-left: auto;
  transition: transform 0.2s ease;
}

.sc-header__mobile-nav-primary .hs-menu-wrapper > ul > li.hs-item-has-children.open > a::after {
  transform: rotate(-135deg);
}

/* Mobile submenu */
.sc-header__mobile-nav-primary .hs-menu-wrapper > ul > li > ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
  display: none;
}

.sc-header__mobile-nav-primary .hs-menu-wrapper > ul > li.open > ul {
  display: block;
}

.sc-header__mobile-nav-primary .hs-menu-wrapper > ul > li > ul > li > a {
  display: block;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.sc-header__mobile-nav-primary .hs-menu-wrapper > ul > li > ul > li > a:hover {
  color: #FFFFFF;
}

/* Mobile Utility Links */
.sc-header__mobile-utility {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.sc-header__mobile-utility-link {
  display: block;
  padding: 1rem 0;
  font-family: VIA-Type, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sc-header__mobile-utility-link:hover {
  opacity: 0.7;
}

/* Mobile CTA */
.sc-header__mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.sc-header__mobile-cta-link {
  font-family: VIA-Type, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sc-header__mobile-cta-link:hover {
  opacity: 0.7;
}

.sc-header__mobile-cta .sc-header__cta-button {
  width: 100%;
  text-align: center;
  justify-content: center;
  background-color: #FFFFFF;
  color: #1B1464;
}

.sc-header__mobile-cta .sc-header__cta-button:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Backdrop overlay */
.sc-header__mobile-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 998;
}

.sc-header__mobile-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 1100px) {
  .sc-header__nav-primary .hs-menu-wrapper > ul {
    gap: 1.5rem;
  }
  
  .sc-header__cta {
    gap: 1rem;
  }
}

@media (max-width: 992px) {
  /* On mobile: show logo + hamburger in top bar, hide utility links */
  .sc-header__top-bar-container {
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  /* Hide utility nav on mobile */
  .sc-header__top-bar .sc-header__utility-nav {
    display: none;
  }
  
  /* Show mobile toggle in the top bar on mobile */
  .sc-header__mobile-toggle--topbar {
    display: block;
  }
  
  /* Hide entire main header row on mobile */
  .sc-header__main {
    display: none;
  }
  
  .sc-header__logo {
    flex-grow: 0;
  }
}

@media (max-width: 576px) {
  .sc-header__main-container {
    padding-top: calc(var(--header-vertical-padding) * 0.75);
    padding-bottom: calc(var(--header-vertical-padding) * 0.75);
  }

  .sc-header__logo img {
    max-width: calc(var(--header-logo-max-width) * 0.8);
  }
}

/* ==========================================================================
   Transparent / Overlapping Header Variation
   --------------------------------------------------------------------------
   Goal: match serviscope.de — a transparent header that overlaps the first
   section so its image / graphic shows through behind the menu. The header
   stays in document flow position (top of page) and scrolls away with the
   content; it is NOT sticky, exactly like the main website.

   Activated by the `.sc-has-transparent-header` class on `.body-wrapper`,
   added in base.html either:
     • site-wide   → theme setting "Transparent overlapping header", or
     • per-page    → a template overriding the `body_extra_classes` block
                     (see templates/sample-transparent-header.html).
   Text color is controlled by `.sc-header-on-light` (default, dark text for
   light images) or `.sc-header-on-dark` (light text for dark images).
   ========================================================================== */

.sc-has-transparent-header {
  /* Fallback header height; refined at runtime by initTransparentHeader() in main.js. */
  --sc-header-h: 146px;
  position: relative; /* containing block for the absolute header */
}

/* Lift the header out of flow so the section below slides up behind it. */
.sc-has-transparent-header .sc-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
}

/* Remove the divider lines so they don't draw across the hero image. */
.sc-has-transparent-header .sc-header__top-bar,
.sc-has-transparent-header .sc-header__main {
  border-bottom-color: transparent;
}

/* Give the first section's content room to clear the overlapping header, while
   its background image still bleeds up to the top of the page. We target the
   section that actually carries the row background — HubSpot tags the first
   dnd row with `…-row-0-background-…` — so the padding lands on the element
   whose background fills behind the menu (not an outer wrapper, which would
   leave a blank gap). `.sc-overlap-offset` is an explicit opt-in for any
   custom (non-dnd) section.
   The `:has(.sc-header)` guard keeps every offset away from templates that
   use a different header partial (landing-page / membership templates load
   header-no-navigation.html, which stays solid and in flow). */
.sc-has-transparent-header:has(.sc-header) #main-content [class*="row-0-background"],
.sc-has-transparent-header:has(.sc-header) .sc-overlap-offset {
  padding-top: calc(var(--sc-header-h) + 1.5rem) !important;
}

/* Pages whose first section has NO background (plain content pages, blog,
   search, 404, …): push the whole content area below the header instead so
   nothing hides behind it. The padding equals the header height exactly, so
   content sits where it would with the solid in-flow header — visually the
   only difference is the missing white band / divider lines. */
.sc-has-transparent-header:has(.sc-header) #main-content:not(:has([class*="row-0-background"], .sc-overlap-offset)) {
  padding-top: var(--sc-header-h);
}

/* ---- Light text variant (for dark hero images) ---- */
.sc-header-on-dark .sc-header__nav-primary .hs-menu-wrapper > ul > li > a,
.sc-header-on-dark .sc-header__utility-nav .hs-menu-wrapper > ul > li > a,
.sc-header-on-dark .sc-header__utility-link,
.sc-header-on-dark .sc-header__search-toggle,
.sc-header-on-dark .sc-header__cta-link {
  color: #FFFFFF;
}

.sc-header-on-dark .sc-header__nav-primary .hs-menu-wrapper > ul > li > a:hover,
.sc-header-on-dark .sc-header__utility-nav .hs-menu-wrapper > ul > li > a:hover,
.sc-header-on-dark .sc-header__utility-link:hover,
.sc-header-on-dark .sc-header__search-toggle:hover,
.sc-header-on-dark .sc-header__cta-link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.sc-header-on-dark .sc-header__hamburger span {
  background-color: #FFFFFF;
}

/* Recolor a single-color (navy) logo to white over dark imagery. */
.sc-header-on-dark .sc-header__logo img {
  filter: brightness(0) invert(1);
}

/* Secondary CTA ("Aktuelle Termine"): plain text link is hard to read over
   imagery, so in transparent mode it becomes a white pill mirroring the
   primary button's shape. Placed after the on-dark block on purpose — the
   white pill + navy text combo works over dark imagery too. */
.sc-has-transparent-header .sc-header__cta-link {
  background-color: #FFFFFF;
  color: #1B1464;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
}

.sc-has-transparent-header .sc-header__cta-link:hover {
  color: #1B4B9A;
}

/* On mobile only the top bar shows, so the overlap is shorter. */
@media (max-width: 992px) {
  .sc-has-transparent-header {
    --sc-header-h: 72px;
  }
}
/* ==========================================================================
   Footer Component
   ========================================================================== */

.sc-footer {
  background-color: #FFFFFF;
  color: #1B1464;
}

/* Main Footer */
.sc-footer__main {
  padding: 3rem 0 2.5rem;
}

.sc-footer__main-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2rem 3rem;
  align-items: start;
}

/* Logo - Positioned independently at the top spanning full width */
.sc-footer__logo {
  grid-column: 1 / -1;
  grid-row: 1;
}

.sc-footer__logo img {
  height: 32px;
  width: auto;
  display: block;
}

/* Sub Footer */
.sc-footer__sub {
  /* Border is handled by the footer-legal module */
}

.sc-footer__sub-container {
  /* Container for the legal bar module */
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

@media (max-width: 1100px) {
  .sc-footer__main-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sc-footer__logo {
    margin-bottom: 0.5rem;
  }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media (max-width: 768px) {
  .sc-footer__main {
    padding: 2.5rem 0 2rem;
  }

  .sc-footer__main-container {
    text-align: center;
  }

  .sc-footer__logo {
    display: flex;
    justify-content: center;
  }

  .sc-footer__logo img {
    height: 28px;
  }
}

.sc-footer__logo img {
    max-width: 220px;
}
/* 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%;
}

/* 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;
  }
}