:root{
	  --color-c1:#E30613;
	  --color-c2:#141414;
	  --color-c3:#000000 ;
    
	  --color-c4:#40484a;
	  --color-c5:#1e2021;
	  --color-c6:#103d95;
	  
	  --color-bright:#F5F6F0;
	  --color-dark:#263238;
    
      --color-tsolis:#004584;
	  
	 
 }
  
  
  
 
 body{
	 font-family: Arial;
	 color: var(--color-dark);
	 letter-spacing: 0.01em;
	 font-size: clamp(1rem, 0.95rem + 0.5vw, 1.125rem);
	 line-height: 1.6;
	 background-color:var(--color-bright);
	 hyphens: auto;
 }
 *, :after, :before {
	 box-sizing: border-box;
 }
 
 
 
 h1,h2,h3,h4,h5{padding: 0; overflow-wrap: anywhere; font-weight: normal; font-size: clamp(2.5rem, 2.28rem + 1.11vw, 3rem); margin: 0 0 3rem 0;} 
 
 
 
 .reveal{
   position: relative;
   transform: translateY(150px);
   opacity: 0;
   transition: 1s all ease;
 }
 
 .reveal.active{
   transform: translateY(0);
   opacity: 1;
 }
 


 .c-1{color: var(--color-c1);}
 .c-2{color: var(--color-c2);}
 .c-3{color: var(--color-c3);}
 .c-4{color: var(--color-c4);}
 .c-5{color: var(--color-c5);} 
 .c-bright{color: var(--color-bright);}
 .c-dark{color: var(--color-dark);}
 
 
 .bg-c-1{background-color: var(--color-c1) !important;}
 .bg-c-2{background-color: var(--color-c2) !important;}
 .bg-c-3{background-color: var(--color-c3) !important;}
 .bg-c-4{background-color: var(--color-c4) !important;}
 .bg-c-5{background-color: var(--color-c5) !important;} 
 .bg-c-bright{background-color: var(--color-bright)  !important;}
 .bg-c-dark{background-color: var(--color-dark)  !important;}
 .bg-c-red{background-color: #EC5051 !important;}
 .bg-c-green{background-color: #8bd485  !important;}
 .bg-c-tsolis{background-color: var(--color-tsolis) !important;}
 .bg-c-white{background-color: white !important;}
 
.ts-font-1 { font-size: clamp(2.75rem, 2rem + 3vw, 4rem); line-height: 1.15; }
/* H1 */
h1,.ts-font-2 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); line-height: 1.2; }
/* H2 */
h2,.ts-font-3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.3; }
/* H3 / Eyebrow / Abschnittstitel */
h3,.ts-font-4 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.35; }
/* Body (Standard) */
p,.ts-font-5 { font-size: clamp(1rem, 0.98rem + 0.2vw, 1.125rem); line-height: 1.6; }
/* Small */
.ts-font-6 { font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem); line-height: 1.5; opacity: 0.9; }
 
.google-font{font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
} 
 
a.ts-link {
  font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  line-height: 1.5;
  color:  var(--color-bright);                   
  transition: color 0.3s;
}


.footer-ts a.ts-link:hover {
  color: #fff;                    
  text-decoration: underline;      
  text-underline-offset: 0.2em;
}

 
.footer-ts {
   position: relative;
   background: #004b92;
   color: #fff;
   overflow: hidden;
 }
 
 .footer-ts::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, #004b92, #20c4cb);
   opacity: 0;
   transition: opacity 0.8s ease;
   pointer-events: none;
   z-index: 0;              /* Overlay nach hinten */
 }
 
 /* Alles im Footer nach vorne holen */
 .footer-ts > * {
   position: relative;
   z-index: 1;
 }
 
 .footer-ts:hover::after {
   opacity: 1;
 }

a{
	text-decoration: none;
    color: var(--color-c4);
}

a:hover{
    color: var(--color-c5);
}


