/*
Table of contents

  1. Variables
    1a. Containers
    1b. Colors
    1c. Typography
    1d. Buttons
    1e. Forms
    1f. Tables
    1g. Website header
    1h. Website footer
  2. Containers / Grid / DND areas
  3. Typography
  4. Buttons
  5. Forms
  6. Tables
  7. Website header
  8. Website footer
  9. Blog
  10. System pages
  11. Modules
  12. Bilder
  13. Breakpoints

  14. Hilfsoutline
  15. Scroll-Verhalten





/* 1a. Containers */




/* 1b. Colors */




/* 1c. Typography */


























/* 1d. Buttons */

/* Primary Button */

/* Primary Button Variablen */








/* 1e. Forms */









































/* 1f. Tables */













/* 1g. Website header */








/* 1h. Website footer */




/* 1g. Fonts */

/* 1c. Typography */








/* Min-Werte berechnen */














:root {
  /* COLORS */
  --color-primary: {color=#003d8e, opacity=100, rgba=rgba(0, 61, 142, 1), rgb=rgb(0, 61, 142), hex=#003d8e, css=#003d8e};
  --color-primary: #003d8e;
  --color-secondary: #FFFFFF;
  --header-bg-color: #FFFFFF;
  --nav-font-color: #003d8e;
  --nav-font-color-hover: #001566;
  --nav-font-color-active: #2865b6;
  --nav-drop-down-bg-color: {color=#FFFFFF, opacity=100, rgba=rgba(255, 255, 255, 1), rgb=rgb(255, 255, 255), hex=#FFFFFF, css=#FFFFFF};
  --nav-drop-down-font-color: #003d8e;

  /* TYPOGRAPHY - Min/Max für module.css */
  /* --h1-size-min: 32px;
  --h1-size-max: 50px;

  --h2-size-min: 28px;
  --h2-size-max: 38px;

  --h3-size-min: 24px;
  --h3-size-max: 30px;

  --h4-size-min: 20px;
  --h4-size-max: 24px;

  --h5-size-min: 14px;
  --h5-size-max: 16px;

  --h6-size-min: 12px;
  --h6-size-max: 14px;

  --body-size-min: 16px;
  --body-size-max: 18px; */

  /* Z-INDEX SCALE */
  /* --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 1000;
  --z-navigation: 1001;
  --z-modal: 1050; */

  /* SPACING SYSTEM */
  /* --spacing-3xs: 0.125rem;
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 2.5rem;
  --spacing-3xl: 3rem; */

  --page-gutter: 32px;

  /* LAYOUT */
  /* --container-max-width: 1280px;
  --container-padding-x: 1rem;
  --header-height: clamp(6rem, 6vw, 8rem);
  --header-top-offset: clamp(0px, 2.5vw, 48px);
  --header-total-height: calc(var(--header-height) + var(--header-top-offset)); */


  /* TRANSITIONS */
  --transition-speed-fast: 0.15s;
  --transition-speed-normal: 0.3s;
  --transition-speed-slow: 0.5s;
  --transition-easing: ease;
  --transition-easing-in-out: ease-in-out;

  /* BORDER SYSTEM */
  /* --border-width-thin: 0.1rem;
  --border-width-normal: 0.2rem;
  --border-width-thick: 0.3rem;
  --border-radius-sm: 0.3rem;
  --border-radius-md: 0.6rem;
  --border-radius-lg: 1.2rem;
  --border-radius-full: 99.99rem; */
/*  --border-radius-full: 9999px; */

  /* SHADOWS */
  /* --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 8px 32px 0 rgba(0, 0, 0, 0.3); */
}







/* ------------------------------------------
    BODY COMPENSATION FÜR FIXED HEADER
   ------------------------------------------ */

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

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-padding-top: var(--header-total-height);
  scroll-behavior: smooth;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
}


/* ------------------------------------------
    INTERAKTIVE ELEMENTE (GLOBAL)
   ------------------------------------------ */

button,
a,
[role="button"],
[class*="--toggle"] {‚
  cursor: pointer;
}






.content-wrapper {
  max-width: 1280px;
}

.dnd-section,
.content-wrapper--vertical-spacing {
  padding: 60px var(--container-padding-x);
  }

.dnd-section > .row-fluid {
  max-width: 1280px;
}





html {
  font-size: 18px;
}


/* variable um die minimum body font zu bestimmten */


body {
  font-family: 'Source Sans Pro', sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  color: #3c3c3c;
  /* --body-font = font-size: clamp(12px, 2vw, 18px)‚; */
}

/* Paragraphs */

p {
  font-family: 'Source Sans Pro', sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
}

/* Anchors */

a {
  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: underline;
  color: #003d8e;
}

a:hover,
a:focus {
  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: underline;
  color: #001566;
}

a:active {
  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: underline;
  color: #2865b6;
}

/* Headings */


/* h1, .h1 {
  font-family: 'Source Sans Pro', sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #003d8e;
  font-size: clamp(32px, 5vw, 50px);
  text-transform: none;
}

h2, .h2 {
  font-family: Barlow, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #003d8e;
  font-size: clamp(28px, 4vw, 38px);
  text-transform: none;
}

h3, .h3 {
  font-family: Merriweather, serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #003d8e;
  font-size: clamp(24px, 3vw, 30px);
  text-transform: none;
}

h4, .h4 {
  font-family: 'Source Sans Pro', sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #003d8e;
  font-size: clamp(20px, 2.5vw, 24px);
  text-transform: none;
}

h5, .h5 {
  font-family: Barlow, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #003d8e;
  font-size: clamp(14px, 1.5vw, 16px);
  text-transform: none;
}

h6, .h6 {
  font-family: Barlow, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #003d8e;
  font-size: clamp(12px, 1.2vw, 14px);
  text-transform: none;
} */

/* Blockquote */

blockquote {
  border-left-color: #FFFFFF;
}





/* ===== SIZES (aus Theme) ===== */
.btn-sm, .btn--sm {
  min-width: 158px;
}
.btn-md, .btn--md {
  min-width: 200px;
}
.btn-lg, .btn--lg {
  min-width: 400px;
}


button:hover,
button:focus,
.button:hover,
.button:focus,
.hs-button:hover,
.hs-button:focus,
.hs-blog-post-listing__post-button:hover,
.hs-blog-post-listing__post-button:focus{
    ;
  color: ;
  background-color: ;
  border-radius: ;
}


/* ===== PRIMARY BUTTON ===== */
.btn-primary,
.btn--primary {
  background: #003d8e;
  color: #fff;
  border: 1px
          dashed
          #3D85C6;
  border-radius: 6px;
  text-transform: none;
  padding: 15px
            53px
            15px
            53px;
}

.btn-primary:hover,
.btn--primary:hover {
  background: #FFFFFF;
  color: #073763;
  border-color: #1a334e;
}

/* ===== SECONDARY BUTTON ===== */
.btn-secondary,
.btn--secondary {
  background: #FFFFFF;
  color: #494A52;
  border: 1px
          solid
          #FFFFFF;
  border-radius: 6px;
  text-transform: none;
  padding: 15px
            53px
            15px
            53px;
}

.btn-secondary:hover,
.btn--secondary:hover {
  background: #495057;
  color: #ffffff;
  border-color: #495057;
}

/* ===== OUTLINE VARIANTEN ===== */
.btn--outline {
  background: transparent;
  color: currentColor;
}

.btn--outline.btn--primary {
  color: #3D85C6;
  border-color: #3D85C6;
}

.btn--outline.btn--primary:hover {
  background: #3D85C6 !important;
  color: #fff;
}

.btn--outline.btn--secondary {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.btn--outline.btn--secondary:hover {
  background: #FFFFFF !important;
  color: #fff;
}






form,
.submitted-message {
  font-family: 'Source Sans Pro', sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  border: 1px none #FFFFFF;
;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background-color: {color=#FFFFFF, opacity=100, rgba=rgba(255, 255, 255, 1), rgb=rgb(255, 255, 255), hex=#FFFFFF, css=#FFFFFF};
  padding: 0px;
;
}

/* Form title */

.form-title {
  border: 1px none #FFFFFF;
;
  padding-top: 0px;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px;
;
  font-family: Merriweather; font-style: normal; font-weight: 700; text-decoration: none;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  font-size: 30px;
  color: #FFFFFF;
  background-color: {color=#FFFFFF, opacity=100, rgba=rgba(255, 255, 255, 1), rgb=rgb(255, 255, 255), hex=#FFFFFF, css=#FFFFFF};
}


/* Labels */

form label {
  color: #003d8e;
}

/* Help text */

form legend {
  color: #003d8e;
}

/* 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 {
  border: 2px solid #D1D6DC;

  background-color: {color=#FFFFFF, opacity=100, rgba=rgba(255, 255, 255, 1), rgb=rgb(255, 255, 255), hex=#FFFFFF, css=#FFFFFF};
  color: #003d8e;
  border-radius: 3px;
}

/* Form placeholder text */

::-webkit-input-placeholder {
  color: #003d8e;
}

::-moz-placeholder {
  color: #003d8e;
}

:-ms-input-placeholder {
  color: #003d8e;
}

::placeholder {
  color: #003d8e;
}

/* Inputs - date picker */

.hs-fieldtype-date .input .hs-dateinput:before {
  color: #003d8e;
}

.fn-date-picker td.is-selected .pika-button {
  background: #003d8e;
}

.fn-date-picker td .pika-button:hover {
  background-color: #003d8e !important;
}

.fn-date-picker td.is-today .pika-button {
  color: #003d8e;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  border: 1px none #003d8e;
;
  padding-top: 15px;
padding-right: 53px;
padding-bottom: 15px;
padding-left: 53px;
;
  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  color: #FFFFFF;
  font-size: 22px;
  background-color: {color=#003d8e, opacity=100, rgba=rgba(0, 61, 142, 1), rgb=rgb(0, 61, 142), hex=#003d8e, css=#003d8e};
  border-radius: ;
  text-transform: ;
}

form input[type=submit]:hover,
form input[type=submit]:focus,
form .hs-button:hover,
form .hs-button:focus {
  background-color: {color=#1a334e, opacity=100, rgba=rgba(26, 51, 78, 1), rgb=rgb(26, 51, 78), hex=#1a334e, css=#1a334e};
  color: #ffffff;
  border: 1px none #1a334e;
;
}

form input[type=submit]:active,
form .hs-button:active {
  background-color: rgba(#null, 0.0);
  border-color: ;
}





/* Table */

table {
  border: 1px solid #003d8e;

  background-color: {color=#FFFFFF, opacity=100, rgba=rgba(255, 255, 255, 1), rgb=rgb(255, 255, 255), hex=#FFFFFF, css=#FFFFFF};
}

/* Table cells */

td,
th {
  border: 1px solid #003d8e;

  padding: 18px;

  color: #003d8e;
}

/* Table header */

thead th {
  background-color: {color=#FFFFFF, opacity=100, rgba=rgba(255, 255, 255, 1), rgb=rgb(255, 255, 255), hex=#FFFFFF, css=#FFFFFF};
  color: #FFFFFF;
}

/* Table footer */

tfoot td {
  background-color: {color=#FFFFFF, opacity=100, rgba=rgba(255, 255, 255, 1), rgb=rgb(255, 255, 255), hex=#FFFFFF, css=#FFFFFF};
  color: #003d8e;
}







/*
------------------------------------------
  BODY COMPENSATION
------------------------------------------ */

* {
  box-sizing: inherit;

}

body {
  padding-top: var(--header-total-height);
  box-sizing: border-box;
}

html {
  scroll-padding-top: var(--header-total-height);
  font-size: 100%;
}


/* Header Background */
.header {
  background-color: var(--header-bg-color);
}

/*
------------------------------------------
  NAVIGATION LINKS - GLOBAL STYLES
------------------------------------------ */

/* Base Styles */
.menu__link,
.header__logo .logo-company-name,
.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  color: var(--nav-font-color);
  font-family: Source Sans Pro;
  transition-property: color;
  transition-duration: var(--transition-speed-normal);
  transition-timing-function: var(--transition-easing);
}

/* Hover States */
.menu .menu__link:hover,
.menu .menu__link:focus,
.header__language-switcher-label-current:hover,
.header__language-switcher-label-current:focus,
.header__language-switcher .lang_list_class li:hover a,
.header__language-switcher .lang_list_class li a:focus {
  color: var(--nav-font-color-hover);
}

/* Active States */
.menu .menu__link:focus-visible,
.header__language-switcher-label-current:focus-visible,
.header__language-switcher .lang_list_class li a:focus-visible {
  color: var(--nav-font-color-hover);
}

.menu__link svg,
.header__language-switcher svg {
  transition: fill var(--transition-speed-normal) var(--transition-easing);
}

@media (prefers-reduced-motion: reduce) {
  .menu__link,
  .header__logo .logo-company-name,
  .header__language-switcher-label-current,
  .header__language-switcher .lang_list_class li a {
    transition: none;
  }
}


/*
------------------------------------------
  ACTIVE LINK INDICATOR (Roter Punkt)
------------------------------------------ */

/* Basis für Active Indicator */
.menu .menu__item--depth-1 > .menu__link {
  position: relative;
}

/* Standard-Indikator neutralisieren */
.menu .menu__item--depth-1 > .menu__link:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.6rem;
  width: 0;
  height: 0;
  background: none;
  border-radius: 50%;
  transition: {width var(--transition-speed-normal) var(--transition-easing);
              height var(--transition-speed-normal) var(--transition-easing);
              background-color var(--transition-speed-normal) var(--transition-easing);
  };
}

/* Aktiver Link: Roter Punkt */
.menu .menu__item--depth-1 > .menu__link--active-link:after,
.menu .menu__item--depth-1.menu__item--active > .menu__link:after,
.hs-menu-wrapper li.active > a:after {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--nav-font-color-active);
}

/*
------------------------------------------
  CHILD TOGGLE ICONS
------------------------------------------ */

.menu__child-toggle-icon {
  border-top-color: var(--nav-font-color);
  transition: border-color var(--transition-speed-normal) var(--transition-easing);
}

.menu__child-toggle-icon:hover,
.menu__child-toggle-icon:focus {
  border-top-color: var(--nav-font-color-hover);
}

.menu__child-toggle-icon:active {
  border-top-color: var(--nav-font-color-active);
}

/*
------------------------------------------
  DROP DOWN MENUS
------------------------------------------ */

@media (min-width: 768px) {
  .menu .menu__submenu,
  .header__language-switcher .lang_list_class {
    border: 2px solid #003d8e;

    background-color: var(--nav-drop-down-bg-color);
    box-shadow: var(--shadow-md);
  }

  .menu__submenu--level-2 > .menu__item:first-child:before {
    border: 2px solid #003d8e;

    background-color: var(--nav-drop-down-bg-color);
  }
}

/* Drop Down Links */
.menu__submenu .menu__link {
  color: var(--nav-drop-down-font-color);
  background-color: var(--nav-drop-down-bg-color);
  padding: var(--spacing-xs) var(--spacing-md);

  transition-property: color, background-color, border-color;
  transition-duration: var(--transition-speed-normal);
  transition-timing-function: var(--transition-easing);
}

.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus {
  color: var(--nav-font-color-hover);
  background-color: var(--header-bg-color);
}

/* Drop Down Arrow */
.header__language-switcher .lang_list_class:before {
  border-bottom-color: #003d8e;
}

.header__language-switcher .lang_list_class.first-active::after {
  border-bottom-color: var(--header-bg-color);
}

.header__language-switcher-label-current:after {
  border-top-color: currentColor;
}

/*
------------------------------------------
  MOBILE NAVIGATION
------------------------------------------ */

@media(max-width: 767px) {
  .header__navigation {
    background-color: var(--header-bg-color);
  }

  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    background-color: var(--header-bg-color);
  }

  .header__navigation-toggle svg,
  .menu-arrow svg {
    fill: var(--nav-font-color);
    transition: fill var(--transition-speed-normal) var(--transition-easing);
  }

  .header__navigation-toggle:hover svg,
  .menu-arrow:hover svg {
    fill: var(--nav-font-color-hover);
  }
}





.footer {
  background-color: #414141;
}

/* Footer content */

.footer p,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer label,
.footer span,
.footer li,
.footer img {
  color: #003d8e;
}

/* Alle Breiten-Begrenzer im Footer ausschalten */
.footer,
.footer .row-fluid-wrapper,
.footer .row-fluid,
.footer .content-wrapper,
.footer .content-wrapper--centered,
.footer .container,
.footer .page-center {}
  /* max-width: none !important;
  width: 100% !important; */
  /* margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important; */


/* DnD-Gutter im Footer raus */
.footer .dnd-section .dnd-column,
.footer .dnd-section .dnd-column__inner {
  /* padding-inline: 0 !important; */
}





.blog-post,
.blog-header__inner,
.blog-related-posts {
  padding: 60px 0;
}

/* Blog post */

.blog-post__meta a {
  color: #3c3c3c;
}

.blog-post__tag-link {
  color: #3c3c3c;
}

.blog-post__tag-link:hover,
.blog-post__tag-link:focus {
  color: #141414;
}

.blog-post__tag-link:active {
  color: #646464;
}

/* Blog related posts */

.blog-related-posts__title-link,
.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus,
.blog-related-posts__title-link:active {
  font-family: Barlow, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  text-transform: none;
}

.blog-related-posts__title-link {
  color: #003d8e;
}

.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus {
  color: #001566;
}

.blog-related-posts__title-link:active {
  color: #2865b6;
}

/* Blog comments */

.blog-comments {
  margin-bottom: 60px;
}

#comments-listing .comment-reply-to {
  color: #003d8e;
}

#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
  color: #001566;
}

#comments-listing .comment-reply-to:active {
  color: #2865b6;
}





.hs-search-results__title {
  font-family: 'Source Sans Pro', sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #003d8e;
}





/* Blog listing */

.hs-blog-post-listing__post-title-link,
.hs-blog-post-listing__post-title-link:hover,
.hs-blog-post-listing__post-title-link:focus,
.hs-blog-post-listing__post-title-link:active {
  font-family: Barlow, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  text-transform: none;
}

.hs-blog-post-listing__post-title-link {
  color: #003d8e;
}

.hs-blog-post-listing__post-title-link:hover,
.hs-blog-post-listing__post-title-link:focus {
  color: #001566;
}

.hs-blog-post-listing__post-title-link:active {
  color: #2865b6;
}


.hs-blog-post-listing__post-tag,
.hs-blog-post-listing__post-author-name {
  color: #3c3c3c;
}

/* Blog pagination */

.hs-pagination__link-text,
.hs-pagination__link--number {
  color: #3c3c3c;
}

.hs-pagination__link:hover .hs-pagination__link-text,
.hs-pagination__link:focus .hs-pagination__link-text,
.hs-pagination__link--number:hover,
.hs-pagination__link--number:focus {
  color: #141414;
}

.hs-pagination__link:active .hs-pagination__link-text,
.hs-pagination__link--number:active {
  color: #646464;
}

.hs-pagination__link-icon svg {
  fill: #3c3c3c;
}

/* Pricing card */

.card__price {
  font-family: Merriweather, serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #003d8e;
  font-size: 30px;
}

.card__body svg {
  fill: #003d8e;
}

/* Social follow */

.social-links__icon {
  background-color: #003d8e;
}

.social-links__icon:hover,
.social-links__icon:focus {
  background-color: #001566;
}

.social-links__icon:active {
  background-color: #2865b6;
  font-family: Merriweather, serif; font-style: normal; font-weight: 700; text-decoration: none;
  color: #003d8e;
  font-size: 30px;
}

html {
  scroll-behavior: smooth;
}

.header::before {
  display: block;
  height: 150px; /* Höhe deines Headers */
  margin-top: -150px;
}







img {
  max-width: 100%;
  height: auto;
  display: block; /* Entfernt Inline-Spacing */
}





/* generelle Breakpoints */




/* Typo - Breakepoints */








/* * {
  outline: 1px solid hsl(calc(360 * var(--depth, 0) / 10), 80%, 60%);
} */






html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;  /* Desktop: Header + Puffer */
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 80px;  /* Mobile: 60px Header + Puffer */
  }
}