/* figtree-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/figtree-v9-latin-300.eot'); /* IE9 Compat Modes */
  src: url('../fonts/figtree-v9-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/figtree-v9-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/figtree-v9-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/figtree-v9-latin-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/figtree-v9-latin-300.svg#Figtree') format('svg'); /* Legacy iOS */
}
/* figtree-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/figtree-v9-latin-300italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/figtree-v9-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/figtree-v9-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/figtree-v9-latin-300italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/figtree-v9-latin-300italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/figtree-v9-latin-300italic.svg#Figtree') format('svg'); /* Legacy iOS */
}
/* figtree-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/figtree-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/figtree-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/figtree-v9-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/figtree-v9-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/figtree-v9-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/figtree-v9-latin-regular.svg#Figtree') format('svg'); /* Legacy iOS */
}
/* figtree-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/figtree-v9-latin-italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/figtree-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/figtree-v9-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/figtree-v9-latin-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/figtree-v9-latin-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/figtree-v9-latin-italic.svg#Figtree') format('svg'); /* Legacy iOS */
}
/* figtree-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/figtree-v9-latin-500.eot'); /* IE9 Compat Modes */
  src: url('../fonts/figtree-v9-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/figtree-v9-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/figtree-v9-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/figtree-v9-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/figtree-v9-latin-500.svg#Figtree') format('svg'); /* Legacy iOS */
}
/* figtree-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/figtree-v9-latin-500italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/figtree-v9-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/figtree-v9-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/figtree-v9-latin-500italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/figtree-v9-latin-500italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/figtree-v9-latin-500italic.svg#Figtree') format('svg'); /* Legacy iOS */
}
/* figtree-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/figtree-v9-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/figtree-v9-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/figtree-v9-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/figtree-v9-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/figtree-v9-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/figtree-v9-latin-600.svg#Figtree') format('svg'); /* Legacy iOS */
}
/* figtree-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/figtree-v9-latin-600italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/figtree-v9-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/figtree-v9-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/figtree-v9-latin-600italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/figtree-v9-latin-600italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/figtree-v9-latin-600italic.svg#Figtree') format('svg'); /* Legacy iOS */
}



h1, h2, h3, h4, h5 {
    font-family: 'Figtree';
    font-style: normal;
}

.dropmenu ul {
    font-family: 'Figtree';
    font-style: normal;
}

.title-center h1+h2,
.title-h1h2 h1+h2 {
    font-weight: 400
}

.textlogo{
    font-weight: 300;
    font-family: 'Figtree';
    text-wrap: nowrap;
    font-size: 1rem;
}

.pagetitle{
    font-weight: 300;
    font-family: 'Figtree';
    text-wrap: nowrap;
    font-size: 1.3rem;
}

.header-dark #header:not(.scrolled) a.active {
    color: #d8002b !important;
    font-weight: 600;
}

 #header:not(.scrolled) .display_none{
    display: none;
}
 
a.active .textlogo, 
a:focus .textlogo, 
a:hover .textlogo {
    color: #a10020 !important;
}

.nobr {
    white-space:nowrap; 
}

.header-dark #header:not(.scrolled) .pagetitle {
    opacity: 0;
} 

.modular-features .feature-icon h6 {
    background: unset;
}

body::-webkit-scrollbar {
    width: 0.5em;
    background: #000000;
}

@media (max-width: 840px) {
    body {
        overflow: visible;
    }
    body::-webkit-scrollbar {
        display: none;
    }
}

.hero {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.hero h1 { 
    margin-top: 0.8rem;
    font-size: 3rem; 
}

.hero h2,
.hero h3 { 
    margin-top: 0;
}

.hero h1,
.hero h2,
.hero h3 { 
/*    color: #242931; */
    font-weight: 400;
    margin-bottom: 0.8rem;
}

@media (max-width: 840px) { .hero h1 { font-size: 2.2rem; } }
@media (max-width: 600px) { .hero h1 { font-size: 1.6rem; } }

@media (max-width: 840px) { .hero h3 { font-size: 1.25rem; } }
@media (max-width: 600px) { .hero h3 { font-size: 1.1rem; } }

#hero-content {
    display: grid; 
    place-items: center; /* Zentriert horizontal und vertikal gleichzeitig */
/*    display: flex; 
/*    justify-content: center; /* Horizontal zentrieren */
/*    align-items: center;    /* Vertikal zentrieren */
    margin-top: 40px;
    margin-bottom: 40px;
    height: 200px;
    text-align: center;
}

#hero-content.scrolled {
    opacity: 0;
}

.modular-default .frame-box{
    padding : 1rem 0;
}

#header,
#header .logo img,
#header .logo svg,
#header .navbar-section,
.default-animation,
.modular-features .feature-icon,
.modular-features.small .feature-icon i, 
#hero-content
{
    transition: all .7s ease
}

.dropmenu ul ul {
    box-shadow: none;
}