.cta {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;   /* Standard: 6px 12px */
  font-size: 1rem;             /* 16px */
  border-radius: 0.375rem;     /* 6px */
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.cta {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;

  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;   /* Standard: 6px 12px */
  font-size: 1rem;             /* 16px */
  border-radius: 0.375rem;     /* 6px */
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  margin-top: 2rem;
}

.cta:hover
{
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

/* .main-container, #c862, #c859, #c860
{
	margin-top: 3em !important;
	margin-bottom: 6rem !important;
	
} */

.main-container
{
  margin-top: 4rem !important;
  margin-bottom: 8rem !important;
}

.ts-container-no-margin-bottom
{
  margin-bottom: 0 !important;
}

.ts-container-no-margin-top
{
  margin-top: 0 !important;
}

.ts-template-200-right .google-font
{
  margin-top: 2rem !important;

}

#c864, #c861
{
  margin: 0 !important;
}

.main-container strong,.footer strong
{
	color: var(--color-c1);
}


.main-container strong.test,.footer strong.test
{
  color: var(--color-c4);
}

#c861 a {
	color: var(--color-bright);
}

#c861 a:hover {
	color: var(--color-c6);
}

.main-container img, .footer img
{
	border-radius: 10px;
	
}


.footer .google-font{
	margin: 0 0 3rem 0;
}

.ts-link
{
	font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem); line-height: 1.5;
	color: var(--color-dark);
	
}

 @media (min-width: 1200px) {
   .container-small {
	 width: 900px !important;

   }
 }





@media (min-width: 768px) {
   .col-md-1-5 {
	 flex: 0 0 20%;
	 max-width: 20%;
   }
 }
 
 @media (min-width: 992px) {
   .col-lg-1-5 {
	 flex: 0 0 20%;
	 max-width: 20%;
   }
 }
 
 @media (min-width: 1200px) {
   .col-xl-1-5 {
	 flex: 0 0 20%;
	 max-width: 20%;
   }
 }
 
 
 
 
 

 


.header-image-content {
    min-height: clamp(600px, 90vh, 1000px);
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (max-width: 767.98px) {
    .header-image-content {
        min-height: 550px;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

.header-intro {
  opacity: 0;
  transform: translateY(40px);
  animation: header-intro-animation 1.1s ease-out 0.2s forwards;
}

@keyframes header-intro-animation {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-intro {
    opacity: 1;
    transform: none;
    animation: none;
  }
  
  .header-background-zoom {
    animation: none;
    transform: scale(1);
  }
}


.header-background-zoom {
  transform: scale(1);
  transform-origin: center center;
  animation: header-background-zoom 14s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

@keyframes header-background-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.10);
  }
}

.blur-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


.card-icon-background i 
{
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem); line-height: 1.2;
  margin-bottom: 1rem;
}



  li#nav-437{}
  li#nav-437 .nav-link{background:var(--color-c1); border-radius: 12px !important; transition: background 0.6s ease;}
  li#nav-437 .nav-link:hover{background:var(--color-c4); }
  .nav-item{margin: 0 0.25rem; }

  /* ===== Navbar (transparent über Hero) ===== */
  .navbar-overlay{ position:absolute; top:0; left:0; right:0; z-index:1020; background:transparent!important; }
  .navbar .nav-link,.navbar-brand{ color:#fff!important; transition:none!important; } /* sofortiges Färben */
  .navbar .nav-link:hover{ background: var(--color-c1); } /*hover li ohnne sub*/
  .nav-item.dropdown>.nav-link.dropdown-toggle::after{ display:none!important; content:none!important; } /* kein Pfeil */

  .nav-link:hover
  {
    color: var(--color-c4) !important;
  }  

  /* Dropdown-Look Desktop */
  .dropdown-menu{
	background:rgba(0,0,0,.7);	
	border:1px solid rgba(255,255,255,.15);
	backdrop-filter:blur(2px);
  }
  .dropdown-item{ color:#fff; }
  .dropdown-item:hover,.dropdown-item:focus{ background: var(--color-c1); color:#fff; }  /* dropdown li hover*/

  /* ===== Desktop: Hover-Dropdown, nahtlos & „kleben“ ===== */
  @media (min-width:992px){
	.nav-item.dropdown:hover>.dropdown-menu{ display:block; margin-top:0; }
	.nav-item.dropdown:hover>.nav-link,
	.nav-item.dropdown:has(.dropdown-menu:hover)>.nav-link{
	  background: var(--color-c1); color:#fff!important; /*hover li mit sub*/
	  border-bottom-left-radius:0; border-bottom-right-radius:0;
	}
	.nav-item.dropdown:hover>.dropdown-menu,
	.nav-item.dropdown:has(.dropdown-menu:hover)>.dropdown-menu{
	  border-top-left-radius:0; border-top-right-radius:0;
	}
  }

  /* ===== EIN Menü-Block, Mobile-Overlay via Checkbox (kein JS) ===== */
  #navToggle{ display:none; } /* Steuer-Checkbox */

  /* Burger (Label toggelt #navToggle) */
  .mobile-toggle-btn{
	border:0; background:transparent; width:44px; height:44px; position:relative; cursor:pointer;
  }
  .mobile-toggle-btn .bar,
  .mobile-toggle-btn .bar::before,
  .mobile-toggle-btn .bar::after{
	content:""; position:absolute; left:8px; right:8px; height:2px; background:#fff; border-radius:1px;
  }
  .mobile-toggle-btn .bar{ top:21px; }
  .mobile-toggle-btn .bar::before{ top:-8px; }
  .mobile-toggle-btn .bar::after{ top:8px; }

  /* Desktop-Layout: Menü rechtsbündig */
  .navbar-collapse{ display:flex!important; justify-content:end; }

  /* ===== MOBILE OVERLAY (Fix: oben links statt unten rechts) ===== */
  @media (max-width:991.98px){
   
   li#nav-437
   {
     display: block;
     margin-top: 2rem !important;
   }
    
    li#nav-437 a{
    
      text-align: center;
    
    }
    
	.navbar-collapse{
	  position:fixed; left:0; top:0; width:100vw; height:100vh;
	  background:rgba(0,0,0,.92); color:#fff; z-index:1050;
	  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
	  display:flex!important; flex-direction:column;
	  padding:24px;

	  /* FIX: Ausrichtung zurücksetzen */
	  justify-content:flex-start;   /* statt end -> sonst unten */
	  align-items:flex-start;       /* statt stretch + ms-auto-Effekt */
	  text-align:left;
	}
	/* Overlay sichtbar, wenn Checkbox aktiv */
	#navToggle:checked ~ .navbar .navbar-collapse{ opacity:1; visibility:visible; }

	/* Close-X (Label toggelt dieselbe Checkbox) */
	.mobile-close{ position:absolute; top:12px; right:12px; width:44px; height:44px; cursor:pointer; }
	.mobile-close::before,.mobile-close::after{
	  content:""; position:absolute; left:10px; right:10px; top:21px; height:2px; background:#fff; border-radius:1px;
	}
	.mobile-close::before{ transform:rotate(45deg); }
	.mobile-close::after{ transform:rotate(-45deg); }

	/* Menü-Liste vertikal, LINKS ausgerichtet */
	.navbar-nav{
	  flex-direction:column; gap:.25rem; margin-top:56px; align-items:stretch; width:100%;
	}
	/* FIX: ms-auto neutralisieren (hat zuvor nach rechts geschoben) */
	.navbar-nav.ms-auto{ margin-left:0!important; }

	.navbar-nav .nav-item{ border-bottom:1px solid rgba(255,255,255,.1); }
	.navbar-nav .nav-link{ font-size:1.25rem; padding:.75rem 0; }

	/* Gleiches Dropdown-UL mobil „offen“ & ohne Background */
	.navbar-nav .dropdown-menu{
	  position:static; display:block; background:transparent; border:0; padding:0 0 0 1rem; margin:0;
	}
	.navbar-nav .dropdown-menu .dropdown-item{
	  font-size:1.05rem; padding:.5rem 0; color:#fff;
	}

	/* Mobile-only CTAs (ans Ende) */
	.mobile-cta{ margin-top:auto; display:grid; gap:.75rem; width:100%; }
	.mobile-cta .btn{ width:100%; padding-top:12px; padding-bottom:12px; font-size:1.05rem; }
  }

  /* CTAs & Close-X nur mobil sichtbar */
  @media (min-width:992px){ .mobile-cta, .mobile-close{ display:none!important; } }

  /* Hero-Buttons auf XS full width */
  @media (max-width:575.98px){ .btn-stack .btn{ width:100%; } }
  
  
  
  
  
  #content2953 i, #content2954 i, #content2956 i, #content2955 i
  {
    font-size: clamp(2.75rem, 2rem + 3vw, 4rem); line-height: 1.15;
    margin-bottom: 1rem;
    color:var(--color-c2);
  }
  

  input::placeholder {
    color: var(--color-c4);

  }
  
  .form-floating label
  {
    color: var(--color-c4);
  }
  
  .btn-primary
  {
    background-color: var(--color-c1) !important;
    border: var(--color-c3);
  }
  
  .btn-primary:hover
  {
    background-color: var(--color-c3) !important;
    border: var(--color-c2);
    
  }
  
  .btn-primary-branding
  {
    background-color: var(--color-c4) !important;
    border: var(--color-c3);
    color: var(--color-bright);
  }
  
  .btn-primary-branding:hover
  {
    background-color: var(--color-c5) !important;
    border: var(--color-c1);
  }
  
  
.image-hover {
      position: relative;
      display: block;
      overflow: hidden;
      width: 100%;
      border-radius: 10px;
  }
  
  .image-hover .image-a,
  .image-hover .image-b {
      display: block;
      width: 100%;
      height: auto;
      border-radius: inherit;
      transition: opacity 0.8s ease;
  }
  
  .image-hover .image-b {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      pointer-events: none;
  }
  
  /* Beim Hover */
  .image-hover:hover .image-b,
  .image-hover.active .image-b {
      opacity: 1;
  }
  
  .image-hover:hover .image-a,
  .image-hover.active .image-a {
      opacity: 0;
  }  
  
/* .image-hover {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    border-radius: 10px;
  }
  
  .image-hover .image-a,
  .image-hover .image-b {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    transition: opacity 0.8s ease;
  }
  
  .image-hover .image-b {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
  }
  
  .image-hover:hover .image-b {
    opacity: 1;
  }
  
  .image-hover:hover .image-a {
    opacity: 0;
  } */
  
  
  
  #hauptnavigation {
    z-index: 2000;
  }
  
  #hauptnavigation .offcanvas-header,
  #hauptnavigation .offcanvas-body,
  #hauptnavigation nav,
  #hauptnavigation .nav-link {
    position: relative;
    z-index: 5;
    pointer-events: auto;
  }
  
  

 .accordion ul {
   list-style: none;
   margin: 0;
   padding-left: 0;
 }
 
 .accordion li {
   position: relative;
   padding-left: 24px;
   line-height: 1.6rem;
 }
 

 
 .accordion li::before {
   content: "•";
   position: absolute;
   left: 0;
   top: 0;
   color: #b4c900;
   font-weight: 700;
 }
 
 /* content3108 content3111 content3112 */