.dropmenu ul ul li {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

 .dropmenu ul ul li {
    margin: 0.1rem;
}

.header-dark.header-transparent #header:not(.scrolled) .dropmenu ul ul{
    background: rgb(0, 0, 0, 0);
}

.header-dark.header-transparent #header:not(.scrolled) .dropmenu ul ul li a {
    color: rgb(255, 253, 246) !important;
    background: rgb(0, 0, 32, 0.6);
}



.header-dark.header-transparent #header:not(.scrolled) .dropmenu ul ul li a.active/*, 
.header-dark.header-transparent #header:not(.scrolled) .dropmenu ul ul li a:focus */{
    color: #d8002b !important;
}


.header-dark.header-transparent #header:not(.scrolled) {
    background: rgba(0, 0, 0, 0.22);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.22);
} 



#header {
    font-size: 0.8rem;
    border-bottom: none;
}

/*
 * =================================================================
 * CSS für zweizeiliges Header-Layout im gescrollten Zustand
 * =================================================================
 */

/* 1. Grundeinstellung für die neue Struktur */
#header .container {
    display: flex; /* Macht den Container zum Flex-Container */
    flex-direction: column; /* Stapelt header-line-1 und header-line-2 vertikal */
}

#header .navbar {
    width: 100%; /* Stellt sicher, dass die Navbar die volle Breite einnimmt */
}

/* 2. Styling und Sichtbarkeit für den Seitentitel (Zeile 2) */
.header-line-2 {
    /* Verbirgt die zweite Zeile standardmäßig */
    display: none; 
    width: 100%;
    margin-top: 0.25rem; /* Etwas Abstand zwischen Zeile 1 und 2 */
}

.header-line-2 .pagetitle {
    font-size: 1.3rem;
    line-height: 1.2;
/*    padding-left: 0.625rem; /* Gleicher Abstand wie der Navbar-Inhalt */
}


/* 3. Anpassungen für den GEScrollten Zustand */

body.header-fixed.header-animated #header.scrolled  {
    /* Setzt die minimale Höhe zurück, damit Padding die Höhe bestimmt */
    min-height: 0; 
    height: auto; 
    
    /* Fügt etwas vertikalen Puffer hinzu, der die Höhe definiert.
       (z.B. 0.625rem oben und unten) */
    padding-top: 0.625rem; 
    padding-bottom: 0.625rem;
    box-shadow: 0px 1px 2px 2px #ebe3c7;
}

#header.scrolled .header-line-1 {
    /* Sorgt dafür, dass die Navbar-Sektion die obere Zeile füllt */
    height: auto; 
}

#header.scrolled .header-line-2 {
    /* Macht die zweite Zeile beim Scrollen sichtbar */
    display: block; 
}

body.header-fixed.header-animated #header.scrolled~.mobile-menu .button_container {
    top: 1.3rem
}

#footer{
    color: #f8f5eb;
    background-color: #000020;
    font-size: 0.7rem;
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6 {
    color: rgb(255, 253, 246);
    margin-top:0rem;
}
#footer a{
    color: #eae5d3 !important;
    text-decoration: none;
    font-weight: 600;
}
#footer a.active, 
#footer a:focus, 
#footer a:hover {
    color: rgb(255, 253, 246) !important;
}

#footer .columns {
/*    margin: 0 -1.5rem 1rem -1.5rem; */
    padding-left:0.4rem;
    padding-right:0.4rem;
}

#footer .column {
/*    padding: 0 1.5rem; */
    text-align: left;
    padding:0.6rem 0.4rem;
}

#footer hr {
    margin: 0.25rem 0;
    border: 0;
    height: 1px;
    background-color: rgb(255, 253, 246);
}

.header-fixed .hero {
    background-position: center center;
}

.image-overlay {
    box-shadow: 0px 1px 2px 2px #ebe3c7;
}

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

.section-content {
    text-align: left;
    padding: 0 1.5rem;
}

.vsbg-content{
    font-size: 0.6rem;
    padding-left:0.4rem;
    padding-right:0.4rem;
}

.vsbg h2 {
    font-size: 1.2rem;
}


/*
 * =================================================================
 * Cookie Consent Banner Styles
 * =================================================================
 */

#tecart-cookie-banner {
    z-index: 9999999999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    position: fixed;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgb(255, 253, 246);
    padding: 2rem;
    bottom: 0;
    left: 0;
}

@media (min-width: 768px) {
    #tecart-cookie-banner {
        width: auto;
        max-width: 700px;
        left: 2rem;
        bottom: 2rem;
    }
}
 
.cc-header {
    font-family: 'Figtree';
    font-style: normal;
    text-transform: uppercase;
    color: rgb(0, 0, 32);
    font-weight: 400;
    margin-bottom: 1rem;
    line-height: 1.25;
    font-size: 1rem;
    background: none;
    background-size: none;
    padding: 0;
    min-height: auto; 
    max-width: 90%;
}

.tcb-saveSettings .cc-btn.layout-2,
.cc-highlight .cc-btn.layout-2 {
    background-color: rgb(253, 242, 203);
    border-color: #eddc8f;
    color: rgb(0, 0, 32) !important;
    height:2rem;
    float: left;
}

.tcb-saveSettings .cc-btn.layout-2:hover,
.cc-highlight .cc-btn.layout-2:hover {
    background-color: rgb(254, 233, 158);
}

.cc-btn, .cc-highlight .cc-btn.layout-1 {
    font-family: 'Figtree';
    font-weight: 400;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
} 

input:checked+.tcb-slider {
    background-color: #eddc8f;;
}

.tcb-settings-modal {
    position: fixed;
    z-index: 99999999999;
    left: 0;
    bottom: 0;
    overflow: hidden;
    padding: 0 2em 2em 2em;
    color: rgb(0, 0, 32) !important;
    background-color: rgb(255, 253, 246);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    font-family: "Source Sans Pro", Arial, sans-serif;
}
/*
input:checked+.tcb-slider:before {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
}
*/

/*
 * =================================================================
 * Responsive Hero Width Layout
 * =================================================================
 */

 @media (min-width: 768px) {
    #tecart-cookie-banner {
        width: auto;
        max-width: 700px;
        left: 1em;
        bottom: 1em;
    }
}

 :root {
  /* COLORS */
  --c-bg: #4338ca;       
  --s-bg: #ffffff;       
  
  /* MATH */
  /* 1. The Fading Section (0px to 200px) */
  --grad-w: clamp(0px, 50vw - 300px, 200px);

  /* 2. The Solid Section (0px upwards) */
  --solid-w: max(0px, 50vw - 500px);

  /* 3. Total Width */
  --total-side-w: calc(var(--solid-w) + var(--grad-w));
}


/*
.page-header {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
}
*/
.hero-center {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.hero-side {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
  width: var(--total-side-w);
  pointer-events: none;
}

/* --- THE SCALABLE POLYNOMIAL FADE --- */
/* We use `var(--grad-w)` as a multiplier. 
   - When the fade area is 200px, `* 0.1` is 20px.
   - When the fade area is 50px, `* 0.1` is 5px.
   This ensures the gradient ALWAYS fits inside the container.
*/

.hero-side-left {
  left: 0;
  background: linear-gradient(to right, 
      /* SOLID START */
      var(--s-bg) var(--solid-w),
      
      /* CUBIC EASE-OUT STOPS (Scaled) */
      rgba(255,255,255, 0.99) calc(var(--solid-w) + var(--grad-w) * 0.08),
      rgba(255,255,255, 0.96) calc(var(--solid-w) + var(--grad-w) * 0.16),
      rgba(255,255,255, 0.91) calc(var(--solid-w) + var(--grad-w) * 0.25),
      rgba(255,255,255, 0.82) calc(var(--solid-w) + var(--grad-w) * 0.35),
      rgba(255,255,255, 0.69) calc(var(--solid-w) + var(--grad-w) * 0.45),
      rgba(255,255,255, 0.50) calc(var(--solid-w) + var(--grad-w) * 0.55),
      rgba(255,255,255, 0.31) calc(var(--solid-w) + var(--grad-w) * 0.65),
      rgba(255,255,255, 0.18) calc(var(--solid-w) + var(--grad-w) * 0.75),
      rgba(255,255,255, 0.05) calc(var(--solid-w) + var(--grad-w) * 0.85),
      
      /* TRANSPARENT END (With Buffer) */
      /* We hit 0% opacity at 95% width, leaving the last 5% purely transparent */
      rgba(255,255,255, 0.00) calc(var(--solid-w) + var(--grad-w) * 0.95),
      rgba(255,255,255, 0.00) 100% 
  );
}

.hero-side-right {
  right: 0;
  background: linear-gradient(to left, 
      /* SOLID START */
      var(--s-bg) var(--solid-w),
      
      /* CUBIC EASE-OUT STOPS (Scaled) */
      rgba(255,255,255, 0.99) calc(var(--solid-w) + var(--grad-w) * 0.08),
      rgba(255,255,255, 0.96) calc(var(--solid-w) + var(--grad-w) * 0.16),
      rgba(255,255,255, 0.91) calc(var(--solid-w) + var(--grad-w) * 0.25),
      rgba(255,255,255, 0.82) calc(var(--solid-w) + var(--grad-w) * 0.35),
      rgba(255,255,255, 0.69) calc(var(--solid-w) + var(--grad-w) * 0.45),
      rgba(255,255,255, 0.50) calc(var(--solid-w) + var(--grad-w) * 0.55),
      rgba(255,255,255, 0.31) calc(var(--solid-w) + var(--grad-w) * 0.65),
      rgba(255,255,255, 0.18) calc(var(--solid-w) + var(--grad-w) * 0.75),
      rgba(255,255,255, 0.05) calc(var(--solid-w) + var(--grad-w) * 0.85),
      
      /* TRANSPARENT END (With Buffer) */
      rgba(255,255,255, 0.00) calc(var(--solid-w) + var(--grad-w) * 0.95),
      rgba(255,255,255, 0.00) 100% 
  );
}