.card-icon-background {
   background-color: white;
   transition: background-color 0.8s ease, color 0.5s ease, transform 0.3s ease;
 }
 
 .card-icon-background:hover {
   background-color:  var(--color-c2);
   transform: translateY(-5px);
   color: white;
 }
 
 
 
 
 
 
 /*new vertical scrolling*/
 
 @media (max-width: 767.98px) {
   .mobile-card-scroll {
     flex-wrap: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
      scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     
   }
 
   .mobile-card-scroll::-webkit-scrollbar {
     display: none;
   }
 

 }
 
 
 
 
 
 
 
 
 
 
 /* geschlossen */
 .accordion-button {
     background: var(--color-c2);
     color: var(--color-bright);
 }
 
 /* geöffnet */
 .accordion-button:not(.collapsed) {
     background: var(--color-c3);
     color: var(--color-bright);
 }
 
 /* Fokus */
 .accordion-button:focus {
     box-shadow: none;
 }
 


 
/* ===== FAQ Accordion ===== */
 
 
 /* ==========================
    Grundzustand (geschlossen)
    ========================== */
 .accordion-button {
     background: var(--color-c2);
     color: var(--color-bright);
     box-shadow: none;
 }
 
 
 /* ==========================
    Geöffnet
    ========================== */
 .accordion-button:not(.collapsed) {
     background: var(--color-c3);
     color: var(--color-bright);
 }
 
 
 /* ==========================
    Fokus entfernen
    ========================== */
 .accordion-button:focus {
     box-shadow: none;
 }
 
 
 /* ==========================
    Spezielle Accordions
    ========================== */
 #panelsStayOpen-headingcontent2968 .accordion-button,
 #panelsStayOpen-headingcontent2969 .accordion-button,
 #panelsStayOpen-headingcontent3087 .accordion-button {
     background: var(--color-c4);
     color: var(--color-bright);
 }
 
 
 /* ==========================
    Bereits gelesen
    Muss ganz am Ende stehen!
    ========================== */
 .accordion-button.visited {
     background: var(--color-c1) !important;
     color: var(--color-bright);
 }
 
 #panelsStayOpen-headingcontent2966 .accordion-button.visited {
      background: var(--color-c4) !important;
      color: var(--color-bright);
  }
 
 
 /* ==========================
    Pfeil Farbe
    ========================== */
 .accordion-button::after {
     filter: brightness(0) invert(1);
 }