body h1,body h2,body h3,body h4,body h5,body h6 {
    font-family: 'Open Sans', sans-serif;
    margin: 10px 0;
    font-weight: 700;
}
/*orange ff755a*/
body p { 
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 30px !important;
    color: #15628D;
    font-size: 18px;
}
.nav > li.level-1 > ul {
    display: none;
    margin-top: 0;
}
.nav > li.level-1.open > ul {
    display: block;
}
body { overflow-x: clip }
body .carousel-caption h2 {
    font-weight: 300;
    font-size: 2vw;
    /*font-size: calc(62px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
    line-height: 50px;*/
    text-transform: uppercase;
    color: #15628D;
    margin: 0;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.4);*/
}
body .carousel-caption h1 {
    font-weight: 600;
    font-size: 3.5vw;
    /*font-size: calc(62px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
    line-height: 50px;*/
    text-transform: uppercase;
    color: #15628D;
    margin: 0;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.4);*/
}
body .carousel-caption_about h1 {
    font-weight: 500;
    font-size: 3.5vw;
    /*font-size: calc(62px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
    line-height: 50px;*/
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.4);*/
}

body .carousel-caption_sibe h1 {
    font-weight: 500;
    font-size: 3.5vw;
    /*font-size: calc(62px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
    line-height: 50px;*/
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.4);*/
}
body .carousel-caption_sitek h1 {
    font-weight: 500;
    font-size: 3.5vw;
    /*font-size: calc(62px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
    line-height: 50px;*/
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.4);*/
}
body .carousel-caption_analyse h1 {
    font-weight: 500;
    font-size: 3.5vw;
    /*font-size: calc(62px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
    line-height: 50px;*/
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.4);*/
}
body .carousel-caption_check h1 {
    font-weight: 500;
    font-size: 3.5vw;
    /*font-size: calc(62px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
    line-height: 50px;*/
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.4);*/
}
body .carousel-caption_assist h1 {
    font-weight: 500;
    font-size: 3.5vw;
    /*font-size: calc(62px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
    line-height: 50px;*/
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.4);*/
}

body .carousel-caption_assist h3 {
    font-size: 34px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 34px;
    color: #fff;
    margin: 0;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.4);*/
}
body h2 {
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 46px;
    color: #15628D;
    word-wrap: break-word;
}
body h3 {
    font-size: 34px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 34px;
    color: #15628D;
}
body h4 {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: -1px;
    color: #15628D;
}
.bgbody {
    background-image: url("images/BG_picture_web.webp");
    background-attachment: fixed;
    /*background: #1A2A55;
    background-image: linear-gradient(to left, #EFDB9B , #fff);
    padding-top: 40px;
    padding-bottom: 40px;*/
}
#fe_PreviewContent, p {
    font-size: 12px;
    line-height: 20px;
    font-weight: 300;
    color: #a5b2b9;
}
.sticky-cta, .floating-cta, .cta-fab {
  position: fixed;
  right: 1rem;          /* nicht via translateX nach außen schieben */
  left: auto !important;
  transform: none !important;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
}

hr.carusel {
  border-top: 1px solid #9E1B1A;
}
p.lead {
    color: #fff;
    font-size: 1.2vw;
    line-height: 28px;
}
p.message {
    color: #15628D;
    font-size: 18px;
}
p.cards {
    color: #15628D;
    font-size: 14px;
}
p.link {
    color: #fff;
    font-size: 1.0vw;
    line-height: 24px;
}
h4.message li{
    color: #15628D;
    font-size: 18px;
    margin:0;
}
body a {
    color: #BF0F0F;
}
body a:hover {
    transition: all 0.35s ease-in-out;
    color: #15628D;
    text-decoration: none;
}

/**************************
Die Hero Section
**************************/
.hero-section {
  /*background: url('themes/Kampagnen/images/header_sicherheitstechnik.webp') center center / cover no-repeat;*/
  padding: 9em 0; /*0 100px;*/
  color: #fff;
  text-align: center;
  position: relative;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  animation: fadeInUp 1.2s ease-out;
}

.hero-section h1 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.hero-section .lead {
  font-size: 20px;
  line-height: 1.6;
}

.hero-section .btn-main {
  display: inline-block;
  background-color: #AE171F;
  color: white;
  padding: 12px 30px;
  border-radius: 6px;
  margin-top: 20px;
  text-decoration: none;
  font-weight: 600;
}

.hero-section .btn-main:hover {
  background-color: #cc0000;
}


.one {
    background: url(images/header_securitax.webp) no-repeat center center;
    background-size: cover;
}
.ie7 .one, .ie7 .about, .ie7 .three, .ie8 .one, .ie8 .two, .ie8 .three, .ie8 .sibe, .ie8 .assist, .ie8 .sitek, .ie8 .threesystem, .ie8 .check, .ie8 .guide, .ie8 .analyse, .ie8 .strategie{background-size: 100%;}

.about {
    background: url(images/header_securitax_about.webp) no-repeat center center;
    background-size: cover;
}
.sibe {
    background: url(images/header_securitax_sibe.webp) no-repeat center center;
    background-size: cover;
}
.offer {
    background: url(images/header_landung_offerten.webp) no-repeat center center;
    background-size: cover;
}
.assist {
    background: url(images/header_securitax_Sicherheits_check_assistent.webp) no-repeat center center;
    background-size: cover;
}
.system {
    background: url(images/header_system.webp) no-repeat center center;
    background-size: cover;
}
.news {
    background: url(images/header_news.webp) no-repeat center center;
    background-size: cover;
}

/*Landingpages*/
.SmartHome{
    background: url(images/header_landing_smarthome.webp) no-repeat center center;
    background-size: cover;
}

.check{
    background: url(images/header_landing_checkliste.webp) no-repeat center center;
    background-size: cover;
}
.guide{
    background: url(images/header_Sicherheitsguide2025.webp) no-repeat center center;
    background-size: cover;
}
.analyse {
    background: url(images/header_analyse.webp) no-repeat center center;
    background-size: cover;
}
.strategie{
    background: url(images/header_sicherheits-strategie.webp) no-repeat center center;
    background-size: cover;
}
.emea {
    background: url(images/headre_einbruch.webp) no-repeat center center;
    background-size: cover;
}
.service_pakete{
    background: url(images/header_service_pakete.webp) no-repeat center center;
    background-size: cover;
}
.kontakt{
    background: url(images/header_terminbuchen-kontakt.webp) no-repeat center center;
    background-size: cover;
}
.EinbruchschutzKampagne {
    background: url(images/header_einbruchschutz_kampagne.webp) no-repeat center center;
    background-size: cover;
}
/*****Alle AJAX Pages******/
.ajax {
    background: url(images/header_ajax_superior.webp) no-repeat center center;
    background-size: cover;
}
.ajaxEinbruch {
    background: url(images/header_ajax_superior.webp) no-repeat center center;
    background-size: cover;
}
.ajaxBrand {
    background: url(images/header_brandschutz.webp) no-repeat center center;
    background-size: cover;
}
.ajaxBrand54 {
    background: url(images/header_Brandswarnanlage_EN54.webp) no-repeat center center;
    background-size: cover;
}
.ajaxSicherheitstechnik {
    background: url(images/header_sicherheitstechnik.webp) no-repeat center center;
    background-size: cover;
}
.ajaxVideo {
    background: url(images/header_video.webp) no-repeat center center;
    background-size: cover;
}
.ajaxKomfort {
    background: url(images/header_komfort.webp) no-repeat center center;
    background-size: cover;
}
/*****Alle Aktionsseiten ******/
.summer {
    background: url(images/header_landing_sommer.webp) no-repeat center center;
    background-size: cover;
}
.summercheck {
    background: url(images/header_landing_sommer.webp) no-repeat center center;
    background-size: cover;
}
/*****Alle YALE Pages******/
.yale {
    background: url(images/header_yale.webp) no-repeat center center;
    background-size: cover;
}
/*****Alle KEVIN Pages******/
.kevin {
    background: url(images/header_mitipi_kevin.webp) no-repeat center center;
    background-size: cover;
}
.kevinstarter {
    background: url(images/header_kevin_starter.webp) no-repeat center center;
    background-size: cover;
}
.kevinanwesend {
    background: url(images/header_kevin_anwesenheit_plus.webp) no-repeat center center;
    background-size: cover;
}
.kevinflexmiete {
    background: url(images/header_kevin_flexmiete.webp) no-repeat center center;
    background-size: cover;
}
.kevinferien {
    background: url(images/header_kevin_ferienservice.webp) no-repeat center center;
    background-size: cover;
}
.kevinshop {
    background: url(images/header_mitipi_kevin.webp) no-repeat center center;
    background-size: cover;
}
/*****Alle Header Partnerseiten******/
.partnermaster {
    background: url(images/header_securitax_partnerprogramm.webp) no-repeat center center;
    background-size: cover;
}
.partnerpage {
    background: url(images/header_securitax_partnerpage.webp) no-repeat center center;
    background-size: cover;
}
.partnerpageportmann {
    background: url(images/header_securitax_partnerpage_portmann.webp) no-repeat center center;
    background-size: cover;
}


/**********************
Ende der Hero Section
**********************/

/*.btn-main {
    background: #9E1B1A repeat scroll 0 0;
    border: none;
    font-weight: 300;
    border-radius: 2px;
    box-shadow: none;
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: none;
    padding: 15px 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}*/
.btn-main{
    margin-top: 16px;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    font-family: inherit;
    text-shadow: none;
    transition: all,.1s,ease-in;
    background-color: #9E1B1A;
    border: 1px solid #9E1B1A;
    color: #FFFFFF;
    border-radius: 2rem;
    /*animation: pulse 2s infinite;*/
}
.btn-main:hover {
    background: #324D64 repeat scroll 0 0;
    border: 1px solid #324D64;
    color: #FFFFFF;
    border-radius: 2rem;
    text-decoration: none;
    transition: all 0.35s ease-in-out;
}
.more:hover {
    opacity: 0.6;
    transition: all 0.35s ease-in-out;
}
.dropdown-backdrop {
    position: static;
}
[class^="icon-"], [class*=" icon-"] {
    vertical-align: middle !important;
}
::selection {
    background: #15628D; /* Safari */
    color: #FFFFFF;
}
::-moz-selection {
    background: #15628D; /* Firefox */
    color: #FFFFFF;
}
/*-----------Margins-----------------*/
.margin-0 {
    margin-bottom: 0 !important;
}
.margin-10 {
    margin-bottom: 10px !important;
}
.margin-15 {
    margin-bottom: 15px !important;
}
.margin-20 {
    margin-bottom: 20px !important;
}
.margin-3030 {
    margin-top: 30px !important;
}
.margin-30 {
    margin-bottom: 30px !important;
}

.margin-40 {
    margin-bottom: 40px !important;
}
.margin-40-40 {
    margin-bottom: 40px !important;
    margin-top: 40px !important;
}
.margin-50 {
    margin-bottom: 50px !important;
}
.margin-60 {
    margin-bottom: 60px !important;
}
.margin-70 {
    margin-bottom: 70px !important;
}
.margin-80 {
    margin-bottom: 80px !important;
}
.margin-90 {
    margin-bottom: 90px !important;
}
.margin-100 {
    margin-bottom: 100px !important;
}
.margin-120 {
    margin-bottom: 100px !important;
}
/*------------Colors------------------*/
.black {
    color: #31363a;
}
.dark-gray {
    color: #626c72;
}
.gray {
    color: #a5b2b9;
}
.light-gray {
    color: #dfe5e8;
}
.white {
    color: #FFFFFF;
}
.orange {
    color: #15628D;
}
/* ==========================================================================
   Navigation styles
   ========================================================================== */
body .navbar-inverse {
    background: #fff;
    background-repeat: repeat-x;
    border-color: #fff;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#15628D', endColorstr='#15628D', GradientType=0);
    margin-bottom: 0;
}
.nav-collapse, .nav-collapse.collapse {
    background: none repeat scroll 0 0 #15628D;
    height: 0;
    /*overflow: hidden;*/
}
.navbar-brand, .navbar .nav > li > a {
    color: #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    text-shadow: 0 0px 0 rgba(0, 0, 0, 0.0);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
    background-color: transparent; 
    color: yellow;
}
.navbar-brand {
    margin-top: 10px;
    margin-bottom: 30px;
}
body .navbar-inverse .navbar-nav>li>a {
    color: #15628D;
}
body .navbar-inverse .navbar-nav>li>a:hover {
    color: #BF0F0F;
}
.navbar .nav > li > a {
    color: #15628D;
    float: none;
    padding: 35px 16px;
    text-decoration: none;
    text-shadow: none;
    letter-spacing: -0.7px;
}
.container .navbar .nav > li > a:hover, #navigation li.level-1.starter_active > a {
    color: #BF0F0F;
    background: transparent;
}
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
    border-bottom-color: rgba(49,54,58,0.4);
    border-top-color: rgba(49,54,58,0.4);
    margin-left: 5px;
}
.navbar-inverse .nav li.dropdown > a:hover .caret, .navbar-inverse .nav li.dropdown > a:focus .caret {
    border-bottom-color: rgba(49,54,58,0.4);
    border-top-color: rgba(49,54,58,0.4);
    transition: all 0.35s ease-in-out;
}
.navbar-fixed-top {
    margin-bottom: 0px;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
    background-color: transparent;
}
.navbar-inverse .nav-collapse .nav > li > a:hover, .navbar-inverse .nav-collapse .nav > li > a:focus, .navbar-inverse .nav-collapse .dropdown-menu a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:focus {
    background-color: transparent;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    box-shadow: none;
}
.dropdown-menu {
    background-clip: padding-box;
    background-color: #31363a;
    color: #FFFFFF;
    border: 0px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    list-style: none outside none;
    margin: 1px 0 0;
    min-width: 160px;
    padding: 12px;
    position: absolute;
    top: 100%;
    z-index: 1000;
}
.navbar .nav > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu:after {
    display: none;
}
.nav-collapse .dropdown-menu a {
    font-weight: normal;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
    background-color: transparent;
    background-image: none;
    background-image: -webkit-linear-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(transparent));
    background-repeat: no-repeat;
    color: #15628D;
    text-decoration: none;
}
.dropdown-menu > li > a {
    clear: both;
    color: #FFFFFF;
    display: block;
    font-weight: normal;
    line-height: 20px;
    padding: 3px 20px;
    white-space: nowrap;
}
body .navbar-inverse .btn-navbar {
    background-color: #15628D;
    background-image: none;
    background-repeat: repeat-x;
    border-color: #15628D;
    color: #fff;
    text-shadow: 0 0 0 transparent;
    box-shadow: none;
}
.navbar-inverse .btn-navbar:hover, .navbar-inverse .btn-navbar:focus, .navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active, .navbar-inverse .btn-navbar.disabled, .navbar-inverse .btn-navbar[disabled] {
    background-color: transparent;
    color: #15628D;
}
.navbar .btn-navbar .icon-bar {
    background-color: #15628D;
    border-radius: 0 0 0 0;
    box-shadow: 0 1px 0 transparent;
    display: block;
    height: 3px !important;
    width: 20px !important;
}
/* ==========================================================================
   Header Styles
   ========================================================================== */
.header {
    margin-bottom: 0px;
    background: #fff;
}
.header .container {
    position: relative;
    z-index: 9;
}
.header .carousel-control {
    background: none repeat scroll 0 0;
    background-color: rgba(253,90,62,0.9);
    border: 0px solid;
    border-radius: 0px;
    font-size: 22px;
    font-weight: bold;
    height: 40px;
    margin-top: 50px;
    text-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
    z-index: 10;
    opacity: 1;
}
.header-control:hover {
    opacity: 0.7;
}
.header .item {
    height: 1070px;
    max-width: 100%;
}


.container .carousel-caption {
    background-color: transparent;
    position: static;
    max-width: 100%;
    padding: 0 20px;
    margin-top: 15%;
    text-align: left;
    color: #9E1B1A;
}
.container .carousel-caption_about {
    background-color: transparent;
    position: static;
    max-width: 100%;
    padding: 0 20px;
    margin-top: 15%;
    text-align: left;
    color: #9E1B1A;
}
.container .carousel-caption_sibe {
    background-color: transparent;
    position: static;
    max-width: 100%;
    padding: 0 20px;
    margin-top: 15%;
    text-align: left;
    color: #9E1B1A;
}
.container .carousel-caption_sitek {
    background-color: transparent;
    position: static;
    max-width: 100%;
    padding: 0 20px;
    margin-top: 15%;
    text-align: left;
    color: #9E1B1A;
}
.container .carousel-caption_assist {
    background-color: transparent;
    position: static;
    max-width: 100%;
    padding: 0 20px;
    margin-top: 15%;
    text-align: left;
    color: #9E1B1A;
}
.container .carousel-caption_about {
    background-color: transparent;
    position: static;
    max-width: 100%;
    padding: 0 20px;
    margin-top: 15%;
    text-align: left;
    color: #9E1B1A;
}
.container .carousel-caption_check {
    background-color: transparent;
    position: static;
    max-width: 100%;
    padding: 0 20px;
    margin-top: 15%;
    text-align: left;
    color: #9E1B1A;
}
/* ==========================================================================
   Content Styles
   ========================================================================== */
#content1 {
    background: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
}
#content2 {
    /*background: url(images/grid_noise.png) repeat;
    background-color: #ebebeb;*/
    background: #ffffff;
    padding-top: 60px;
    padding-bottom: 60px;
}
#page-title {
    background: #ffffff;
    padding-top: 120px;
    padding-bottom: 40px;
}
/* ==========================================================================
   Blog Styles
   ========================================================================== */
.blog-post {
    border-bottom: 1px solid #c7cfd3;
    padding-bottom: 40px;
    float: left;
    width: 100%;
}
.date-container {
    background: #626c72;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 16px;
    float: left;
    margin-top: 25px;
    width: 56px;
    letter-spacing: -1px;
    font-size: 21px;
    margin-left: -10px;
    text-align: center;
    position: absolute;
    box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.15);
}
.date-container:after {
    border-style: solid;
    border-width: 10px 0 0 10px;
    bottom: -10px;
    content: "";
    display: block;
    left: 0px;
    position: absolute;
    width: 0;
    border-color: #31363a transparent;
}
.day {
    font-size: 38px;
    line-height: 36px;
}
.side-links li {
    padding: 6px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 300;
    color: #15628D;
}
.side-links li a {
    color: #15628D;
    font-weight: 600;
}
.side-links li a:hover {
    color: #31363a;
}
/* ==========================================================================
   About Page Styles
   ========================================================================== */
.progress {
    background-color: #dfe5e8;
    background-image: linear-gradient(to bottom, #dfe5e8, #dfe5e8);
    background-repeat: repeat-x;
    border-radius: 0 0 0 0;
    box-shadow: 0 1px 2px transparent inset;
    height: 50px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    margin: 0;
    margin-top: 12px;
}
.progress .bar {
    -moz-box-sizing: border-box;
    background-color: #A5B2B9;
    background-image: none;
    background-repeat: repeat-x;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05) inset;
    color: #FFFFFF;
    float: left;
    font-size: 12px;
    height: 100%;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    transition: width 0.6s ease 0s;
    width: 0;
    position: relative;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.progress .bar:after {
    content: "";
    position: absolute;
    top: 17px;
    right: -8px;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent #A5B2B9;
    display: block;
    width: 0;
    z-index: 1;
}
.progress .field {
    color: #FFFFFF;
    left: 20px;
    line-height: 44px;
    position: absolute;
    z-index: 100;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 16px;
}
.progress .field-value {
    color: #31363a;
    right: 20px;
    line-height: 44px;
    position: absolute;
    z-index: 100;
    text-align: right;
    font-weight: 300;
    font-size: 19px;
    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
/* Animated Progress Bar onload */
.bar-one       { width:100%;  -moz-animation:bar-one 1.0s ease-out;       -webkit-animation:bar-one 1.0s ease-out;        }
.bar-two        { width:100%;  -moz-animation:bar-two 1.7s ease-out;        -webkit-animation:bar-two 1.7s ease-out;         }
.bar-three      { width:100%; -moz-animation:bar-three 2.3s ease-out;   -webkit-animation:bar-three 2.3s ease-out;      }
@-moz-keyframes bar-one       { 0%  { width:0px;} 100%{ width:100%;}   }
@-moz-keyframes bar-two        { 0%  { width:0px;} 100%{ width::100%;}  }
@-moz-keyframes bar-three      { 0%  { width:0px;} 100%{ width::100%;}  }
@-webkit-keyframes bar-one       { 0%  { width:0px;} 100%{ width:100%;}   }
@-webkit-keyframes bar-two        { 0%  { width:0px;} 100%{ width::100%;}  }
@-webkit-keyframes bar-three      { 0%  { width:0px;} 100%{ width::100%;}  }
/* Animated Fade in for Field Values */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
.display-none {
    display: none;
}
.display {
    display: block;
}
.stat {
    padding-top:10px;
    padding-bottom: 10px;
}
/* ==========================================================================
   Team Member Styles
   ========================================================================== */
.team-member img {
    width: 100%;
    left: 0;
    bottom: 0;
}
.team-info {
    background: #15628D;
    padding: 10px 10px 10px 10px;
    height: 60px;
}
.team-info h4, .team-info h4 em {
    color: #ffffff;
    line-height: 12px;
}
.socialize {
    background: #31363a;
    padding: 20px 10px 10px 10px;
    color: #ffffff;
    margin-left: 0;
    height: 60px;
}
/* ==========================================================================
   Pricing Styles
   ========================================================================== */
.pricing-table {
    background: #dfe5e8;
    width: 100%;
    border: 1px solid #f1f1f1;
    margin-top: 20px;
    margin-bottom: 45px;
}
.pricing-table.active {
    box-shadow: 1px 1px 16px #919191;
    border: 0px solid #f1f1f1;
    margin-top: 0px;
}
.pricing-table.active .headline {
    background: #31363a;
    height: 100px;
    top: 0px;
}
.pricing-table.active .headline:after {
    border-color: #31363a transparent;
}
.pricing-table li {
    padding-left: 20px;
    padding-right: 20px;
}
.headline {
    background: #15628D;
    padding: 6px 6px 0px 6px;
    background-size: contain;
    position: relative;
    height: 66px;
}
.headline h2 {
    color: #FFFFFF;
}
.headline:after
{
    content: "";
    position: absolute;
    bottom: -15px;
    left: 44%;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #15628D transparent;
    display: block;
    z-index: 1;
}
.price {
    background: none repeat scroll 0 0 #ffffff;
    color: #31363A;
    font-size: 32px;
    font-weight: bold;
    height: 40px;
    margin-top: -15px;
    padding-bottom: 20px;
    padding-top: 45px;
    color: #9E1B1A;
}
.price small {
    font-weight: 300;
    color: #a5b2b9;
}
.info {
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: 300;
    font-size: 13px;
    color: #a5b2b9;
}
.features {
    color: #31363a;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 15px;
    border-bottom: 1px dotted #ffffff;
}
.features.first {
    border-top: 1px dotted #ffffff;
}
.features.last {
    padding-top: 17px;
    padding-bottom: 20px;
}
/* ==========================================================================
   Contact Page styles
   ========================================================================== */
#map {
    height: 265px;
    padding-bottom: 0;
}
#map > iframe {
    background-color: transparent;
    border: medium none;
    height: inherit;
    overflow: hidden;
    width: 100%;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #ffffff;
    border: 0 solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border-radius: 2px 2px 2px 2px;
    color: #555555;
    display: inline-block;
    height: 37px;
    font-size: 14px;
    line-height: 15px;
    margin-bottom: 0px;
    padding: 2px 6px;
    vertical-align: middle;
}
/* ==========================================================================
   Sign Up Page styles
   ========================================================================== */
#signup {
    background: url(images/testimonial-bg.jpg) no-repeat;
    background-size: cover;
    padding-top: 120px;
    padding-bottom: 120px;
} 
.signup {
    background: url(images/grid_noise.png) repeat;
    background-color: #ebebeb;
    padding-top: 30px;
    margin-top: 22px;
}
input, button, select, textarea {
    font-family: 'Open Sans', sans-serif !important;
}
.input-append .add-on, .input-prepend .add-on {
    background-color: #dfe5e8;
    border: none;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    height: 29px;
    line-height: 25px;
    min-width: 16px;
    padding: 5px 5px 4px 5px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: auto;
}
.form-horizontal .controls {
    margin-left: 0px;
}
.input-large, .input-xlarge, .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input {
    -moz-box-sizing: border-box;
    display: block;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #626c72;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
    box-shadow: 1px 1px 8px rgba(0,0,0,0.05);
}
ul.social-icons-signup {
    list-style: none;
    margin-left: 0px;
}
ul.social-icons-signup li {
    display: inline;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 50px;
}
ul.social-icons-signup li a {
    color: #ACC2CE;
    text-decoration: none;
}
ul.social-icons-signup li a:hover {
    color: #626c72;
    bottom: 12px;
    text-decoration: none;
    transition: all 0.35s ease-in-out;
}
/* ==========================================================================
   Services Styles
   ========================================================================== */
#services {
    padding-top: 40px;
    padding-bottom: 40px;
}
.service:hover i {
    color: #626c72;
    transition: all 0.35s ease-in-out;
    cursor: pointer;
}
.service h3 {
    margin-top: 40px;
}
.service-icons {
    padding-top: 20px;
}
#services2 {
    background: #1A2A55;
    background-image: linear-gradient(to bottom, #F8FAFC , #EAF4FF);
    padding-top: 40px;
    padding-bottom: 40px;
}
#services3 {
    background: #1A2A55;
    background-image: linear-gradient(to bottom, #EAF4FF , #F8FAFC);
    padding-top: 40px;
    padding-bottom: 40px;
}
#servicesAJAX {
    /*background: #0A2540;
    background-image: linear-gradient(to bottom, #F8FAFC , #EAF4FF);*/
    padding-top: 40px;
    padding-bottom: 40px;
    color: #f5f5f5;
}#servicesYale {
    /*background: #0A2540;
    background-image: linear-gradient(to bottom, #F8FAFC , #EAF4FF);
    padding-top: 40px;
    padding-bottom: 40px;*/
    color: #f5f5f5;
}
/* ==========================================================================
   FAQ Styles
   ========================================================================== */
#faq {
    background: transparent;
    padding-top: 40px;
    padding-bottom: 40px;
}
/* ==========================================================================
   Message Styles
   ========================================================================== */
#message {
    background: #F0F0F0;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 60px;
}
#message1 {
    background: url(images/BG_picture.png) repeat;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 60px;
}
#message2 {
    background: url(images/BG_picture_partner.webp);
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 60px;
}
/* ==========================================================================
   Latest Work and Portfolio Styles
   ========================================================================== */
#latest-work {
    /*background: url(images/grid_noise.png) repeat;*/
    background-color: #ebebeb;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 60px;
}
.thumbs {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}
.thumbs a {
    background-color: rgba(244,244,244,0.90);
    bottom: -200px;
    color: white;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    z-index: 100;
}
.thumbs a span.title {
    display: table;
    width: 100%;
    height: 90%;
}
.thumbs a span.title span {
    font-family: 'Lato', sans-serif;
    font-size: 14.5px;
    line-height: 17px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    vertical-align: middle;
    display: table-cell;
}
.thumbs a:hover {
    bottom: 0;
    opacity: 1;
    transition: opacity 0.30s ease-in-out 0s, bottom 0.4s cubic-bezier(0.25, 0.500, 0, 1) 0s;
    -webkit-transition: opacity 0.30s ease-in-out 0s, bottom 0.4s cubic-bezier(0.25, 0.500, 0, 1) 0s;
}
.flexslider {margin: 0 0 60px; background: transparent; border: none; position: relative; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; box-shadow: 0 0px 0px rgba(0,0,0,.0); -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.0); -moz-box-shadow: 0 0px 0px rgba(0,0,0,.0); -o-box-shadow: 0 0px 0px rgba(0,0,0,.0); zoom: 1;}
ul.icons li {
    list-style: none;
    padding: 7px 0 5px 0;
}
/* ==========================================================================
   Testimonial styles
   ========================================================================== */
#testimonial {
    /*background: url(images/testimonial-bg.jpg) no-repeat;*/
    background: #15628D;
    background-size: cover;
    padding-top: 120px;
    padding-bottom: 120px;
}
.testimonial-source {
    background: #15628D;
    text-align: center;
    padding: 12px 14px;
    color: #FFFFFF;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 25px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
/* ==========================================================================
   Latest News styles
   ========================================================================== */
#latest-news {
    background: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-right: 30px;
}
.latest-article img {
    margin-bottom: 15px;
    max-width: 100%;
}
.latest-article p {
    font-size: 14px;
    text-align: left;
    color: #626C72;
}
.latest-article {
    position: relative;
    padding: 10px 10px 30px 10px;
    background: #dfe5e8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 30px;
}
.latest-article {
    color: red;
}
.latest-article:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 45%;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #dfe5e8 transparent;
    display: block;
    width: 0;
    z-index: 1;
}
/* ==========================================================================
   Twitter Feed styles
   ========================================================================== */
#twitter {
    background: #dfe5e8;
    padding-top: 120px;
    padding-bottom: 120px;
}
ul#twitter_update_list {
    list-style: none;
    margin-left: 0px;
    margin-top: 20px;
}
ul#twitter_update_list li {
    display: none; /* Prevents the entire feed list from showing momentarily on page load */
}
.twitter-feed span {
    color: #7f8d95;
    display: block;
    font-weight: 300;
    font-size: 19px;
    line-height: 28px;
}
.twitter-feed span a {
    color: #4f585f;
    font-weight: 600;
    text-decoration: none;
}
.twitter-feed span a:hover{
    color: #4f585f;
    text-decoration: none;
}
.twitter-feed a {
    color: #626C72;
    text-decoration: none;
}
.twitter-feed a:hover {
    color: #626C72;
    text-decoration: none;
}
/* ==========================================================================
   Bottom and Footer styles
   ========================================================================== */
#bottom {
    background: #15628D;
    padding-top: 40px;
    padding-bottom: 0px;
}
#bottom p a {
    color: #999;
}
#bottom p a:hover {
    color: #333;
    text-decoration: none;
}
#bottom hr {
    border: 0;
    height: 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid rgba(97,102,104,0.85);
}
ul.social-icons {
    list-style: none;
    margin-left: 0px;
}
ul.social-icons li {
    display: inline;
    margin-right: 25px;
    line-height: 50px;
}
ul.social-icons li a {
    color: #fff;
    text-decoration: none;
}
ul.social-icons li a:hover {
    color: #333;
    bottom: 12px;
    text-decoration: none;
    transition: all 0.35s ease-in-out;
}
#footer {
    background: #15628D;
    padding-top: 20px;
    padding-bottom: 20px;
}
#footer p {
    color: #fff;
    font-size: 11px;
}
#footer p a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
/* ==========================================================================
   Mobile styles
   ========================================================================== */
/* Landscape phones and down */
@media (max-width: 480px) { 
    body {
        padding-left: 0;
        padding-right: 0;
    }
    .container {
        margin-left: 10px;
        margin-right: 10px;
    }
    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
        margin-left: 0px;
        margin-right: 0px;
    }
    .navbar .nav > li > a {
        padding: 2px 16px;
        margin-top: 20px;
    }
    .navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
        color: #ffffff;
    }
    body .carousel-caption h1 {
        font-size: 40px !important;
        line-height: 38px;
    }
    body .carousel-caption h2 {
        font-size: 34px !important;
        line-height: 38px;
    }
    body .carousel-caption_about h1 {
        font-size: 30px !important;
        line-height: 38px;
    }
    body .carousel-caption_sibe h1 {
        font-size: 30px !important;
        line-height: 38px;
    }
    body .carousel-caption_sitek h1 {
        font-size: 30px !important;
        line-height: 38px;
    }
    body .carousel-caption_assist h1 {
        font-size: 30px !important;
        line-height: 38px;
    }
    body .carousel-caption_analyse h1 {
        font-size: 30px !important;
        line-height: 38px;
    }
    body .carousel-caption_check h1 {
        font-size: 30px !important;
        line-height: 38px;
    }
    .container .carousel-caption {
        max-width: 100%;
        text-align: center;
    }
    .container .carousel-caption_about {
        max-width: 100%;
        text-align: center;
    }
    .container .carousel-caption_sibe {
        max-width: 100%;
        text-align: center;
    }
    .container .carousel-caption_sitek {
        max-width: 100%;
        text-align: center;
    }
    .container .carousel-caption_analyse {
        max-width: 100%;
        text-align: center;
    }
    .container .carousel-caption_check {
        max-width: 100%;
        text-align: center;
    }
    .container .carousel .item {
        height: 480px;
    }
    h2, body #fe_PreviewContent h2 {
        font-size: 30px !important;
        line-height: 36px;
    }
    h3 {
        font-size: 25px !important;
        line-height: 25px;
    }
    p.lead {
        font-size: 18px;
    }
    #content1, #content2, #page-title, #message, #testimonials, #twitter, #latest-work, #services, #latest-news, #bottom {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    #services .row, #latest-work .row, #testimonial .row {
        margin: 0;
    }
    body #latest-news .margin-40 h3, body .margin-40 h3 {margin-right: 0;}
    #latest-work, #latest-news {padding-right: 0;}
    .date-container {
        width: 46px;
        font-size: 16px;
    }
    .day {
        font-size: 29px;
        line-height: 26px;
    }
    .service-icons {
        padding-top: 0px;
        margin-bottom: 40px;
    }
    /*sub-page styles*/
    form p {
        width: auto !important;
        padding-left: 0 !important;
    }
    form label{float: none !important;}
    form p label {
        margin: 0 0 10px 0 !important;
        float: none !important;
    }
    #checkout .left {
        width: auto !important;
        padding: 0;
        float: left;
    }
    #checkout .right {
        padding: 0;
        float: left;
        clear: both;
    }
    textarea[name="code"]{width: 95% !important;}
}
/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) { 
    body {
        padding-left: 0;
        padding-right: 0;
    }
    .carousel .item {
        height: 460px;
    }
    body .container {
        margin-left: 10px;
        margin-right: 10px;
    }
    #services .row, #latest-work .row, #testimonial .row {
        margin: 0;
    }
    #latest-work, #latest-news {padding-right: 0;}
    .container {
        margin-left: 10px;
        margin-right: 10px;
    }
    body .margin-40 h3,body #latest-news .margin-40 h3 {
        margin-right: 0;
    }
    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
        margin-left: 0px;
        margin-right: 0px;
    }
    .navbar .nav > li > a {
        padding: 2px 16px;
        margin-top: 20px;
    }
    .navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
        color: #ffffff;
    }
    body h1 {
        font-size: 40px;
        line-height: 38px;
    }
    .container .carousel-caption {
        max-width: 100%;
        text-align: left;
    }
    .container .carousel-caption_about {
        max-width: 100%;
        text-align: left;
    }
    .container .carousel-caption_sibe {
        max-width: 100%;
        text-align: left;
    }
    .container .carousel-caption_sitek {
        max-width: 100%;
        text-align: left;
    }
    .container .carousel-caption_assist {
        max-width: 100%;
        text-align: left;
    }
    .container .carousel-caption_analyse {
        max-width: 100%;
        text-align: left;
    }
    .container .carousel-caption_check {
        max-width: 100%;
        text-align: left;
    }
    .carousel .item {
        height: 440px;
    }
    h2 {
        font-size: 30px;
        line-height: 36px;
    }
    h3 {
        font-size: 25px;
        line-height: 25px;
    }
    p.lead {
        font-size: 18px;
    }
    #content1, #content2, #page-title, #message, #testimonials, #twitter, #latest-work, #services, #latest-news, #bottom {
        padding-top: 540px;
        padding-bottom: 60px;
    }
    .date-container {
        width: 46px;
        font-size: 16px;
    }
    .day {
        font-size: 29px;
        line-height: 26px;
    }
    .service-icons {
        padding-top: 0px;
        margin-bottom: 40px;
    }
    /*sub-page styles*/

    form p label {
        margin: 0 0 10px 0 !important;
    }
    #checkout .left {
        width: auto !important;
        padding: 0;
        float: left;
    }
    .navbar .nav>li {
        width: 100%;
    }
    #checkout .right {
        padding: 0;
        float: left;
        clear: both;
    }
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
        margin-left: 0px;
        margin-right: 0px;
    }
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive>.table {
        margin-bottom: 0;
    }
    #shop div.message p {
        left: 0;
    }
    .navbar .nav>li {
        width: 100%;
    }
    .navbar .nav > li > a {
        padding: 2px 16px;
        margin-top: 20px;
    }
    .navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
        color: #ffffff;
    }
    #content1, #content2, #page-title, #message, #testimonials, #twitter, #latest-work, #services, #latest-news, #bottom {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    /*sub-page styles*/
    form p {
        width: 100% !important;
        padding-left: 0 !important;
    }
    form p label {
        margin: 0 0 10px 0 !important;
    }
    #checkout .left {
        width: auto !important;
        padding: 0;
        float: left;
    }
    #checkout .right {
        padding: 0;
        float: left;
        clear: both;
    }
}
/* Desktops and laptops ----------- */
@media (min-width: 980px) and (max-width: 1699px) {
}    
/* Large screens ----------- */
@media (min-width: 1700px) and (max-width: 2200px) {
}
@media (max-width: 1169px){
    body{padding-top: 0;}  
    body .navbar-fixed-top,body .navbar-fixed-bottom {
        position: static;
        margin-bottom: 0;
    }
    /**/
    html body .container .navbar-collapse {
        padding-bottom: 10px;
        width: 100% !important;
        max-height: 100%;
    }
    .navbar .nav > li {
        width: 100%;
    }
    .container .navbar-collapse.collapse.in {
        display: block !important;
        clear: both;
        float: none;
    }
    body .navbar .nav {float: left !important;}
    .navbar .navbar-brand {padding: 20px 20px;margin-top: 2px;}
    /**/
    .container .navbar-collapse.collapse {display: none !important;}
    .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
        padding: 5px;
    }
    body .navbar>.container .navbar-brand,body .navbar>.container-fluid .navbar-brand {margin-left: 0;}
    .navbar .container {
        padding: 5px;
        width: auto;
    }
    .btn.btn-navbar.btn-default {
        display: block;
    }
    .navbar-header .navbar-brand {
        margin: 0 0 0 -5px;
        padding: 10px 20px 10px;
        height: auto;
    }
    .navbar .container .row {
        margin: 0;
        margin-left: -15px;
    }
    .nav-collapse, .nav-collapse.collapse {
        height: 0;
        overflow: hidden;
    }
    .collapse.in {
        height: auto;
    }
    .nav-collapse {
        clear: both;
    }
    .navbar .nav-collapse .nav.pull-right {
        float: none;
        margin-left: 0;
    }
    .nav-collapse .nav > li {
        float: none;
    }
    .nav-collapse .nav {
        float: none;
        margin: 0 0 10px;
    }
    .nav-collapse .nav>li>a{margin-bottom:2px;}
    .nav-collapse .nav>.divider-vertical{display:none;}
    .nav-collapse .nav .nav-header{color:#777777;text-shadow:none;}
    .nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:9px 15px;font-weight:bold;color:#777777;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
    .nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    .nav-collapse .dropdown-menu li+li a{margin-bottom:2px;}    
    .nav-collapse.in .btn-group{margin-top:5px;padding:0;}    
    .nav-collapse .open>.dropdown-menu{display:block;}
    .nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none;}
    .nav-collapse .dropdown-menu .divider{display:none;}
    .nav-collapse .nav>li>.dropdown-menu:before,.nav-collapse .nav>li>.dropdown-menu:after{display:none;}
    .navbar .nav > li > a {
        margin-top: 20px;
        padding: 3px 16px;
        display: inline-block;
    }    
    .navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
        color: #FFFFFF;
    }
    .nav-collapse .nav > li > .dropdown-menu:before, .nav-collapse .nav > li > .dropdown-menu:after {
        display: none;
    }
    .nav-collapse .dropdown-menu:before, .nav-collapse .dropdown-menu:after {
        display: none;
    }
    .nav-collapse .nav > li > .dropdown-menu:before, .nav-collapse .nav > li > .dropdown-menu:after {
        display: none;
    }
    .nav-collapse .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: none;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }        
    /*navigation styles*/
    .sf-menu ul {
        background-clip: padding-box !important;
        background-color: transparent !important;
        color: white !important;
        border: 0px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        float: none !important;
        left: 0 !important;
        list-style: none outside none;
        margin: 1px 0 0 !important;
        min-width: 160px;
        padding: 12px;
        position: relative !important;
        top: 100%;
        z-index: 1000;
    }
    .sf-menu ul li a:hover, .sf-menu ul li a.active{color:rgba(49, 54, 58, 0.9) !important;}
}
/*new style*/
.social-media li{
    float: left;
    list-style-type: none;
}
#fe_PreviewContent h2{color:#626C72;font-size: 40px !important;}
#subnavigation, #subnavigation li > ul{
    margin: 0;
    padding: 0;
}
#subnavigation li a, #subnavigation li > ul li a{
    color: #15628D;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    padding: 6px;
}
#subnavigation li > ul li a.active:hover, #subnavigation li a.active:hover{color: #15628D;}
#subnavigation li a:hover, #subnavigation li > ul li a:hover{
    color: #31363A;
}
#subnavigation li{list-style-type: none;}
#subnavigation li.level-1 > a,
#subnavigation li ul {
    display: none;
}
#subnavigation li.level-1 > ul,
#subnavigation li.active > ul {
    display: block;
}
#subnavigation li.level-2 a{display: block;}
.sidebar-block.contact-us a{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background:url('images/btn.jpg')no-repeat;
    color: #FFFFFF;
    float: left;
    padding-top: 12px;
    text-align: center;
    width: 250px;
    height: 42px;
    font-size: 14px;
    font-weight: 800;
}
input[type="text"], input[type="password"], input[type="number"], select, textarea {
    width: 300px;
    padding: 7px 12px 8px 12px;
    height: auto !important;
    margin: 0;
    color: #7D7D7D;
    border: 1px solid #DDD;
    background: white;
    outline: 0;
    display: inline-block;
}
form input[type="radio"], form input[type="checkbox"]{float: left;margin-right: 5px;}
input[type="submit"], input[type="reset"], input[type="button"]{
    background: #15628D repeat scroll 0 0;
    border: none;
    font-weight: 800;
    border-radius: 2px;
    box-shadow: none;
    color: white;
    text-decoration: none;
    text-shadow: none;
    padding: 7px 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    float: none !important;
    width: auto !important;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover{
    background: #DC644B repeat scroll 0 0;
    color: white;
    text-decoration: none;
    transition: all 0.35s ease-in-out;
}
.shop-box{margin: 0;padding: 0;}
.shop-box li{list-style-type: none;}
.shop-box li a, .shop-box li, .shop-box a{
    color: #15628D;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    padding: 6px;
}
.shop-box li a:hover, .shop-box li, .shop-box a:hover{color: #31363A;}
input.input-block-level[type="text"]{width: 220px !important;}
#fe_PreviewContent a:hover{color: #15628D;}

ul li{
    margin: 0;
    /*list-style-type: disc;*/
    font-size: 18px;
    /*margin-left: 40px;*/
    color: #15628D;
}
#news ul li{
    margin: 0;
    list-style-type: none;
    font-size: 18px;
    margin-left: 40px;
    color: #15628D;
}
ol{
    margin: 0;
    list-style-type: disc;
    font-size: 18px;
    margin-left: 40px;
    color: #15628D;
}
h4 ul{
    margin: 0;
    list-style-type: disc;
    padding: 80px;
    line-height: 46px;
}
p ul{
    list-style-type: disc;
    margin-left: 40px;
}


#subnavigation li.active > a.active, #subnavigation li.active > a.active:hover{color:#31363A;}
#subnavigation li.level-3{padding-left: 15px;}
#subnavigation li.level-4{padding-left: 20px;}
ul.horizontal-list li {
    float: left;
    padding: 0 10px 0 0;
    margin: 0 10px 0 0;
    background: url('images/divider.gif') no-repeat right 7px;
}
ul.horizontal-list li.last {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}
h2 span#fe_PreviewTitle{color: #626C72;}
#latest-work .thumbs img{max-width: 100%;}
.nav > li.level-1 > ul.cx-drop-down-open {
    display: block;
}
/*h3.submenu-title, .menu-break{display: none;}*/
#fe_PreviewContent h2, #fe_PreviewContent h3{padding: 18px 0 6px;}
/*Custom*/
.collapse.navbar-collapse {
    float: right;
    width: auto;
}
.carousel .carousel-control {
    position: absolute;
    top: 40%;
    left: 15px;
    width: 40px;
    height: 40px;
}
.carousel .carousel-control.left, .carousel .carousel-control.right {
    background-image: none;
    background-repeat: no-repeat;
}
.carousel .carousel-control.right {
    right: 15px;
}
.carousel-inner .container {
    padding-left: 0;
    padding-right: 0;
}
.margin-40 h3 {margin-right: -60px;}
#latest-news .margin-40 h3 {margin-right: -30px;}
.navbar-header {
    float: left;
}
body .container .navbar-collapse {
    border-top: 1px solid #15628D !important;
    box-shadow: inset 0 1px 0 #15628D;
    padding-left: 15px;
    padding-bottom: 0px;
    width: auto !important;
}
body .navbar-inverse .navbar-toggle:hover,body .navbar-inverse .navbar-toggle:focus {
    background-color: red; /*transparent;*/
}
body .navbar-fixed-top {
    border: 0;
}
body #page-title h2 {
    color: #626C72;
    word-wrap: break-word;
}
.page {
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    color: #a5b2b9;
}
.margin-20 input.form-control {
    width: 220px;
}
.page h2 {
    color: #626C72;
}
.page h2, .page h3 {
    padding: 18px 0 6px;
}
.page a:hover {
    color: #15628D;
}
input[name="submitContactForm"] {
    margin-left: 250px;
}
div#right-login {
    width: 100%;
}
.login-bottom a {
    white-space: normal;
}
#newsletter form select {
    width: 300px;
}
select.form-control.label {
    color: #555;
    font-weight: normal;
}

.project-title{
    color: #000;
    
}

.bannerImage{
    background: url(/themes/Kampagnen/images/header_securitax_about.webp) no-repeat;
    min-height: 950px;
    background: #15628D;
    margin-top: 80px;
}
.more-link{
    color: #999;
}
.more-link.hover{
    color:#BF0F0F;
}

/****************
Accordion FAQ
/****************
/*
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*/

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

.accordion {
  max-width: 100%;
  text-align: left;
}

article {
  border: 1px solid #15628D;
  padding: 0.5em;
  margin: 0.5em auto;
}
article label{
    font-size: 24px;
    ;
}

article input[type="radio"] {
  appearance: none;
  position: fixed;
  top: -100vh; left: -100vh;

  & ~ div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
  }

  &:checked ~ div {
    max-height: 600px;
  }
}
.mySlides {display:none;}

/* Kartenansicht Sicherheitsberater */
.card {
  /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
  transition: 0.3s;
  width: 100%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}
/****************************
/****************************
/* Tool tip */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/****************************
/****************************
/* Card Angebot */
 .Acard {
  position: relative;
  max-width : 100%;
  height : 215px;  
  background-color : #fff;
  margin : 50px 10px;
  padding : 20px 15px;
  
  display : flex;
  flex-direction : column;
  box-shadow : 0 5px 20px rgba(0,0,0,0.5);
  transition : 0.3s ease-in-out;
  border-radius : 15px;
}

.Acard:hover {
  height : 620px;    
}


.Acard .image {
  position : relative;
  width : 260px;
  height : 260px;
  background: transparent;
  top : -18%;
  text-align : center;
  box-shadow : 0 5px 20px rgba(0,0,0,0.2);
  z-index : 1;
}


.Acard .image img {
  max-width : 100%;
  border-radius : 10px;
}


.Acard .content {
  position : relative;
  top : -140px;
  padding : 10px 15px;
  color : #111;
  text-align : center;
  
  visibility : hidden;
  opacity : 0;
  transition : 0.3s ease-in-out;
    
}

.Acard:hover .content {
   margin-top : 30px;
   visibility : visible;
   opacity : 1;
   transition-delay: 0.2s;
  
}


/***************Partnerschafts Accordion ******************/
.accordion h2 {
    color: #0A2540;
    margin-bottom: 30px;
  }

.accordion-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .accordion-step {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .accordion-step label {
    background: white;
    border: 2px solid #0A2540;
    border-radius: 10px;
    width: 140px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #0A2540;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
    animation: none;
  }

  .accordion-step label:hover {
    background: #E0EFFF;
    border-color: #1C3D68;
    animation: pulse 1s infinite;
  }

  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  .accordion-step input[type="radio"] {
    display: none;
  }

  .accordion-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    min-height: 200px;
    margin: 10px auto 0;
    border: 1px solid #ccc;
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .accordion-step input[type="radio"]:checked + label {
    background: #0A2540;
    color: white;
  }

  .accordion-step input[type="radio"]:checked + label + .accordion-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  .cta-button {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 30px;
    background-color: #0A2540;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s;
  }

  .cta-button:hover {
    background-color: #1C3D68;
  }

  @media (max-width: 768px) {
    .accordion-container {
      flex-direction: column;
      align-items: center;
    }

    .accordion-step label {
      width: 110px;
      height: 110px;
      font-size: 15px;
    }
  }
  
  /*********** FAQ Accordion ***************/
  
   .faq-container {
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
  }

  .faq-item {
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  .faq-item input[type="checkbox"] {
    display: none;
  }

  .faq-item label {
    display: block;
    padding: 15px;
    background: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    color: #0A2540;
    transition: background 0.3s;
  }

  .faq-item label:hover {
    background: #E0EFFF;
  }

  .faq-item .faq-answer {
    display: none;
    padding: 20px;
    background: #F0F4F8;
    color: #333333;
    font-size: 16px;
    line-height: 1.5;
  }

  .faq-item input[type="checkbox"]:checked + label + .faq-answer {
    display: block;
  }

  .faq-cta {
    margin-top: 40px;
    background: #EAF4FF;
    padding: 30px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #0A2540;
  }

  .faq-cta a {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 24px;
    background-color: #0A2540;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s;
  }

  .faq-cta a:hover {
    background-color: #1C3D68;
  }
  
  /*********** Logo Slider ***************/
   .Logoslider {
    overflow: hidden;
    position: relative;
    width: 100%;
    background: transparent;
    margin-bottom: 40px;
  }

  .Logoslide-track {
    display: flex;
    width: calc(250px * 14);
    animation: scroll 40s linear infinite;
  }

  .Logoslide {
    width: 250px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

  .Logoslide img {
    max-width: 150px;
    max-height: 85px;
    filter: grayscale(100%);
    transition: filter 0.3s, transform 0.3s;
  }

  .Logoslide img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
  }

  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7)); }
  }

  /* Versteckter Experten-Slider */
  .experten-slider {
    display: block;
  }

  @media (max-width: 768px) {
    .Logoslide {
      width: 150px;
      height: 80px;
    }
    .Logoslide img {
      max-width: 120px;
      max-height: 60px;
    }
  }
  
/*************************
/**Contrast Bereich - Landing Kevin
**************************/
.contrast-section h2 {
text-align: center;
font-size: 40px;
color: #1f2937;
}
.contrast-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.contrast-box {
background: white;
padding: 2rem;
border-radius: 0.75rem;
box-shadow: 0 8px 16px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 5px solid #ef4444;
}
.contrast-box:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
/*.contrast-box h3 {
font-size: 1.4rem;
margin-bottom: 0.5rem;
color: #b91c1c;
}
.contrast-box p {
color: #374151;
font-size: 1.1rem;
line-height: 1.6;
}*/

/*************************
/**Situations Bereich - Landing Kevin
**************************/
.situation-box {
background: white;
border-left: 5px solid #0ea5e9;
border-radius: 0.5rem;
padding: 2rem;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
max-width: 100%;
margin: 0 auto;
}


/*************************
/**Trust Bereich - Landing Kevin
**************************/
.trust-section img {
width: 160px;
margin-bottom: 1.5rem;
}
.trust-section .quote {
font-style: italic;
margin-top: 1rem;
font-size: 1.5rem;
color: #fff;
}
.trust-section h2 {
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 46px;
    color: #fff;
    word-wrap: break-word;
}
.trust-section p {
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 30px !important;
  color: #fff;
  font-size: 18px;
}
/*************************
/**Sicherheitspakete Bereich - Landing Kevin
**************************/
.box-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 2rem;
}
@media (max-width: 768px) {
.box-grid {
grid-template-columns: 1fr;
}
}
    .box-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* genau 2 Spalten */
      gap: 2rem;
      margin-top: 2rem;
    }

    @media (max-width: 768px) {
      .box-grid {
        grid-template-columns: 1fr; /* auf kleineren Geräten: 1 Spalte */
      }
    }

    .box {
      background: white;
      padding: 2rem;
      border-radius: 0.75rem;
      box-shadow: 0 8px 16px rgba(0,0,0,0.05);
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      width: 100%;
    }

    .box:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    }

.box.grey { border-top: 5px solid #605E63; }
.box.blue { border-top: 5px solid #587096; }
.box.brown { border-top: 5px solid #44312A; }
.box.red { border-top: 5px solid #4C2329; }

/*************************
/**Steps Bereich - Landing Kevin
**************************/
.steps-section {
max-width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
gap: 2rem;
text-align: center;
}/*
.step-box {
background: white;
border-radius: 0.5rem;
padding: 2rem;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
border-top: 4px solid #2563eb;
}*/
.steps-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.step-box {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 8px 16px rgba(0,0,0,0.05);
  border-top: 5px solid #2563eb;
  width: 100%;
  max-width: 350px;
  box-sizing: border-box;
  text-align: center;
}

.step-box span img {
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
}

.step-box h3 {
  font-size: 20px;
  color: #1e3a8a;
  margin-bottom: 0.75rem;
}

.step-box p {
  font-size: 18px;
  color: #374151;
  line-height: 1.5;
}


/*************************
/**FAQ Bereich - Landing Kevin
**************************/
.accordion {
max-width: 100%;
margin: 0 auto;
}
    .accordion-item {
      background: white;
      margin-bottom: 1rem;
      border-left: 5px solid #2563eb;
      border-radius: 0.5rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      overflow: hidden;
    }
    .accordion input[type="radio"] {
      display: none;
    }
    .accordion label {
      display: flex;
      /*justify-content: space-between;
      align-items: center;*/
      padding: 1rem 1.5rem;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s;
    }
    .accordion label:hover {
      background: #e0e7ff;
    }
    .accordion .content {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.5s ease, opacity 0.5s ease;
      padding: 0 1.5rem;
      background: #e0e7ff;
    }
    .accordion input[type="radio"]:checked ~ .content {
      max-height: 300px;
      padding: 1rem 1.5rem;
      opacity: 1;
    }

/*************************
/**testimonials Bereich - Landing Kevin
**************************/
.testimonials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.testimonial {
background: white;
padding: 1.5rem;
border-radius: 0.75rem;
box-shadow: 0 6px 12px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.testimonial img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 1rem;
border: 3px solid #93c5fd;
}


/*************************
/**Neuer Testimonial-Stil für Sicherheits-Check Landingpage
**************************/

.testimonial-box {
  background: #ffffff;
  border-left: 6px solid #15628D;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  margin-bottom: 2rem;
  position: relative;
}

.testimonial-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.testimonial-box::before {
  content: "\201C";
  font-size: 4rem;
  color: rgba(21, 98, 141, 0.1);
  position: absolute;
  top: -20px;
  left: 20px;
}

.testimonial-box blockquote {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #374151;
  font-style: italic;
  position: relative;
  z-index: 1;
}

.testimonial-box .author {
  margin-top: 1rem;
  font-weight: bold;
  color: #15628D;
  font-size: 1rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .testimonial-box {
    padding: 1.5rem;
  }
  .testimonial-box::before {
    font-size: 3rem;
  }
}
/*************************
/**Freebie Bereich - Landing Kevin
**************************/
.freebie-box {
max-width: 100%;
margin: 0 auto;
background: #fff;
border-radius: 0.75rem;
padding: 3rem 2rem;
box-shadow: 0 8px 16px rgba(0,0,0,0.07);
border-left: 5px solid #0ea5e9;
}

/*************************
/**CTA Bereich - Landing Kevin
**************************/
.cta-box {
max-width: 100%;
margin: 0 auto;
background: white;
border-radius: 0.75rem;
padding: 3rem 2rem;
box-shadow: 0 8px 16px rgba(0,0,0,0.07);
border-left: 5px solid #2563eb;
}
    }  
    
    
/*************************
/**Starterpaket - Landing Kevin
**************************/    
    .container {
      max-width: 960px;
      margin: 0 auto;
      padding: 2rem;
    }
    .hero {
      background: linear-gradient(to right, #2563eb, #1e3a8a);
      color: white;
      text-align: center;
      padding: 4rem 2rem;
    }
    .hero h1 {
      font-size: 2.5rem;
    }
    .hero p {
      font-size: 1.2rem;
      margin: 1rem 0 2rem;
    }
    .btn-primary {
      background: #10b981;
      color: white;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      text-decoration: none;
      font-weight: bold;
      font-size: 20px;
      transition: background 0.3s;
      display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 20px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    }
    .btn-primary:hover {
      background: #059669;
    }
    h2 {
      font-size: 1.8rem;
      margin-bottom: 1rem;
      color: #111827;
    }
    ul.features, ul.reasoning {
      list-style: none;
      padding: 0;
    }
    ul.features li, ul.reasoning li {
      margin-bottom: 0.75rem;
      padding-left: 2.5rem;
      position: relative;
      list-style: none;
    }
    ul.features li::before, ul.reasoning li::before {
      content: '✔';
      position: absolute;
      left: 0;
      color: #10b981;
      font-weight: bold;
      list-style: none;
    }
    .highlight-box {
      background: white;
      border-left: 5px solid #10b981;
      padding: 2rem;
      margin: 2rem 0;
      border-radius: 0.75rem;
      box-shadow: 0 8px 16px rgba(0,0,0,0.05);
    }
    .two-col {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      align-items: start;
    }
    .two-col img {
      max-width: 100%;
      border-radius: 0.5rem;
    }
    .proof {
      background: #ffffff;
      padding: 2rem;
      border-left: 5px solid #60a5fa;
      margin: 2rem 0;
      border-radius: 0.5rem;
      box-shadow: 0 6px 12px rgba(0,0,0,0.05);
    }
    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
    }
    .testimonial {
      background: #fff;
      padding: 1.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 6px 12px rgba(0,0,0,0.05);
    }
    .testimonial img {
      width: 100%;
      border-radius: 0.5rem;
      margin-bottom: 0.75rem;
    }
    .faq-section {
      background: #ffffff;
      padding: 2rem;
      border-radius: 0.5rem;
      box-shadow: 0 6px 12px rgba(0,0,0,0.05);
    }
    .faq-section details {
      margin-bottom: 1rem;
      border-left: 5px solid #2563eb;
      padding-left: 1rem;
    }
    .faq-section summary {
      font-weight: bold;
      cursor: pointer;
    } 
    
    
/*************************************
/*** Landing Starter Paket - Pakete
/************************************/
.container-pakete {
  margin: 2rem 0;
}

.pakete-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.paket-main {
  flex: 0 0 60%;
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  text-align: center;
}

.paket-main img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.paket-main h3 {
 /* font-size: 1.5rem;*/
  color: #15628D;
}
.paket-main p{
    
}
.paket-main .preis {
  font-size: 24px;
  font-weight: bold;
  color: red;
  margin: 1rem 0;
  margin-top: 0px;
}

.paket-main .btn {
  background: #1e3a8a;
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 0.5rem;
  text-decoration: none;
}

.paket-alternativen {
  flex: 0 0 36%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.alt-box {
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.alt-box img {
  max-width: 100%;
  height: auto;
  border-radius: 0.4rem;
  margin-bottom: 0.5rem;
}

.alt-box .alt-info h4 {
  margin: 0;
  font-size: 1rem;
  color: #1e3a8a;
  font-size: 20px;
  text-align: center;
}
/* Hover-Effekt */
.alt-box:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid #2563eb;
}

/* Aktives Paket markieren */
.alt-box.active {
  border: 3px solid #1e40af;
  background-color: #eff6ff;
  box-shadow: 0 0 0 3px #60a5fa33;
}

.alt-box.active .alt-info h4 {
  font-weight: bold;
  color: #1e40af;
  font-size: 20px;
}
.alt-badge {
  display: block;
  background: red;
  color: white;
  font-size: 20px;
  text-align: center;
  font-size: 18px;
  /*font-size: 0.75rem;*/
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  margin-top: 0.3rem;
}

@media (max-width: 768px) {
  .pakete-grid {
    flex-direction: column;
  }
  .paket-main,
  .paket-alternativen {
    flex: 1 1 100%;
  }
}


/* ==========================================================================
   AJAX Styles
   ========================================================================== */
.section-intro {
   /* font-size: 1.8rem;*/
    color: #dddddd;
    margin: 0 auto 2rem auto;
    max-width: 100%;
}
p .sectionintro {
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 30px !important;
  color: #15628D;
  font-size: 18px;
}
.box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.box {
    /*background: #1B395E;*/
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
    /*color: #fff;*/
}
.box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.box h3 {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 28px;
  color: #000;
}
.box p {
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 30px !important;
  color: #000;
  font-size: 18px;
}
    
/* BUTTON-STYLES ANIMIERT IN BOXEN */
.box a.cta-link {
  display: inline-block;
  font-size: 1.8rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #fcd535;
  color: #0A2540;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  animation: pulseButton 2s infinite;
  transition: transform 0.2s;
}

.box a.cta-link:hover {
  transform: scale(1.05);
  background-color: #d3e7ff;
}

@keyframes pulseButton {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}	
	
@keyframes fadeInUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.trust-box.white-box {
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  height: 100%;
}

.trust-box.white-box:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.faq-item {
  background: #132C4A;
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.4s ease;
}
.faq-answer {
  max-height: 100px;
  /*overflow: hidden;*/
  transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
  max-height: 300px;
  padding-top: 0.5rem;
}
.faq-question {
  font-weight: bold;
  padding: 1rem;
  background: #1B395E;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.icons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.icon-box {
      Font-family: 'Open Sans', sans-serif;
      border: 2px solid #fff;
      border-color: #fff;
      /*background: #1B395E; */
      padding: 1rem 2rem; 
      border-radius: 12px; 
      text-align: center;
      min-width: 130px; 
      font-size: 1.8rem;
      color: #fff;
    }

/* PRODUKT-SLIDER STYLES – ENDLOS, RESPONSIV, HALBBREITE */
.slider-container.compact {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: 2rem;
}

.slider-track.compact {
  display: flex;
  width: max-content;
  animation: scrollCompact 12s linear infinite;
}

.slider-item.compact {
  flex: 0 0 130px;
  margin-right: 1rem;
  background: #fff;
  border-radius: 10px;
  padding: 0.8rem;
  text-align: center;
  transition: transform 0.3s;
}

.slider-item.compact img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.slider-item.compact:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

@keyframes scrollCompact {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .slider-item.compact {
    flex: 0 0 40vw;
  }
}
@media (max-width: 480px) {
  .slider-item.compact {
    flex: 0 0 60vw;
  }
}

	
/* TESTIMONIALS INTERAKTIV */
.testimonial {
  /*background: #132C4A;*/
  padding: 1.5rem;
  border-radius: 12px;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.4s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.testimonial:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  /*background: #1d4b75;*/
}

.testimonial::before {
  content: "\201C";
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.05);
  position: absolute;
  top: -20px;
  left: 10px;
  z-index: 0;
}
.testimonials .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 992px) {
  .testimonials .box-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
.testimonial img {
  width: 60px;
  height: 60px;
  border-radius: 5%;
  margin-bottom: 0.5rem;
  z-index: 1;
  position: relative;
}

.testimonial h3, .testimonial p {
  position: relative;
  z-index: 1;
}
    .slider-item {
      flex: 0 0 50%;
      padding: 1rem;
      text-align: center;
      background: #fff;
      border-radius: 12px;
      margin-right: 1rem;
    }
    @media (max-width: 768px) {
      .box-container { grid-template-columns: repeat(2, 1fr); }
      .slider-item { flex: 0 0 80%; }
    }
    @media (max-width: 480px) {
      .box-container { grid-template-columns: 1fr; }
      .slider-item { flex: 0 0 100%; }
    }
/* FREEBIE CTA BUTTON OPTISCH AUFWERTEN */
.freebie .cta-button {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.8rem;
  font-weight: bold;
  color: #0A2540;
  background-color: #fcd535;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 1.5rem;
  animation: pulseGlow 1.8s infinite;
  box-shadow: 0 0 0 0 rgba(252, 213, 53, 0.7);
  transition: transform 0.3s ease;
}

.freebie .cta-button:hover {
  transform: scale(1.05);
  background-color: #ffe580;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(252, 213, 53, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(252, 213, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(252, 213, 53, 0); }
}
/* CSS für AJAX FAQ Akkordeon */

.ajax-faq-accordion .ajax-faq-item {
  background-color: #132C4A;
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.ajax-faq-accordion input[type="radio"] {
  display: none;
}

.ajax-faq-question {
  display: block;
  padding: 1rem;
  cursor: pointer;
  font-weight: bold;
  font-size:20px;
  color: #ffffff;
  background-color: #1B395E;
  transition: background 0.3s ease;
}

.ajax-faq-question:hover {
  background-color: #224d73;
}

.ajax-faq-answer {
  padding: 0 1rem;
  max-height: 0;
  overflow: hidden;
  color: #cccccc;
  transition: max-height 0.4s ease, padding 0.3s ease;
  font-size:20px;
}

.ajax-faq-item input[type="radio"]:checked ~ .ajax-faq-answer {
  max-height: 300px;
  padding: 1rem;
}
/* CTA-BUTTON STARK FÜR KEVIN-BLOCK */
.kevin2 .cta-link {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #0A2540;
  background-color: #4afff0;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 1.5rem;
  animation: pulseKevin 1.8s infinite;
  box-shadow: 0 0 0 0 rgba(74, 255, 240, 0.7);
  transition: transform 0.3s ease;
}

.kevin2 .cta-link:hover {
  transform: scale(1.07);
  background-color: #7cfff6;
}

@keyframes pulseKevin {
  0% { box-shadow: 0 0 0 0 rgba(74, 255, 240, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(74, 255, 240, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 255, 240, 0); }
}	
.cta-link-gespraech {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.8rem;
  font-weight: bold;
  background-color: #00d1ff;
  color: #0A2540;
  border-radius: 10px;
  text-decoration: none;
  animation: pulseGespräch 1.8s infinite;
  box-shadow: 0 0 0 0 rgba(0, 209, 255, 0.6);
  transition: transform 0.3s ease;
}
.cta-link-gespraech:hover {
  transform: scale(1.05);
  background-color: #66e5ff;
}
@keyframes pulseGespräch {
  0% { box-shadow: 0 0 0 0 rgba(0, 209, 255, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(0, 209, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 209, 255, 0); }
}

.cta-link-offerte {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.8rem;
  font-weight: bold;
  background-color: #fcd535;
  color: #0A2540;
  border-radius: 10px;
  text-decoration: none;
  animation: pulseOfferte 2s infinite;
  box-shadow: 0 0 0 0 rgba(252, 213, 53, 0.5);
  transition: transform 0.3s ease;
}
.cta-link-offerte:hover {
  transform: scale(1.05);
  background-color: #ffe68a;
}
@keyframes pulseOfferte {
  0% { box-shadow: 0 0 0 0 rgba(252, 213, 53, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(252, 213, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(252, 213, 53, 0); }
}
#BGContent{
  background: linear-gradient(120deg, #79616F, #0D0F11);/*99C4EF*/
  background-attachment: fixed;
  background-size: 400% 400%;
  animation: backgroundPulse 30s ease infinite;
  color: #f5f5f5;
}
@keyframes backgroundPulse {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/*****************************
/***** Kundenstimmen home
/****************************/
.slider-testimonial {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider-track {
  display: flex;
  animation: scrollSlider 60s linear infinite;
  width: max-content;
  gap: 2rem;
}

.testimonial-box {
  flex: 0 0 300px;
  background: #ffffff;
  border-left: 6px solid #15628D;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  margin: 0 1rem;
  box-sizing: border-box;
}

.testimonial-box blockquote {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #374151;
  font-style: italic;
}

.testimonial-box .author {
  margin-top: 1rem;
  font-weight: bold;
  color: #15628D;
  font-size: 1rem;
}

@keyframes scrollSlider {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.icon-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  margin-top: 30px;
}
.icon-item {
  text-align: center;
}
.icon-item img {
  max-width: 60px;
  margin-bottom: 10px;
}

.icon-grid-4x1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

/******************
Lösungsspur home
********************/
.loesung-box {
  margin: 60px 0;
}

.loesung-box .text-col {
  padding: 0px 0px 30px 30px;
}

@media (max-width: 767px) {
  .row.row-reverse {
    flex-direction: column;
  }
}
.img-col {
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  min-height: 320px;
}

.text-col {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 768px) {
  .row {
    flex-direction: column !important;
  }
}

.section-boxed {
  background-color: #DDE7F2;
  padding: 60px 20px;
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(0,0,0,0.05);
  margin-bottom: 60px;
}

.faq-list details {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 15px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
}

.faq-list summary {
  font-weight: bold;
  cursor: pointer;
  padding-bottom: 10px;
}

.faq-list details[open] {
  box-shadow: 0 0 20px rgba(0,0,0,0.07);
}

/************************************
/****** AJAX Einbruch
/***************************************/
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-buttons .btn {
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #0073ff;
  color: #fff;
}

.btn-primary:hover {
  background-color: #005fce;
}

.btn-secondary {
  background-color: #8B242A;
  border: 1px solid #0073ff;
  color: #ffffff;
  font-size: 20px;
}

.btn-secondary:hover {
  background-color: #B76365;
  color: #fff;
}
/* === SECTION 2: DIE GEFAHR === */
.section-gefahr {
  background-color: #12151a;
  padding: 80px 0;
  color: #ffffff;
  text-align: center;
}

.section-title {
  /*font-size: 2.2rem;*/
  font-size: 34px;
  font-weight: 300;
  margin-bottom: 10px;
  color: #ffffff;
}

.section-intro {
  font-size: 20px;
  color: #bbbbbb;
  margin-bottom: 50px;
}

.gefahr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  justify-items: center;
}

.gefahr-box {
  background-color: #1b1f26;
  border-radius: 14px;
  padding: 30px 20px;
  max-width: 320px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.gefahr-box:hover {
  transform: translateY(-5px);
}

.gefahr-box img {
  width: 50px;
  margin-bottom: 15px;
}

.gefahr-box h3 {
  font-size: 24pxrem;
  margin-bottom: 10px;
  color: #00b0ff;
}

.gefahr-box p {
  font-size: 20px;
  color: #cccccc;
}
/* === SECTION 3: DIE LÖSUNG === */
.section-loesung {
  background-color: #0e1116;
  padding: 80px 0;
  color: #ffffff;
  text-align: center;
}

.section-loesung .section-title {
  /*font-size: 2.2rem;*/
  font-size: 34px;
  font-weight: 300;
  margin-bottom: 10px;
}

.section-loesung .section-intro {
  font-size: 20px;
  color: #bbbbbb;
  margin-bottom: 50px;
}

.loesung-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  justify-items: center;
}

.loesung-box {
  background-color: #1a1d23;
  border-radius: 14px;
  padding: 30px 20px;
  max-width: 320px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}

.loesung-box:hover {
  transform: translateY(-5px);
}

.loesung-box img {
  width: 52px;
  margin-bottom: 15px;
}

.loesung-box h3 {
  font-size: 34px;
  margin-bottom: 10px;
  color: #00b0ff;
}

.loesung-box p {
  font-size: 20px;
  color: #cccccc;
}

/* === SECTION 4: KONFIGURATOR === */
.section-konfigurator {
  background-color: #12151a;
  padding: 80px 0;
  color: #ffffff;
  text-align: center;
}

.section-konfigurator .section-title {
  font-size: 34px;
  font-weight: 300;
  margin-bottom: 10px;
}

.section-konfigurator .section-intro {
  font-size: 20px;
  color: #bbbbbb;
  max-width: 800px;
  margin: 0 auto 40px;
}

.konfigurator-box {
  background-color: #1c1f25;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
  color: #cccccc;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.konfigurator-box p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.konfigurator-box .btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  background-color: #0073ff;
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease;
}

.konfigurator-box .btn:hover {
  background-color: #005fcc;
}

.konfigurator-frame iframe {
  width: 100%;
  height: 600px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* === SECTION 5: PRODUKTEMPFEHLUNGEN === */
.section-produkte {
  background-color: #0b0e13;
  padding: 80px 0;
  color: #ffffff;
  text-align: center;
}

.section-produkte .section-title {
  font-size: 34px;
  font-weight: 300;
  margin-bottom: 10px;
}

.section-produkte .section-intro {
  font-size: 20px;
  color: #bbbbbb;
  max-width: 800px;
  margin: 0 auto 50px;
}

.produkte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  justify-items: center;
}

.produkt-box {
  background-color: #1a1d23;
  border-radius: 14px;
  padding: 20px;
  text-align: left;
  max-width: 320px;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  cursor: pointer;
}

.produkt-box:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 16px rgba(0,0,0,0.35);
}

.produkt-box img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 15px;
}

.produkt-box h3 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 8px;
}

.produkt-box p {
  font-size: 12px;
  color: #bbbbbb;
  margin-bottom: 20px;
  line-height: 1.6;
}

.center-btn {
  margin-top: 40px;
}
.produkt-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.95rem;
  color: #00b0ff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.produkt-link:hover {
  color: #66cfff;
  text-decoration: underline;
}
.center-btn .btn-primary {
  background-color: #0073ff;
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.3s ease;
}

.center-btn .btn-primary:hover {
  background-color: #005fcc;
}
/* === SECTION 6: CTA === */
.section-cta {
  background-color: #12151a;
  padding: 80px 0;
  color: #ffffff;
  text-align: center;
}

.section-cta .section-title {
  font-size: 34px;
  font-weight: 300;
  margin-bottom: 10px;
}

.section-cta .section-intro {
  font-size: 20px;
  color: #bbbbbb;
  max-width: 800px;
  margin: 0 auto 50px;
}

.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  justify-items: center;
}

.cta-box {
  background-color: #1a1d23;
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
  text-align: center;
  max-width: 100%;
}

.cta-box:hover {
  transform: translateY(-6px);
}

.cta-box img {
  width: 60px;
  margin-bottom: 20px;
}

.cta-box h3 {
  font-size: 34px;
  color: #00b0ff;
  margin-bottom: 15px;
}

.cta-box p {
  font-size: 20px;
  color: #cccccc;
  margin-bottom: 25px;
}

.cta-box .btn {
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
}

.btn-primary {
  background-color: #0073ff;
  color: #fff;
}

.btn-primary:hover {
  background-color: #005fcc;
}

.btn-secondary {
  background-color: #8B242A;
  border: 1px solid #0073ff;
  color: #ffffff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 20px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn-secondary:hover {
  background-color: #B91A25;
}
/* === SECTION 7: FAQAJAX === */
.section-faqajax {
  background-color: #0b0e13;
  padding: 80px 0;
  color: #ffffff;
  text-align: center;
}

.faqajax-title .section-title{
  font-size: 34px;
  font-weight: 300;
  margin-bottom: 40px;
}

.faqajax-accordion {
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.faqajax-item input[type="radio"] {
  display: none;
}

.faqajax-question {
  display: block;
  background: #1a1d23;
  padding: 15px 20px;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  cursor: pointer;
  position: relative;
  border-radius: 8px;
  margin-bottom: 8px;
}

.faqajax-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #fff;
}

.faqajax-item input[type="radio"]:checked + .faqajax-question::after {
  content: "–";
}

.faqajax-answer {
  max-height: 0;
  overflow: hidden;
  background: #12151a;
  color: #ccc;
  padding: 0 20px;
  border-left: 2px solid #8B242A;
  transition: max-height 0.3s ease, padding 0.3s ease;
  border-radius: 0 0 8px 8px;
}
.faqajax-answer p {
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 30px !important;
  color: #fff;
  font-size: 18px;
}
.faqajax-item input[type="radio"]:checked + .faqajax-question + .faqajax-answer {
  max-height: 300px;
  padding: 20px;
}
.section-scenario-engine {
  padding: 80px 0;
  background-color: #12151a;
  color: #ffffff;
  text-align: left;
}

.scenario-benefits {
  list-style: none;
  padding: 0;
  margin: 30px auto 0;
  max-width: 700px;
  color: #bbbbbb;
}
.section-scenario-engine p {
  font-size: 20px;
  color: #bbbbbb;
  margin-bottom: 20px;
  line-height: 1.6;
}
.scenario-benefits li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
}

.scenario-benefits li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #00d084;
}

/* === SECTION 8: KEVIN === */
.section-kevin {
  background-color: #0e1116;
  padding: 80px 0;
  color: #ffffff;
}

.kevin-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.kevin-text {
  flex: 1 1 480px;
  max-width: 600px;
}

.kevin-text h2 {
  font-size: 34px;
  margin-bottom: 20px;
  color: #fff;
}

.kevin-text p {
  font-size: 20px;
  color: #bbbbbb;
  margin-bottom: 20px;
  line-height: 1.6;
}

.kevin-text ul {
  list-style: disk;
  padding: 0;
  margin-bottom: 30px;
}

.kevin-text li {
  margin-bottom: 10px;
  font-size: 20px;
  color: #bbbbbb;
}

.kevin-cta .btn {
  margin-right: 15px;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.3s ease;
  display: inline-block;
}
/*
.kevin-cta .btn-primary {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}

.kevin-cta .btn-primary:hover {
  background-color: #005fcc;
}

.kevin-cta .btn-secondary {
  background-color: #1e1f26;
  border: 1px solid #0073ff;
  color: #ffffff;
}

.kevin-cta .btn-secondary:hover {
  background-color: #2a2b33;
}
*/
.kevin-image {
  flex: 1 1 400px;
  max-width: 480px;
  text-align: center;
}

.kevin-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 14px rgba(0,0,0,0.4);
}

.trust-box.white-box {
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  height: 100%;
}

.trust-box.white-box:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}


/* Wrapper für diese spezielle CTA-Zone */
.cta-duo-wrapper {
  padding: 60px 0;
  background-color: #ffffff;
}

.cta-duo-headline {
  font-size: 2rem;
  margin-bottom: 10px;
}

.cta-duo-subline {
  font-size: 1.2rem;
  margin-bottom: 40px;
}

/* Beratung */
.cta-box-beratung {
  background-color: #f5f8fa;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  border-top: 5px solid #605E63;
}

/* Freebie */
.cta-box-freebie {
  background-color: #fdf6ec;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  border-top: 5px solid #605E63;
}

/* Buttons */
.cta-btn-group {
  text-align: center;
  margin: 20px 0;
}

.cta-btn {
  display: inline-block;
  background-color: #0051a2;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.cta-btn:hover {
  background-color: #003f7d;
}

/*********************************
/**** About
/********************************/
.section-dark { background: #2b2b2b; color: #fff; padding: 3.5rem 2rem; }
.section-dark h2 {color:#fff;}
    .section-light { background: #fff; padding: 3.5rem 2rem; }
    .section-cta-dark { background: #111; color: #fff; padding: 3.5rem 2rem; }
    .lead { font-size: 1.4rem; margin-top: 1rem; font-weight: 300; }
    .lead_small { font-size: 1rem; margin-top: 1rem; font-weight: 300; color:#fff;}
    .row { display: flex; flex-wrap: wrap; margin: -1rem; }
    .col-md-6, .col-md-4 { padding: 0rem; flex: 1; min-width: 280px; }
    .img-fluid { max-width: 100%; height: auto; border-radius: 16px; }
    .btn-primary { background: #007bff; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 8px; font-size: 1.1rem; text-decoration: none; display: inline-block; }
    .btn-primary:hover { background: #0056b3; }
    ul.checklist { list-style: none; padding: 0; }
    ul.checklist li::before { content: "✔ "; color: #28a745; }
    blockquote { border-left: 4px solid #007bff; padding-left: 1rem; font-style: italic; margin: 2rem auto; }
      .value-box {
    background: #ffffff;
    padding: 2rem;
    border-radius: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-bottom: 5px solid #999;
  }
  .value-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  
/*****************************
/******* Yale Landing
/*****************************/
.yale-bg_content {
  background: url('images/yale_bg.png') no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
}
.yale-transparent-box {
  background: rgba(255, 255, 255, 0.85); /* fast weiß mit Transparenz */
  padding: 2rem;
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.yale-blur-box {
  background: rgba(255, 255, 255, 0.2); /* halbtransparent */
  backdrop-filter: blur(8px); /* Weichzeichner */
  -webkit-backdrop-filter: blur(8px); /* Safari-Support */
  padding: 2rem;
  border-radius: 1px;
  box-shadow: 0 0 12px rgba(0,0,0,0.15);
}
    .yale-section {
      padding: 40px 20px;
    }

    .yale-section-title{
        color: #000;
    }
    .yale-section-intro {
        font-size: 20px;
        color: #000;
        margin-bottom: 50px;
}
    .btn-primary-yale{
      background-color: #000;
      color: #fff;
      padding: 12px 24px;
      text-decoration: none;
      border-radius: 6px;
    }
	.btn-primary-yale a{
      background-color: #000;
      color: #fff;
      padding: 12px 24px;
      text-decoration: none;
      border-radius: 6px;
    }
	.btn-primary-yale a:hover{
      background-color: #000;
      color: #f2c100;
      padding: 12px 24px;
      text-decoration: none;
      border-radius: 6px;
    }
    .yale-triple-box-section {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      padding: 60px 20px;
    }
    .yale-box {
      flex: 1;
      min-width: 300px;
      max-width: 400px;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }
    .yale-box:hover {
      transform: scale(1.02);
    }
    .yale-box-schmerz {
      background-color: #f1f1f1;
      color: #000;
	  border: 2px solid #f2c100;
    }
    .yale-box-wunsch {
      background-color: #f2c100;
      color: #000;
    }
    .yale-box-loesung {
      background-color: #fff;
      color: #000;
      border: 2px solid #f2c100;
    }
    .yale-box h3 {
      font-size: 20px;
      margin-bottom: 15px;
    }
    .yale-box ul {
      padding-left: 20px;
    }
    .yale-box ul li {
      margin-bottom: 10px;
    }
	.yale-arrow-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
.yale-arrow {
  width: 60px;
  height: auto;
  opacity: 0.4;
}
  .yale-product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
  .yale-product-box-yellow {
    background: #f2c100;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    width: 260px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #000;
  }
  .yale-product-box-yellow:hover {
    transform: translateY(-5px);
  /*   flex: 1 1 300px;
  max-width: 320px;
  text-align: center;
  background: #fffbe6;
  padding: 20px;
  border-radius: 12px;*/
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }
  .yale-product-box-yellow img {
    max-width: 100%;
    border-radius: 8px;
  }
  .yale-product-box-yellow h3 {
    margin-top: 15px;
    font-size: 18px;
    color:#000;
  }
  .yale-product-box-yellow p {
    font-size: 15px;
    color:#000;
  }
  .yale-product-box-yellow a {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    text-decoration: none;
    color: #f2c100;
  }

/*******************************/
/**********Benefit Testimonila
/*******************************/
.yale-section-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #222;
}

.yale-section-intro {
  font-size: 1.2rem;
  color: #333;
}

.benefit-icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 25px;
}

.icon-circle {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefit-icon-box h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 20px;
}

.testimonial-bubble {
  background: #fff;
  padding: 15px 20px;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  font-style: italic;
  color: #444;
  font-size: 0.95rem;
  max-width: 250px;
  margin: 0 auto;
  font-size: 16px;
}

.testimonial-bubble strong {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-weight: 600;
  color: #111;
}


/********************************
/********FAQ
/********************************/
.faq-yale {
  max-width: 85%;
  margin: 0 auto;
  padding: 40px 20px;
}

.faq-yale .section-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
  color: #000;
}

.faq-yale-item {
  margin-bottom: 10px;
  border: 1px solid #ffd700;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fffdf5;
}

.faq-yale-label {
  display: block;
  padding: 15px 20px;
  font-weight: bold;
  background-color: #ffcc00;
  color: #000;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

.faq-yale-label:hover {
  background-color: #ffd633;
}

.faq-yale-label::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
}

.faq-yale-item input[type="checkbox"] {
  display: none;
}

.faq-yale-item input[type="checkbox"]:checked + .faq-yale-label::after {
  content: "–";
}

.faq-yale-content {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height 0.3s ease;
  padding: 0 20px;
}

.faq-yale-item input[type="radio"] {
  display: none;
}

.faq-yale-item input[type="radio"]:checked + .faq-yale-label::after {
  content: "–";
}

.faq-yale-item input[type="radio"]:checked ~ .faq-yale-content {
  max-height: 300px;
  opacity: 1;
  transform: scaleY(1);
  padding: 15px 20px;
} 

/* Hauptbereich Yale Ablauf */
.yale-section {
  padding: 60px 0px;
  /*ackground-color: #f9f9f9;*/
}

.yale-section-title {
  font-size: 2em;
  margin-bottom: 20px;
  text-align: center;
}

.yale-section-intro {
  font-size: 18px;
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

/* Ablaufbox Container */
.yale-process-box {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border-bottom: 6px solid #222;
}

/* Textbereich */
.yale-process-text {
  flex: 1;
  min-width: 300px;
  padding: 40px;
  color:#000;
}

.yale-process-text ul {
  list-style: none;
  padding-left: 0;
  line-height: 1.8;
  font-size: 17px;
}

.yale-process-text li {
  text-align: left;
  color: #000;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.yale-process-text li img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.yale-process-text li strong {
  display: inline-block;
}

.yale-process-text span {
  font-size: 15px;
  color: #444;
  display: block;
  margin-top: 4px;
}

.yale-process-text p {
  margin-top: 12px;
  font-style: italic;
  font-size: 16px;
  text-align: left;
  color:#000;
}

/* Bildbereich */
.yale-process-image {
  flex: 1;
  min-width: 300px;
  background: #f2c100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yale-process-image img {
  width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 768px) {
  .yale-process-box {
    flex-direction: column;
  }
}

/************************************
/*****Summer Aktion Leasing
/***********************************/
.sommerfeeling {
  background: url(images/sommerfeeling.webp); 
  background-size: cover; 
  background-attachment: fixed;
  }
  
/*******Transformation Strip****************/
/* Sommer-Build allgemeiner Background-Container */
.yale-bg_content {
  background: url('images/yale_bg.png') no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
}
.summer-transparent-box {
  background: rgba(255, 255, 255, 0.85); /* fast weiß mit Transparenz */
  backdrop-filter: blur(6px);
  padding: 2rem;
  border-radius: 1px;
  padding: 60px 30px;
  margin: 60px 0;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}


/* Triple Box Layout */
.summer-triple-box-section {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
}

/* Einzelne Boxen */
.summer-box {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.summer-box:hover {
  transform: translateY(-10px);
}


/* Titel und Text */
.summer-section-title {
  font-size: 2.2em;
  margin-bottom: 20px;
  color: #333;
}

.summer-section-intro {
  font-size: 1.2em;
  color: #555;
  margin-bottom: 40px;
}

.summer-box h3 {
  font-size: 1.5em;
  margin-bottom: 15px;
  color: #333;
}

.summer-box p {
  color: #555;
  margin-bottom: 10px;
}

/****Angebote*******************/
.summer-angebote {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(5px);
  padding: 80px 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  margin: 60px 0;
}

.summer-angebote h2 {
  text-align: center;
  font-size: 2.4em;
  color: #333;
  margin-bottom: 30px;
}

.summer-angebote-intro {
  text-align: center;
  font-size: 1.2em;
  color: #555;
  margin-bottom: 50px;
}

.summer-paket-wrapper {
  /*display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;*/
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1280px;
  margin: 0 auto;
}

.summer-paket {
  /*background: linear-gradient(145deg, #fffbe6, #fffbf0);
  border: 1px solid #f7e8b8;
  padding: 30px;
  width: 420px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  opacity: 0; /* für die Animation *//*
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;*/
  flex: 1 1 30%;
  min-width: 280px;
  max-width: 400px;
  background: linear-gradient(145deg, #fffbe6, #fffbf0);
  border: 1px solid #f7e8b8;
  padding: 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  opacity: 0; /* für Animation */
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.summer-paket.visible {
  opacity: 1;
  transform: translateY(0);
}

.summer-paket:hover {
  transform: scale(1.05);
}

.summer-paket h3 {
  font-size: 1.5em;
  color: #333;
}

.summer-paket-subline {
  font-size: 1.1em;
  color: #777;
  margin-bottom: 20px;
}

.summer-paket ul {
  padding-left: 20px;
  color: #555;
  margin-bottom: 20px;
}

.summer-preis-block {
  background: #fff6dc;
  border: 1px solid #f2e1a6;
  padding: 15px;
  border-radius: 10px;
}

.summer-preis {
  font-size: 1.8em;
  color: #d18700;
  font-weight: bold;
  margin: 0;
}

.summer-rate {
  font-size: 1em;
  color: #555;
  margin-top: 10px;
}

.summer-badge {
  position: absolute;
  top: -20px;
  right: -20px;
  background: #ffd700;
  color: #333;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

@keyframes flyInLeft {
  0% { opacity: 0; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes flyInRight {
  0% { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); }
}

.summer-paket {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.summer-paket.visible-left {
  animation: flyInLeft 1s ease forwards;
}

.summer-paket.visible-right {
  animation: flyInRight 1s ease forwards;
}



/****Leasing************/
/* Grundstil der Leasing-Boxen */
.summer-leasing-box-section {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1280px;
  margin: 0 auto;
}

.summerbox-leasing {
  opacity: 0;
  transform: translateX(-100px); /* Start von links (sichtbar wird dann nach rechts) */
  transition: opacity 0.8s ease, transform 0.8s ease;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  flex: 1 1 30%;
  min-width: 300px;
  max-width: 400px;
  box-sizing: border-box;
}
.summerbox-leasing h3 {
  font-size: 1.5em;
  margin-bottom: 15px;
  color: #333;
}
.summerbox-leasing p {
  font-size: 1.5em;
  margin-bottom: 15px;
  color: #333;
}
.summerbox-leasing.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Staffelung der Animation pro Box */
.delay-0 { transition-delay: 0s; }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }


/* Leasing-Box-Grid */
.summer-leasing-box-section {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
}

/* Abstand zur FAQ erhöhen */
.faq-summer {
  margin-top: 80px;
}



/********************************
/********FAQ Sommer Leasing
/********************************/
.faq-transparent-box {
  background: rgba(255, 255, 255, 0.85); /* fast weiß mit Transparenz */
  backdrop-filter: blur(6px);
  padding: 2rem;
  border-radius: 1px;
  padding: 60px 30px;
  margin: 60px 0;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.faq-summer {
  max-width: 85%;
  margin: 0 auto;
  padding: 40px 20px;
}

.faq-summer .section-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
  color: #000;
}

.faq-summer-item {
  margin-bottom: 10px;
  border: 1px solid #ffa500;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fffaf0;
}

.faq-summer-label {
  display: block;
  padding: 15px 20px;
  font-weight: bold;
  background-color: #ffd580;
  color: #000;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

.faq-summer-label:hover {
  background-color: #ffe199;
}

.faq-summer-label::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
}

.faq-summer-item input[type="checkbox"],
.faq-summer-item input[type="radio"] {
  display: none;
}

.faq-summer-item input[type="radio"]:checked + .faq-summer-label::after {
  content: "–";
}

.faq-summer-item input[type="radio"]:checked ~ .faq-summer-content {
  max-height: 300px;
  opacity: 1;
  transform: scaleY(1);
  padding: 15px 20px;
}

.faq-summer-content {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height 0.3s ease;
  padding: 0 20px;
}


/******CTA Abschluss************/
.summer-cta {
  background: #FF6F61;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}

.summer-cta h2 {
  font-size: 2.6em;
  margin-bottom: 20px;
  color: #fff;
}

.summer-cta p {
  font-size: 1.3em;
  margin-bottom: 30px;
  color: #fff;
}

.summer-cta-points {
  list-style: none;
  padding: 0;
  font-size: 1.2em;
  margin: 0 auto 40px auto;
  max-width: 600px;
  text-align: left;
  color: #fff;
}

.summer-cta-points li {
  margin-bottom: 10px;
  color: #fff;
}

.summer-cta-button {
  background: #ffcc66;
  color: #333;
  padding: 10px 20px;
  /*font-size: 1.4em;*/
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

@media (max-width: 600px) {
  .summer-cta-button {
    padding: 15px 25px;
    font-size: 1.1em;
  }
}
.summer-cta-button:hover {
  background: #001F2B;
  color: #ffcc66;
}
.summer-cta2-button {
  background: #d97d00;
  color: #333;
  padding: 10px 20px;
  font-size: 1.4em;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
}

@media (max-width: 600px) {
  .summer-cta2-button {
    padding: 15px 25px;
    font-size: 1.1em;
  }
}
.summer-cta2-button:hover {
  background: #001F2B;
  color: #d97d00;
}
.summer-cta-small {
  margin-top: 20px;
  font-size: 0.9em;
  font-style: italic;
}

.summer-container1 {  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/**********Leasing INfrmationscenetr **********************/
.leasing-infocenter{
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border: 2px solid #ffd699;
  border-radius: 20px;
  padding: 40px;
  margin-top: 80px;
  margin-bottom: 40px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/********************
Sicherheitsberatung
/********************/
.security-box {
  background-color: #f7f9fb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.security-box h2 {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 46px;
  color: #fff;
  word-wrap: break-word;
}
.security-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px 6px rgba(255, 255, 255, 0.4); /* Klarer weißer Glow */
}
.security-box-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.security-box-content {
  padding: 20px;
  flex: 1;
}

.security-box-content h3 {
  font-size: 1.3em;
  margin-bottom: 10px;
}

.security-box-content p {
  font-size: 1em;
  line-height: 1.6;
}
/************************
/***** Timeline
/**************************/
.timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  position: relative;
}

.timeline-item {
  flex: 1 1 30%;
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.timeline-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(60, 90, 120, 0.15);
}

.timeline-icon {
  font-size: 2.5em;
  color: #004080;
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
  .timeline {
    flex-direction: column;
  }

  .timeline-item {
    flex: 1 1 100%;
  }
}

/*******************************
/***Stufenberatung Angebote
/*******************************/
.sibe-beratung-section {
  background: linear-gradient(to bottom right, #e0efff, #f6fbff);
  padding: 60px 20px;
  text-align: center;
}

.sibe-beratung-container {
  max-width: 1200px;
  margin: 0 auto;
}

.sibe-beratung-title {
  font-size: 2.6rem;
  /*font-weight: 800;*/
  margin-bottom: 10px;
  color: #004080;
}

.sibe-beratung-subtext {
  font-size: 1.9rem;
  color: #333;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.sibe-beratung-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.sibe-beratung-box {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px 24px;
  flex: 1 1 300px;
  max-width: 350px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  text-align: left;
  transition: transform 0.3s ease;
}

.sibe-beratung-box:hover {
  transform: translateY(-5px);
}

.sibe-beratung-box h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #004080;
}
.sibe-highlighted-box {
  position: relative;
  overflow: visible;
}

.sibe-highlight-flag {
  position: absolute;
  top: -16px;
  left: 20px;
  background-color: #ff3b3b;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.sibe-beratung-badge {
  background: #004080;
  color: #ffffff;
  font-size: 1.3rem;
  padding: 5px 10px;
  border-radius: 14px;
  display: inline-block;
  margin-bottom: 16px;
}

.sibe-beratung-box ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.sibe-beratung-box li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 1.4rem;
  color: #333;
}

.sibe-beratung-box li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #0084ff;
  font-weight: bold;
}

.sibe-beratung-info {
  font-size: 1.3rem;
  font-weight: 600;
  border-radius: 8px;
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 20px;
}
.sibe-beratung-image {
  width: 100%;
  height: auto;
  margin-top: 15px;
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sibe-beratung-info.free {
  background: #eafbe6;
  color: #008000;
}

.sibe-beratung-info.cost {
  background: #fdecea;
  color: #a93226;
}

.sibe-beratung-button {
  display: inline-block;
  background: #004080;
  color: #fff;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: 0.3s ease;
}

.sibe-beratung-button:hover {
  background: #007acc;
}

.sibe-beratung-unsicher {
  margin-top: 50px;
}

.sibe-beratung-neutral-button {
  background: #e5e7eb;
  color: #004080;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
}

.sibe-beratung-neutral-button:hover {
  background: #d1d5db;
}

@media (max-width: 768px) {
  .sibe-beratung-grid {
    flex-direction: column;
    align-items: center;
  }
}


/***********Testimonial************/
.sibe-rotator {
  min-height: 260px;
}
.sibe-quote {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  width: 100%;
  top: 0;
}
.sibe-quote.active {
  opacity: 1;
  position: relative;
}
.sibe-quote-box {
  background: #374151;
  padding: 33px;
  border-radius: 12px;
  color: #f3f4f6;
  text-align: left;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.sibe-quote-box p {
  font-size: 1.1em;
  font-style: italic;
}
.sibe-quote-box footer {
  margin-top: 15px;
  font-weight: bold;
  color: #9ca3af;
}
.sibe-avatar {
  width: 297px;
  height: 89px;
  border-radius: 10%;
  object-fit: cover;
  margin-bottom: 15px;
}
.sibe-ratedo-box {
  background: #111827;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05);
}
.sibe h2 {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 46px;
  color: #fff;
  word-wrap: break-word;
}

/********************
***SIBE FAQ
***********************/
.sibe-faq-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.faq-question {
  display: block;
  background: #fff;
  color: #004080;
  font-weight: 700;
  font-size: 1.8rem;
  padding: 24px;
  margin-bottom: 6px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
  transition: background 0.3s ease;
  position: relative;
  border: #004080 double;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 1.6rem;
  transition: transform 0.3s ease;
}

input:checked + .faq-question::after {
  content: "–";
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 0 0 8px 8px;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 24px;
  font-size: 1rem;
  color: #333;
}

input:checked + .faq-question + .faq-answer {
  max-height: 500px;
  padding: 24px;
}

.faq-answer ul {
  margin: 0;
  padding-left: 20px;
}

.sibe-faq-accordion .faq-answer li {
  list-style: none;
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: #333;
}

.sibe-faq-accordion .faq-answer li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #004080;
  font-weight: bold;
}

/****************************
/**** SIBE CTA
/*****************************/
.sibe-cta-final {
  background: #004080;
  color: #ffffff;
  padding: 80px 20px;
}
.sibe-cta-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
  gap: 40px;
}
.sibe-cta-content {
  flex: 1 1 550px;
}
.sibe-cta-image {
  flex: 1 1 400px;
  text-align: center;
}
.sibe-cta-image img {
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.sibe-cta-title {
  font-size: 4.4rem;
  /*font-weight: 800;*/
  margin-bottom: 25px;
  color: #ffffff;
}
.sibe-cta-subtext {
  font-size: 1.3rem;
  margin-bottom: 35px;
  color: #ffffff;
}
.sibe-cta-offers {
  list-style: none;
  padding-left: 0;
  margin-bottom: 40px;
  text-align: left;
  font-size: 1.2rem;
  color: #ffffff;
}
.sibe-cta-offers li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 14px;
  line-height: 1.6;
  color: #ffffff;
}
.sibe-cta-offers li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #cce6ff;
  font-weight: bold;
  font-size: 1.2rem;
}
.sibe-cta-button {
  display: inline-block;
  padding: 18px 36px;
  background: #ffffff;
  color: #004080;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s ease;
}
.sibe-cta-button:hover {
  background: #cce6ff;
  color: #003060;
}
.sibe-cta-badge {
  margin-top: 25px;
  font-size: 1rem;
  color: #cce6ff;
}

@media (max-width: 768px) {
  .sibe-cta-wrapper {
    flex-direction: column;
  }
  .sibe-cta-content, .sibe-cta-image {
    flex: 1 1 100%;
  }
}

/**************************
/********Sommercheck 2025
/****************************/


/* Raster & Wrapper */
.sommercheck_rasterbereich {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Allgemeine Box */
.sommercheck_box {
  background: linear-gradient(to bottom, #ffffff, #f7f9fb);
  border: 1px solid #d3dce6;
  padding: 2rem;
  border-radius: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}

/* Optional: ein dezentes Lichtband oben */
.sommercheck_box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, #0f2a50, #1f3d66);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Box Hover */
.sommercheck_box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  border-color: #999;
}

/* Box Titel */
.sommercheck_box h3 {
  margin-top: 0;
  color: #003b6f;
  font-size: 3.2rem;
}

/* Drei-Spalten-Bereich */
.sommercheck_three-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0;
}
.sommercheck_three-boxes .sommercheck_box {
  flex: 1;
  min-width: 280px;
  box-sizing: border-box;
}

/* TRUSTLIST / Bullet-List */
.sommercheck_trustlist {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  text-align: left;
  color: #15628D;
}

.sommercheck_trustlist li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.sommercheck_trustlist li::before {
  content: "✔️";
  position: absolute;
  left: 0;
  color: #004A7F;
  font-size: 1.2rem;
}

/* Erste große Box (Checkliste sichern) */
.sommercheck_box.highlight {
  background: linear-gradient(to bottom, #0f2a50, #1f3d66);
  color: white;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.sommercheck_box.highlight h2 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  color:#fff;
}

.sommercheck_trust {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: #d0d8e2;
}

/* CTA Button */
.sommercheck_btn_main {
  display: inline-block;
  background-color: #ffffff;
  color: #0f2a50;
  font-weight: bold;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 1rem;
  transition: background 0.3s;
}

.sommercheck_btn_main:hover {
  background-color: #d9e2f2;
  color: #0f2a50;
}

/* Zweite Box – Weiterführende Angebote */
.sommercheck_box.links {
  background-color: #e0e6ef;
  color: #0f2a50;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.sommercheck_box.links h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* Links / Button-Gruppe */
.sommercheck_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.sommercheck_btn {
  background-color: #ffffff;
  color: #0f2a50;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s ease;
  font-size: 1rem;
}

.sommercheck_btn:hover {
  background-color: #cfd9e6;
}

/***************************************/
/**********Sicherheitstechnik*************/
/*****************************************/
.trust{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;color:var(--muted);font-size:.95rem}
.trust .badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background:#2F505B}
    
.toc {
  display: flex;
  gap: 14px;             /* Abstand zwischen den Links */
  flex-wrap: wrap;
  margin-top: 24px;      /* Abstand zur Trust-Leiste */
  margin-bottom: 16px;   /* Abstand zum nächsten Element */
}

.toc a {
  padding: 8px 16px;
  border: 1px solid #15628D;   /* Blau statt Grau */
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  color: #15628D;
  background: #eef6fb;         /* hellblauer Hintergrund */
  text-decoration: none;
  transition: all .2s ease;
}

.toc a:hover {
  background: #15628D;
  color: #fff;
}
/* Buttons */
.stx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 22px;
border-radius: 9999px;
border: 0;
font-weight: 700;
font-size: 16px;
text-decoration: none;
line-height: 1.1;
transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
cursor: pointer;
}
.stx-btn:active { transform: translateY(1px); }
.stx-btn--primary {
background: linear-gradient(180deg, #ff4b4b, #e11d2e);
color: #fff;
box-shadow: 0 6px 12px rgba(225,29,46,.35);
}
.stx-btn--primary:hover {
filter: brightness(1.05);
box-shadow: 0 8px 20px rgba(225,29,46,.45);
}
.stx-btn--ghost {
background: rgba(255,255,255,0.08);
color: var(--accent) !important
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 2px 6px rgba(0,0,0,.15) inset;
}
.stx-btn--ghost:hover {
background: rgba(255,255,255,0.14);
box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

.stx-bg_content {
  background: url('images/sicherheitstechnik_bg.png') no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
}
.sca-bg_content {
  background: url('images/sicherheitscheck_asisstent_bg.png') no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
}

/**********************/
/* Bausteine Section */
/********************/
/* Breitere Bühne nur für die Bausteine-Sektion */
#bausteine .stx-container {
  max-width: 1320px;
  padding: 0 20px;
}
/* Mehr Abstand + transparenter Hintergrund nur für die Bausteine-Sektion */
#bausteine.stx-wrap {
  padding: 80px 0; /* statt 48px → mehr Luft oben/unten */
  background: rgba(255, 255, 255, 0.9); /* leichter transparenter Schleier */
  border-radius: 12px;                   /* optional: sanft abgerundet */
}
/* Mobile first: 1 Spalte */
#bausteine .stx-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Tablet: 2 Spalten */
@media (min-width: 700px) {
  #bausteine .stx-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: 4 Spalten + mehr Luft */
@media (min-width: 1100px) {
  #bausteine .stx-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
}

/* Kleine Robustheits-Fixes gegen Überlauf/Überlappung */
#bausteine .stx-card { height: auto; min-width: 0; }
#bausteine .stx-card * { min-width: 0; }             /* verhindert Zeilen-Overflow bei langen Links */
#bausteine .stx-logo img { max-width: 100%; height: 32px; object-fit: contain; }
.stx-grid{ display:grid; gap:24px; align-items:stretch; }
.stx-card {
  background:#fbfcfe;
  border:1px solid var(--stx-border);
  border-radius:16px;
  padding:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  height:100%;
  display:flex;
  flex-direction:column;
  text-decoration:none;  /* verhindert rote Unterstreichung */
  color: inherit;        /* Grundfarbe neutral lassen */
   position: relative;
}
.stx-stretch{
  position: absolute; inset: 0;
  z-index: 10; background: transparent;
  text-indent: -9999px;
}
.stx-stretch:focus-visible{
  outline: 3px solid rgba(21,98,141,.35);
  outline-offset: 6px; border-radius: 12px;
}
.stx-card:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.14);
  border-color:rgba(21,98,141,.35);
}

/* Wichtig: Headlines & Texte explizit einfärben */
.stx-card h3 {
  margin:8px 0 8px;
  font-weight:500;
  font-size:2.1rem;    /* 2.1rem war sehr groß, lieber ~19px */
  line-height:1.4;
  color: var(--stx-blue); 
}
.stx-card p {
  margin:0;
  color: var(--stx-gray);
}

/* optional: Hover-Effekt nur auf Überschrift */
.stx-card:hover h3 {
  color: var(--stx-blue);
}

.stx-logo{ display:grid; place-items:center; margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--stx-border); }
.stx-logo img{ height:32px; max-width:180px; object-fit:contain; }

/* Subhead volle Breite */
.stx-subhead { margin:6px 0 16px; color:var(--stx-gray); width:100%; line-height:1.55; }

/* Akzentleisten je Karte */
.stx-card--ajax{ position:relative; }
.stx-card--ajax::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:16px 16px 0 0; background:linear-gradient(90deg,#0b6aa1,#7fb9d9); }
.stx-card--yale{ position:relative; }
.stx-card--yale::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:16px 16px 0 0; background:linear-gradient(90deg,#f2c200,#ffd86b); }
.stx-card--kevin{ position:relative; }
.stx-card--kevin::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:16px 16px 0 0; background:linear-gradient(90deg,#2bb673,#9be0c0); }
.stx-card--svc{ position:relative; }
.stx-card--svc::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:16px 16px 0 0; background:linear-gradient(90deg,#9E1B1A,#ff8a8a); }

/***********************/
/* Baustein Vergkeich */
/*********************/
/* Bühne wie oben (Bausteine) */
.stx-compare-container{ max-width:1320px; padding:0 20px; }

/* Vergleichs-Block sauber vom Footer trennen */
.stx-compare-wrap {
  padding: 72px 0;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  margin-bottom: 0px; /* zusätzlicher Abstand zum Footer */
}
/* Sicherstellen, dass die Tabelle nicht „durchsticht“ */
.stx-compare {
  overflow: hidden;
  border-radius: 12px;
}

/* Tabelle aktiv */
.stx-table--active{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--stx-border);
  border-radius:14px;
  overflow:hidden;
}
.stx-table--active thead th{
  position: sticky; top: 0; z-index: 1;   /* Sticky Header */
  background:#fbfcfe;
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid var(--stx-border);
}
.stx-table--active td{
  padding:14px 16px;
  vertical-align:top;
  border-bottom:1px solid var(--stx-border);
  line-height:1.5;
}
.stx-table--active tbody tr:nth-child(even) td{ background:#f8fbfd; }

.stx-rowhead{
  width:220px; font-weight:700; color:#334155; background:#f1f5f9;
}

/* Spaltenköpfe mit Logos + farbiger Akzentleiste */
.stx-col{ font-weight:800; color:#0f2a3a; display:flex; align-items:center; gap:10px; }
.stx-col img{ height:18px; width:auto; display:block; filter:contrast(1.1); }
.stx-col--ajax{ --ac:#0b6aa1; }
.stx-col--yale{ --ac:#f2c200; }
.stx-col--kevin{ --ac:#2bb673; }
.stx-table--active thead .stx-col{ position:relative; }
.stx-table--active thead .stx-col::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background: var(--ac);
  opacity:.65;
}

/* Hover-Interaktion: Zeile */
.stx-table--active tbody tr:hover td{
  background:#eef7fc;
}

/* Hover-Interaktion: Spalte (moderne Browser via :has); Fallback: nur Zelle */
@supports(selector(:has(td))) {
  .stx-table--active:has(td:nth-child(2):hover) td:nth-child(2),
  .stx-table--active:has(th:nth-child(2):hover) td:nth-child(2){ background:#e9f4fb; }
  .stx-table--active:has(td:nth-child(3):hover) td:nth-child(3),
  .stx-table--active:has(th:nth-child(3):hover) td:nth-child(3){ background:#fcf7e3; }
  .stx-table--active:has(td:nth-child(4):hover) td:nth-child(4),
  .stx-table--active:has(th:nth-child(4):hover) td:nth-child(4){ background:#e9fbf2; }
}

/* Rundungen unten sichtbar */
.stx-table--active tr:last-child td:first-child{ border-bottom-left-radius:14px; }
.stx-table--active tr:last-child td:last-child{ border-bottom-right-radius:14px; }

/* Responsive */
@media (max-width: 900px){
  .stx-rowhead{ width:auto; }
  .stx-compare{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .stx-table--active{ min-width: 780px; }
}
@media (max-width: 560px){
  /* Optional: Stacked-Ansicht, falls du lieber keine horizontale Scrollbar willst –
     wenn du immer Scroll willst, lösch diesen Block. */
  .stx-table--active, .stx-table--active thead, .stx-table--active tbody,
  .stx-table--active th, .stx-table--active td, .stx-table--active tr{ display:block; }
  .stx-table--active thead{ display:none; }
  .stx-table--active tbody tr{
    margin:0 0 14px; background:#fff; border:1px solid var(--stx-border);
    border-radius:14px; overflow:hidden;
  }
  .stx-rowhead{ background:#fbfcfe; color:var(--stx-blue); padding:12px 16px; border-bottom:1px solid var(--stx-border); }
  .stx-table--active td{ border-bottom:1px solid var(--stx-border); padding:12px 16px; }
  .stx-table--active td:last-child{ border-bottom:0; }
}

/**********************/
/* Bühne für Prozess */
/********************/
/* Breitere Bühne nur für die Bausteine-Sektion */
#beratung .stx-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}
/* Prozess-Section mit halbtransparentem Background */
.stx-process-wrap {
  padding: 80px 0;
  background: rgba(255,255,255,0.8); /* 80% weiß-transparent */
  border-radius: 12px;
  margin-bottom: 0px;
  backdrop-filter: blur(4px); /* optional: Glas-Effekt */
}


/* Grid 3→1 */
.stx-steps {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) { .stx-steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .stx-steps { grid-template-columns: 1fr; } }

/* Step-Karten im aktiven Look */
.stx-step {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fbfcfe;
  border: 1px solid var(--stx-border);
  border-radius: 16px;
  padding: 22px 20px 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: visible; /* vorher: hidden */ /* wichtig, damit Akzentleiste nicht übersteht */
}
/* Akzentleisten sauber in den Radius */
.stx-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  border-radius: 16px 16px 0 0;
}

.stx-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  border-color: rgba(21,98,141,.25);
}

/* Akzentfarben je Schritt (analog Vergleich) */
.stx-step--one::before { background: linear-gradient(90deg,#0b6aa1,#7fb9d9); }
.stx-step--two::before { background: linear-gradient(90deg,#f2c200,#ffd86b); }
.stx-step--three::before { background: linear-gradient(90deg,#2bb673,#9be0c0); }

/* Nummer-Badge */
/* Badge sauber sichtbar */
.stx-step__badge{
  position:absolute;
  top: 0;               /* am oberen Rand ausrichten */
  left: 16px;
  transform: translateY(-50%); /* halb über der Karte */
  width: 32px; height: 32px;
  border-radius: 50%;
  display:grid; place-items:center;
  font-weight:700; font-size:14px;
  background:#fff;
  border:1px solid var(--stx-border);
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  z-index: 2;
  pointer-events: none; /* kein Klickfang */
}

/* Typografie */
.stx-step h3{ margin:18px 0 8px; font-weight:700; color:var(--stx-blue); font-size:2.1rem; }
.stx-step p{ margin:0 0 8px; color:var(--stx-gray); line-height:1.5; }
.stx-step ul{ margin:0; padding-left:18px; color:var(--stx-gray); line-height:1.45; }
.stx-step ul li{ margin:4px 0; }

/* Optional: Fokus-Stil für Tastatur-Nutzer */
.stx-step:focus-visible{
  outline:3px solid rgba(21,98,141,.35);
  outline-offset:3px;
  transform: translateY(-3px);
}

/*******************/
/*CTA 1*/
/*********************/
/* Bühne: 1320px wie oben */
.stx-cta-container { max-width:1320px; margin:0 auto; padding:0 20px; }

/* CTA-Section – leicht rot, 70% transparent (= 0.3 Deckkraft) */
.stx-cta-wrap--red{
  padding:72px 0;
  background: rgba(158, 27, 26, 0.65);     /* var(--stx-red) mit ~30% Deckkraft */
  border-radius:12px;
  /*margin:0px 0;*/
  backdrop-filter: blur(2px);               /* dezent, optional */
}

/* Zentrierte Typo & Buttons */
.stx-cta-wrap--red .stx-title{ text-align:center; margin-bottom:12px; color:#fff; }
.stx-cta-wrap--red .stx-subhead{ text-align:center; max-width:760px; margin:0 auto 22px; color:#fff; }
.stx-cta{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* Mobile Stack */
@media (max-width:640px){
  .stx-cta{ flex-direction:column; align-items:center; }
}

/*********************/
/********FAQ*********/
/*******************/
/* Bühne & Hintergrund wie die anderen Sektionen */
/* Container */
.stx-faq-wrap{
  padding:80px 0;
  background: rgba(3,23,19,0.85); /* dein Wunschfarbton */
  border-radius: 14px;
  margin: 00px 0;
}


.stx-faq-wrap .stx-container{
  max-width:1320px;
  margin:0 auto;
  padding:0 20px;
}

/* FAQ-Items */
/* FAQ-Karten etwas kompakter + schöner Abstand */
.stx-faq-item{
  border: 1px solid var(--stx-border);
  border-radius: 12px;
  background: #fbfcfe;
  margin: 12px 0;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}


/* Input verstecken */
.stx-faq-item input{ display:none; }

/* Fragezeile */
.stx-faq-item label{
  display:flex; align-items:center;
  cursor:pointer;
  font-weight:700; color:var(--stx-blue);
  padding:16px 18px;
  position:relative;
}

/* Chevron */
.stx-faq-item label::after{
  content:""; margin-left:auto;
  width:12px; height:12px;
  border-right:2px solid var(--stx-blue);
  border-bottom:2px solid var(--stx-blue);
  transform: rotate(45deg);
  transition: transform .25s ease;
}

/* Content */
.stx-faq-content{
  max-height:0;
  overflow:hidden;
  padding:0 18px;
  transition:max-height .35s ease, padding .25s ease;
}
.stx-faq-content p{ margin:14px 0 18px; color:var(--stx-gray); line-height:1.55; }

/* Wenn offen */
.stx-faq-item input:checked ~ .stx-faq-content{
  max-height:500px;  /* ausreichend groß */
  padding:0 18px 16px 18px;
}
.stx-faq-item input:checked + label::after{
  transform: rotate(-135deg);
}
/* Inhalt mit sanfter Animation (falls noch nicht drin) */
.stx-faq-content{
  max-height:0; overflow:hidden;
  padding:0 18px; transition:max-height .35s ease, padding .25s ease;
}
.stx-faq-content p{ margin:14px 0 18px; color:var(--stx-gray); line-height:1.55; }
.stx-faq-item input:checked ~ .stx-faq-content{ max-height:500px; padding:0 18px 16px; }
.stx-faq-item input:checked + label::after{ transform: rotate(-135deg); }


.stx-faq-wrap .stx-title{
  color:#fff;                /* Titel in Weiß */
  text-align:center;
  margin-bottom:12px;
}
.stx-faq-wrap .stx-subhead{
  color:#fefefe;             /* Subhead leicht heller Weißton */
  text-align:center;
  max-width:760px;
  margin:0 auto 28px;
  line-height:1.6;
}
/**********************************/
/* CTA-Block (zweiter, nach FAQ) */
/********************************/
.stx-cta-wrap{
  padding:80px 0;
  background: rgba(158,27,26,0.7); /* leicht roter Hintergrund 70% transparent */
  text-align:center;
  border-radius:14px;
  margin:00px 0;
}
.stx-cta-wrap .stx-container{
  max-width:1320px;
  margin:0 auto;
  padding:0 20px;
}
.stx-cta-wrap .stx-title{
  color:#fff;
  margin-bottom:12px;
}
.stx-cta-wrap .stx-subhead{
  color:#fefefe;
  max-width:780px;
  margin:0 auto 28px;
  line-height:1.6;
}
.stx-cta-buttons{
  display:flex;
  justify-content:center;
  gap:20px;
}

/*************************************/
/***Sicherherheits Check Assistent***/
/***********************************/
/* Layout-Wrapper */
.sca_section { padding: 2rem 0; }
/* Glas-Effekt für ausgewählte Sections */
.sca_glass {
  background: rgba(255, 255, 255, 0.75);   /* halbtransparent, hell */
  backdrop-filter: blur(6px);              /* Blur-Effekt */
  -webkit-backdrop-filter: blur(6px);      /* Safari Fix */
  border-radius: 0px;                     /* optional für schönere Kanten */
  padding: 3rem 1rem;
  /*margin: 2rem auto;*/
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);  /* leichter Schatten */
}

/* Container mit fester max-breite */
.sca_glass .sca_container { 
  max-width: 1320px;   /* <--- hier angepasst */
  margin: 0 auto; 
  padding: 0 1rem;     /* etwas Seitenabstand auf kleinen Screens */
}

/* Headline & Lead */
.sca_heading { 
  margin: 0 0 0.75rem; 
  font-size: 3.1rem; 
  line-height: 1.4; 
}
.sca_lead {
  margin: 0 0 1.25rem;
  opacity: 0.92;
}

/* Grid */
.sca_grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: stretch;
}
@media (min-width: 700px) { 
  .sca_grid { grid-template-columns: repeat(2, 1fr); } 
}
@media (min-width: 1024px) { 
  .sca_grid { grid-template-columns: repeat(3, 1fr); } 
}

/* Cards */
/* Cards */
.sca_card {
  background: #f9f9f9;       /* heller Hintergrund */
  color: #222;               /* dunkler Text für bessere Lesbarkeit */
  border-radius: 16px;
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  position: relative;
  transition: all .25s ease-in-out;
  overflow: hidden;
}

/* Farbbalken oben (individuell via Klasse) */
/* Farbbalken oben */
.sca_card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 6px;
  background: #e11937;         /* Akzentfarbe */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.sca_note_box {
  background: rgba(25, 118, 210, 0.08); /* hellblau, dezent */
  border-left: 4px solid #1976d2;       /* Akzentlinie */
  padding: 0.8rem 1rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #223;
}

/* Hover-Effekt */
.sca_card:hover {
  background: #18181b; /* etwas heller als Grund */
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transform: translateY(-3px);
}

/* Auf Hover Balken intensiver */
.sca_card:hover::before {
  background: linear-gradient(90deg, #e11937, #ff4d6d);
}

/* Hover-Effekt */
.sca_card:hover {
  background: #fff; /* noch heller beim Hover */
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  transform: translateY(-4px);
}

/* Farbvarianten */
.sca_card--red::before { background: #e11937; }
.sca_card--blue::before { background: #1976d2; }
.sca_card--green::before { background: #2e7d32; }

/* Optional: Farbverlauf beim Hover */
.sca_card--red:hover::before   { background: linear-gradient(90deg, #e11937, #ff4d6d); }
.sca_card--blue:hover::before  { background: linear-gradient(90deg, #1976d2, #42a5f5); }
.sca_card--green:hover::before { background: linear-gradient(90deg, #2e7d32, #66bb6a); }

/* Listen in Cards */
.sca_list { margin: .25rem 0 .5rem; padding-left: 1.1rem; list-style: none; }
.sca_list li { margin: .4rem 0; position: relative; }
.sca_list li::before {
  content: '';
  position: absolute;
  left: -1.1rem; top: .4rem;
  width: .45rem; height: .45rem; border-radius: 50%;
  background: #e11937;
}

/* Hinweisbox innerhalb einer Card */
.sca_note {
  margin-top: .5rem;
  padding: .6rem .75rem;
  border-left: 3px solid #e11937;
  background: rgba(225,25,55,.08);
  border-radius: 8px;
}

/* CTA */
.sca_cta { margin-top: 1.25rem; text-align: center; }
.sca_btn {
  display: inline-block;
  padding: .7rem 1rem;
  border-radius: 12px;
  background: #e11937;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: filter .2s ease-in-out, transform .06s ease-in-out;
}
.sca_btn:hover { filter: brightness(.95); }
.sca_btn:active { transform: translateY(1px); }

/* Entfernt alle Standard-Bullets und Marker */
.sca_list,
.sca_list li {
  list-style: none !important;
  list-style-type: none !important;
}

.sca_list li::marker {
  content: "" !important;
}

.sca_list li {
  position: relative;
  margin: 0.8rem 0;
  padding-left: 2rem; /* mehr Platz für den größeren Haken */
  line-height: 1.5;
}

.sca_list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;   /* leicht nach rechts, um den Punkt zu treffen */
  top: 0.15rem;
  width: 0.7rem;   /* breiter */
  height: 1.2rem;  /* höher */
  border-right: 4px solid #2e7d32;
  border-bottom: 4px solid #2e7d32;
  transform: rotate(45deg);
}

/******************************/
/********Kundenstimmen********/
/****************************/
/* Section halbtransparent mit Glas-Effekt */
.ks_section_glass_gray{
  background: rgba(245,247,250,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 0px;
  padding: 2.2rem 1rem;
  margin: 0rem auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Container & Heading */
.ks_container{ max-width:1320px; margin:0 auto; }
.ks_heading{ margin:0 0 .35rem; font-size:3.1rem; }
.ks_sub{ margin:0 0 1.25rem; opacity:.85; }

/* Grid: 1 / 2 / 4 Spalten */
.ks_grid4{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media (min-width:700px){ .ks_grid4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .ks_grid4{ grid-template-columns:repeat(4,1fr); } }

/* Testimonial Card */
.ks_tcard{
  background:#ffffff;
  border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  position:relative;
  display:flex; flex-direction:column; gap:.6rem;
  transition:transform .2s ease, box-shadow .2s ease;
  min-height: 170px;
}

/* rechte blaue Linie */
.ks_tcard_rightline::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:6px;
  background:#1976d2;
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}

/* Zitat & Autor */
.ks_tcard blockquote{
  margin:0;
  font-style:italic;
  color:#113;
  line-height:1.5;
}
.ks_tcard figcaption{
  margin-top:.25rem;
  color:#0f3b63;
  font-size:0.95rem;
}

/* Deko-Leiste links */
.ks_tcard blockquote::before{
  content:"";
  position:absolute;
  left:.8rem; top:.9rem;
  width:4px; height: calc(100% - 1.8rem);
  background: rgba(25,118,210,.15);
  border-radius:4px;
}

/* Hover */
.ks_tcard:hover{
  transform: translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,.14);
}

/***********************************************/
/***********FAQ-Sicherheitscheck-Assistent*****/
/*********************************************/
/* Section: 45% transparent, Glas/Blur */
.sca_faq_section_glass{
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0px;
  padding: 2.2rem 1rem;
  margin: 0rem auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Container */
.sca_faq_container{
  max-width: 1320px;
  margin: 0 auto;
}

/* Heading + Sub */
.sca_faq_heading{
  font-size: 3.1rem;
  line-height: 1.15;
  margin: 0 0 .4rem;
  text-align: center;
  color: #fff;   /* weiß */
}
.sca_faq_sub{
  text-align: center;
  margin: 0 0 1.4rem;
  opacity: .9;
  color: #fff;   /* weiß */
}

/* Accordion Wrapper */
.sca_faq_accordion{
  margin: 0 auto;
  max-width: 1000px;
}

/* Item */
.sca_faq_item{
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin-bottom: .9rem;
  overflow: hidden;
}

/* Radio Toggle */
.sca_faq_toggle{ display:none; }

/* Frage (Label) */
.sca_faq_q{
  display:block;
  padding: 1rem 1rem 0.9rem 1rem;
  font-weight: 700;
  color: #0f3b63;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid rgba(15,59,99,.15);
}

/* Plus/Minus Icon rechts */
.sca_faq_q::after{
  content:"+";
  position:absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  font-size: 1.2rem;
  color:#0f3b63;
}

/* Antwort (animiert via max-height) */
.sca_faq_a{
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  color: #223;
  line-height: 1.55;
  transition: max-height .35s ease, padding .25s ease, opacity .25s ease;
  opacity: 0;
}

/* Geöffnet */
.sca_faq_toggle:checked ~ .sca_faq_q::after{ content:"–"; }
.sca_faq_toggle:checked ~ .sca_faq_a{
  max-height: 600px;
  padding: 0.9rem 1rem 1.1rem 1rem;
  opacity: 1;
}

/* Links in Antworten */
.sca_faq_a a{
  color:#1976d2;
  text-decoration: underline;
}

/* Responsive Tuning */
@media (max-width: 640px){
  .sca_faq_heading{ font-size: 2.2rem; }
  .sca_faq_accordion{ max-width: 100%; }
}


/************************/
/******About************/
/**********************/
/* ==============================
   ABOUT – Locked Scope (kein Konflikt mit CMS)
   ============================== */
.about_scope.about_lock, .about_scope.about_lock * { box-sizing: border-box; }
.about_scope.about_lock{
  /* Design-Token (nur lokal) */
  --bg:#0d1216;                 /* anthrazit (Seitenhintergrund) */
  --panel:#d9dde1;              /* silbrige Sektionen */
  --surface:#ffffff;            /* weiße Karten */
  --border:rgba(21,98,141,.28); /* kühles Blau für Ränder */
  --text:#0f1720;
  --muted:#3b4a57;
  --accent:#c4161c;

  --radius-panel:14px;
  --radius-card:12px;
  --shadow-panel:0 18px 50px rgba(0,0,0,.25);
  --shadow-card:0 6px 18px rgba(0,0,0,.08);

  background:var(--bg) !important;
  color:var(--text) !important;
  isolation:isolate; /* verhindert Fremd-Effekte vom Theme */
}

/* Grundtypografie (locked) */
.about_scope.about_lock h1,
.about_scope.about_lock h2,
.about_scope.about_lock h3,
.about_scope.about_lock p,
.about_scope.about_lock li,
.about_scope.about_lock figcaption,
.about_scope.about_lock blockquote{
  color:var(--text) !important;
  margin:0 0 14px;
}
.about_scope.about_lock h1{ font-size:clamp(28px,4.2vw,44px); line-height:1.15; }
.about_scope.about_lock h2{ font-size:clamp(24px,3.6vw,36px); }
.about_scope.about_lock .about_muted{ color:var(--muted) !important; }

/* Container */
.about_scope.about_lock .wrap{ max-width:1150px; margin:0 auto; padding:32px 20px; }

/* ==============================
   Sektionen (silbrige Panels)
   ============================== */
.about_scope.about_lock .section,
.about_scope.about_lock .about_section.about_panel{
  background:var(--panel) !important;
  border:1.5px solid rgba(255,255,255,.28) !important;
  border-radius:var(--radius-panel) !important;
  box-shadow:var(--shadow-panel) !important;
  padding:clamp(20px,3vw,32px) !important;
  margin:28px 0 !important;
}

/* Panel-Header (Titel links, Siegel rechts) */
.about_scope.about_lock .about_panel_head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}

/* ==============================
   Buttons / CTAs (rot)
   ============================== */
.about_scope.about_lock .btn{
  display:inline-block; background:var(--accent) !important; color:#fff !important;
  text-decoration:none !important; padding:12px 20px; border-radius:12px;
  font-weight:700; letter-spacing:.2px; transition:filter .2s, transform .05s;
  border:none !important;
}
.about_scope.about_lock .btn-outline{
  background:transparent !important; color:var(--accent) !important; border:2px solid var(--accent) !important;
}
.about_scope.about_lock .btn:hover{ filter:brightness(.95); }
.about_scope.about_lock .btn:active{ transform:translateY(1px); }
.about_scope.about_lock .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }

/* ==============================
   Story – Zitat
   ============================== */
.about_scope.about_lock .quote{
  border-left:4px solid var(--accent) !important;
  padding-left:14px; font-style:italic; color:#e6eef6 !important; margin:10px 0 0;
}

/* ==============================
   Trust – 3×3 Grid + Karten
   ============================== */
.about_scope.about_lock .about_trust-grid{
  display:grid; gap:16px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:1100px){ .about_scope.about_lock .about_trust-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:800px){  .about_scope.about_lock .about_trust-grid{ grid-template-columns:1fr; } }

.about_scope.about_lock .about_card{
  background:var(--surface) !important;
  border:2px solid var(--border) !important;
  border-radius:var(--radius-card) !important;
  padding:16px !important;
  display:flex; gap:12px; align-items:center;
  box-shadow:var(--shadow-card) !important;
}
.about_scope.about_lock .about_trust-grid .about_logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about_scope.about_lock .about_trust-grid .about_logo img {
  max-height: 50px;  /* Höhe für alle Logos angleichen */
  width: auto;
  object-fit: contain;
}

.about_scope.about_lock .about_kpi{ font-weight:800; }

/* Siegel – Gold */
.about_scope.about_lock .about_pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
  border-radius:999px; font-weight:700;
  border:2px solid rgba(255,255,255,.4); background:#fff; color:#0f1720;
}
.about_scope.about_lock .about_pill .about_icon{ width:18px; height:18px; }
.about_scope.about_lock .about_pill--gold{
  color:#3a2f00 !important;
  background:linear-gradient(135deg,#FFD700,#E6B800) !important;
  border-color:#E6B800 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.about_scope.about_lock .about_pill--gold .about_icon{ stroke:#3a2f00; }

/* ==============================
   Testimonials – 3 Karten
   ============================== */
.about_scope.about_lock .about_testi-grid{
  display:grid; gap:16px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:1100px){ .about_scope.about_lock .about_testi-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:800px){  .about_scope.about_lock .about_testi-grid{ grid-template-columns:1fr; } }

.about_scope.about_lock .about_testi-card{
  background:var(--surface) !important; border:2px solid var(--border) !important;
  border-radius:var(--radius-card) !important; padding:16px 18px !important;
  box-shadow:var(--shadow-card) !important;
}
.about_scope.about_lock .about_testi-card blockquote{ margin:0 0 10px; font-style:italic; }
.about_scope.about_lock .about_testi-card figcaption{ color:var(--muted) !important; font-weight:700; }

/* ==============================
   Process – Steps
   ============================== */
.about_scope.about_lock .process{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.about_scope.about_lock .step{
  background:#fff !important; border:2px solid var(--border) !important;
  border-radius:14px !important; padding:18px !important; position:relative;
  box-shadow:var(--shadow-card) !important;
}
.about_scope.about_lock .step .num{
  position:absolute; top:-12px; left:-12px; background:var(--accent) !important; color:#fff !important;
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:800;
}

/* ==============================
   Closer – Split mit Bild
   ============================== */
.about_scope.about_lock .split{
  display:grid; gap:clamp(16px,2.2vw,24px);
  grid-template-columns:1fr .9fr; align-items:center;
}
.about_scope.about_lock .split img{ width:100%; border-radius:14px; border:2px solid var(--border) !important; }
@media (max-width:900px){ .about_scope.about_lock .split{ grid-template-columns:1fr; } }

/* Hilfszeilen */
.about_scope.about_lock .cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
/* =============== 1) "So arbeite ich mit dir" – 3er Grid, 2 Reihen, Nummern sauber =============== */
.about_scope.about_lock #prozess .process{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* fix 3 Spalten am Desktop */
  gap:16px;
}
@media (max-width: 1024px){
  .about_scope.about_lock #prozess .process{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .about_scope.about_lock #prozess .process{ grid-template-columns: 1fr; }
}
.about_scope.about_lock #prozess .step{
  min-height: 160px;            /* gleiche Kastenhöhe */
  display:flex; flex-direction:column; justify-content:flex-start;
}
.about_scope.about_lock #prozess .step h3{ margin-top:2px; margin-bottom:6px; }
.about_scope.about_lock #prozess .step .num{
  top: -12px; left: -12px;
  width: 34px; height: 34px;
  border-radius:10px;
  font-size: 15px;
}

/* =============== 2) Siegel (Pills) – beide gold + etwas mehr Präsenz =============== */
/* Gold für Testimonials ("Echte Erfahrungen") */
.about_scope.about_lock #stimmen .about_pill{
  color:#3a2f00 !important;
  background: linear-gradient(135deg,#FFD700,#E6B800) !important;
  border-color:#E6B800 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  padding: 6px 16px;
}
.about_scope.about_lock #stimmen .about_pill .about_icon{ stroke:#3a2f00; }

/* Gold auch bei Trust ("Geprüft & bewährt") */
.about_scope.about_lock #story + .section .about_pill,     /* dein Trust-Panel folgt aktuell direkt nach Story */
.about_scope.about_lock #trust .about_pill{                /* falls du später ein #trust vergibst, wäre es abgedeckt */
  color:#3a2f00 !important;
  background: linear-gradient(135deg,#FFD700,#E6B800) !important;
  border-color:#E6B800 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  padding: 6px 16px;
}
.about_scope.about_lock .about_pill .about_icon{ width:18px; height:18px; }

/* =============== 3) Trust-Grid – Logos größer, Karten gleich hoch, Hover sanft =============== */
.about_scope.about_lock .about_trust-grid .about_card{
  min-height: 110px;                  /* gleiche Höhe für alle Kacheln */
  transition: transform .12s ease, box-shadow .12s ease;
}
.about_scope.about_lock .about_trust-grid .about_card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* Falls du die ganze Karte verlinkst, neutralisiere Link-Stile */
.about_scope.about_lock .about_trust-grid .about_card a{
  display:flex; gap:12px; align-items:center;
  text-decoration:none; color:inherit;
}

/* =============== 4) Quote dunkler =============== */
.about_scope.about_lock .quote{
  color: #16232d !important; /* deutlich dunkler */
  border-left-color: var(--accent) !important;
}

/**************************/
/*****   FAQ  ************/
/************************/
/* ===== FAQ – Akkordeon wie Sicherheitstechnik: 1 offen, Rest zu ===== */
.about_scope.about_lock .about_faq-accordion{
  width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about_scope.about_lock .about_faq-item{
  width: 100%;                  /* immer volle Breite */
  background: transparent;
  border: 0;
}

/* Radio unsichtbar, steuert die Zustände */
.about_scope.about_lock .about_faq-radio{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Fragezeile */
.about_scope.about_lock .about_faq-q{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;                  /* volle Breite */
  background: var(--surface) !important;
  border: 2px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-card) !important;
  color: var(--text) !important;
  transition: box-shadow .15s ease, transform .08s ease, border-color .15s ease;
  margin: 0;
  box-sizing: border-box;       /* Breite inkl. Padding/Borders */
}
.about_scope.about_lock .about_faq-q:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.about_scope.about_lock .about_faq-q:active{
  transform: translateY(1px);
}

/* Chevron rechts */
.about_scope.about_lock .about_faq-q .chev{
  width: 20px; height: 20px; flex: 0 0 20px;
  position: relative;
}
.about_scope.about_lock .about_faq-q .chev::before,
.about_scope.about_lock .about_faq-q .chev::after{
  content:"";
  position: absolute;
  left: 4px; right: 4px; top: 9px;
  height: 2px; background: currentColor; border-radius: 2px;
  transform-origin: center;
}
.about_scope.about_lock .about_faq-q .chev::before{ transform: rotate(45deg); }
.about_scope.about_lock .about_faq-q .chev::after { transform: rotate(-45deg); }

/* Antwortpanel */
.about_scope.about_lock .about_faq-a{
  width: 100%;                  /* gleiche Breite */
  background: var(--surface) !important;
  border: 2px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 0 20px;
  margin-top: 6px;
  box-shadow: var(--shadow-card) !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height .26s ease, padding .18s ease;
  box-sizing: border-box;
}

/* Zustand "offen" */
.about_scope.about_lock .about_faq-radio:checked + .about_faq-q{
  border-color: rgba(21,98,141,.38) !important;
}
.about_scope.about_lock .about_faq-radio:checked + .about_faq-q + .about_faq-a{
  padding: 16px 20px;
  max-height: 600px; /* mehr Platz für längeren Text */
}
.about_scope.about_lock .about_faq-radio:checked + .about_faq-q .chev::before{
  transform: rotate(-45deg);
}
.about_scope.about_lock .about_faq-radio:checked + .about_faq-q .chev::after{
  transform: rotate(45deg);
}
.about_scope.about_lock .about_faq-radio:checked + .about_faq-q + .about_faq-a{
  padding: 14px 18px;
  max-height: 480px; /* genügend Platz für 3–4 Zeilen */
}

/* Panel-Spacings in diesem Bereich etwas luftiger */
.about_scope.about_lock #faq.about_section.about_panel{
  padding-top: 26px !important;
  padding-bottom: 28px !important;
}

/* Optional: Fragen zentriert unter Intro (wie im Screenshot), aber volle Breite der Liste */
.about_scope.about_lock #faq .about_panel_head{ margin-bottom: 16px; }


/**********************************
/**********************************
/**********************************

Kampagnen Style

/**********************************
/**********************************
/*********************************/

    
.sca_fullbleed{
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;              /* Sektion wirklich bildschirmbreit */
}
#hero .sca_container{ margin-inline:auto; }
    
/* erzwingt zentrierte Bühne für alle sca_ Sektionen */
.crx-content .sca_container,
.content .sca_container {
  margin-left:auto !important;
  margin-right:auto !important;
  max-width: var(--stx-maxw) !important;
  padding-left: var(--stx-gap-3) !important;
  padding-right: var(--stx-gap-3) !important;
}

/* etwas mehr Platz rechts für die Headline-Spalte */
@media (min-width: 1024px){
  #hero .sca_grid-2{ grid-template-columns: 1.05fr 0.95fr; }
  #hero .sca_grid-2 > div:first-child{ justify-self:center; }
}
/* mobil: Portrait unter den Text */
@media (max-width: 767px){
  #hero .sca_grid-2{ grid-template-columns: 1fr; }
  #hero aside{ order:2; }
}

/* Vollflächiger Seitenverlauf – unabhängig vom body */
.stx_backdrop{
  position: fixed;
  inset: 0;
  z-index: 0; /* wichtig: nicht negativ, sonst evtl. hinter dem CMS-body */
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 20% -10%, #151B24 0%, transparent 60%),
    linear-gradient(180deg, #0E131A 0%, #121923 40%, #141C26 100%);
}

/* Alle Inhaltselemente bewusst über den Backdrop legen */
.stx_layer{
  position: relative;
  z-index: 1;
}

/* Container & Grid */
.sca_container { width: min(100%, var(--stx-maxw)); margin-inline: auto; padding: 0 var(--stx-gap-3) }
.sca_section { padding: var(--stx-gap-6) 0 }
.sca_grid { display: grid; gap: var(--stx-gap-4) }
@media (min-width: 768px) {
.sca_grid-2 { grid-template-columns: 1fr 1fr }
.sca_grid-3 { grid-template-columns: repeat(3, 1fr) }
.sca_grid-4 { grid-template-columns: repeat(4, 1fr) }
}


/* Badges */
    .sca_badge {
    display: inline-flex;
     align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    border: 1px solid var(--stx-line);
    color: var(--stx-muted);
    background: rgba(20,27,35,.55);
    backdrop-filter: blur(3px);
}
	
/* Typo */
.sca_h1 { font-size: clamp(2rem, 2.5vw + 1rem, 3.2rem); line-height:1.15; margin: 0 0 var(--stx-gap-3) }
.sca_h2 { font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem); margin: 0 0 var(--stx-gap-3) }
.sca_h3 { font-size: clamp(1.9rem, .6vw + 1rem, 1.3rem); margin: 0 0 .75rem }
.sca_lead { color: var(--stx-muted); font-size: clamp(1rem, .5vw + .9rem, 1.125rem) }


/* Card */
.sca_card {
/* etwas heller und freundlicher */
background: linear-gradient(180deg, #141B24, rgba(20,27,36,.88));
border: 1px solid #2A394C;
border-radius: var(--stx-radius);
box-shadow: 0 12px 28px rgba(0,0,0,.35);
padding: var(--stx-gap-4);
}


/* Buttons */
.sca_btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .85rem 1.1rem; font-weight: 600; border-radius: 999px; text-decoration: none;
transition: transform .08s ease, filter .15s ease, background .15s ease, border-color .15s ease;
border: 1px solid transparent; cursor: pointer;
}

.sca_btn:active { transform: translateY(1px) }


.sca_btn--primary { background: var(--stx-primary); color: #fff }
.sca_btn--primary:hover { background: var(--stx-primary-600); box-shadow: 0 8px 24px rgba(225,29,46,.25) }
.sca_btn--primary:focus-visible { outline: none; box-shadow: var(--stx-ring) }

    .sca_btn--ghost { background: transparent; color: #DD0F0F; border-color: var(--stx-line) }
    .sca_btn--ghost:hover { border-color: var(--stx-text) }

    /* Inputs & Form */
    .sca_field { display: grid; gap: .5rem }
    .sca_label { font-size: .95rem; color: var(--stx-muted) }

    .sca_input, .sca_select, .sca_textarea {
      width: 100%; padding: .9rem 1rem; border-radius: 12px;
      border: 1px solid var(--stx-line); background: #0E141B; color: var(--stx-text);
    }
    .sca_input:focus, .sca_select:focus, .sca_textarea:focus { outline: none; box-shadow: var(--stx-ring); border-color: var(--stx-primary) }
    .sca_help { font-size: .85rem; color: var(--stx-muted) }

    /* Badges */
    .sca_badge { display:inline-block; padding:.3rem .65rem; border-radius:999px; font-size:.8rem; border:1px solid var(--stx-line); color:var(--stx-muted) }
    .sca_badge--ok { color:#0CE2A7; border-color:rgba(12,226,167,.35) }
    .sca_badge--warn { color:var(--stx-amber); border-color:rgba(245,158,11,.35) }

/* FAQ Details */
details.sca_card summary{ list-style:none; cursor:pointer; font-weight:700; }
details.sca_card summary::-webkit-details-marker{ display:none }
details.sca_card[open]{ border-color:#35465C; box-shadow: 0 14px 30px rgba(0,0,0,.35) }
details.sca_card > div{ margin-top:.85rem; color:var(--stx-text) }


/* Hint Card */
.sca_hint { background: rgba(37, 99, 235, .08); border:1px dashed #2d4f8a }


/* Floating CTA */
.sca_fab { position: fixed; right: 18px; bottom: 18px; z-index: 80; }
.sca_fab .sca_btn{ padding:.9rem 1.15rem }


/* Utility */ */
.sca_row { display:flex; gap:var(--stx-gap-3); flex-wrap:wrap }
.sca_kicker { text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; color: var(--stx-amber) }
.sca_hr { height:1px; background: var(--stx-line); border:0; margin: var(--stx-gap-4) 0 }



    /* Sticky Topbar (Telefon/Termin) */
    .sca_topbar { position: sticky; top: 0; z-index: 50; width: 100%;/*backdrop-filter: blur(7px); background: rgba(11,14,18,.6); border-bottom:1px solid var(--stx-line)*/ }
    .sca_topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--stx-gap-3); padding:.6rem 0 }

    /* Trust Strip */
    .sca_trust { display:flex; gap: var(--stx-gap-3); flex-wrap:wrap; align-items:center; opacity:.9 }
    .sca_trust img { height:32px; filter: grayscale(1); opacity:.8 }

    /* Footer */
    footer { border-top:1px solid var(--stx-line); background: #0A0D12 }
.sca_badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem .75rem;
  border-radius: 999px;
  font-size: 1.52rem;
  border: 1px solid green;
  color: #fff;
  background: green;
  backdrop-filter: blur(3px);
  margin-top: 25px;
}
/* Sektion 1 – helles Layout + bessere Lesbarkeit */
.section--light {
  background: #ffffff;
  color: #0B0E12;
}
.section--light .sca_h2 {
  font-size: clamp(2.8rem, 1.4vw + 1rem, 2.1rem);
  margin-bottom: .75rem;
}
.section--light .sca_lead {
  color: #334155;            /* dunkles Blau-Grau für Fließtext */
  font-size: clamp(1.02rem, .55vw + .95rem, 1.15rem);
}
.section--light ul {
  margin: .75rem 0 1.25rem;
  padding-left: 1.15rem;
}
.section--light li {
  margin: .35rem 0;
  font-size: clamp(1.6rem, .4vw + .95rem, 1.1rem);
}

/* CTA-Reihe sauber und ohne ?-Ersatz */
.section--light .sca_row .sca_btn {
 /* font-size: 1rem;*/
}

/* Hinweis-Karte: kleiner, heller, nützlicher Inhalt */
.sca_card--hint {
  background: #F8FBFF;             /* hell & freundlich */
  border: 1px solid #D6E3FF;
  box-shadow: 0 8px 18px rgba(2, 24, 62, .06);
}
.sca_card--hint .sca_kicker {
  color: #1D4ED8;                   /* seriöses Blau */
}
.sca_card--hint p,
.sca_card--hint ul {
  color: #1F2937;
}

/* Grid-Balance der Sektion: Text breiter, Hinweis schmaler */
#warum .sca_grid-2 {
  grid-template-columns: 1.15fr .85fr;
  align-items: start;
}
@media (max-width: 767px) {
  #warum .sca_grid-2 { grid-template-columns: 1fr; }
}
/* Sektion 2 – helles Layout + Feature-Karten wie Sektion 1 */
.section--light { background:#fff; color:#0B0E12; }

#ansatz .sca_h2{
  font-size: clamp(2.8rem, 1.4vw + 1rem, 2.1rem);
  margin-bottom: .75rem;
}

/* Feature-Karten: heller, freundlicher, konsistent zu Sektion 1 */
.sca_card--feature{
  background:#F8FBFF;
  border:1px solid #D6E3FF;
  box-shadow:0 10px 22px rgba(2,24,62,.07);
  border-radius:16px;
  padding:1.25rem 1.25rem 1.1rem;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-height: 180px;
}
.sca_card--feature:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 28px rgba(2,24,62,.10);
  border-color:#C5D9FF;
}

.sca_card--feature .sca_h3{
  margin:0 0 .5rem;
  font-size: clamp(1.9rem, .7vw + 1rem, 1.3rem);
  color:#0F3E78; /* seriöses Blau */
}
.sca_card--feature p{
  color:#334155; /* gut lesbares Blau-Grau */
  margin:.25rem 0 0;
  font-size: clamp(1.6rem, .4vw + .92rem, 1.06rem);
}

/* Grid-Breakpoints: 4 → 2 → 1 */
#ansatz .sca_grid{
  gap: 1.25rem;
}
@media (min-width:1024px){
  #ansatz .sca_grid-4{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width:768px) and (max-width:1023px){
  #ansatz .sca_grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:767px){
  #ansatz .sca_grid-4{ grid-template-columns: 1fr; }
}

/* kleine Icon-Badges (optional, rein CSS/Emoji) */
.sca_ico{
  font-size: 1.05rem;
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:999px;
  background:#E7F0FF; color:#0F3E78; margin-right:.5rem;
}

/* Sektion: Region & Wappen (hell, emotional) */
.section--light { background:#fff; color:#0B0E12; }

#regional .sca_h2{
  font-size: clamp(2.8rem, 1.4vw + 1rem, 2.1rem);
  margin-bottom: .5rem;
}
#regional .sca_lead{
  color:#334155;
  font-size: clamp(1.02rem, .55vw + .95rem, 1.15rem);
  margin-bottom: 1.25rem;
}

/* Wappen-Galerie */
.stx_wappen-grid{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
}
@media (min-width: 640px){
  .stx_wappen-grid{ grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}
@media (min-width: 900px){
  .stx_wappen-grid{ grid-template-columns: repeat(4, minmax(170px, 1fr)); }
}
@media (min-width: 1200px){
  .stx_wappen-grid{ grid-template-columns: repeat(6, minmax(170px, 1fr)); }
}

.stx_wappen{
  display:flex; align-items:center; gap:.75rem;
  padding:.9rem 1rem; border-radius:14px;
  background:#F8FBFF; border:1px solid #D6E3FF;
  box-shadow:0 8px 18px rgba(2,24,62,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.stx_wappen:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 28px rgba(2,24,62,.10);
  border-color:#C5D9FF;
}

/* Bildrahmen rund */
.stx_wappen-ico{
  width:48px; height:48px; border-radius:999px; flex:0 0 48px;
  display:grid; place-items:center; overflow:hidden;
  background:#E7F0FF; border:1px solid #C5D9FF;
  font-weight:700; color:#0F3E78; font-size:.95rem;
}
.stx_wappen-ico img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Ortsname */
.stx_wappen-name{ font-weight:600; color:#0F3E78; }
.stx_wappen-sub{ font-size:.86rem; color:#475569; }

/* === 3er-Vergleich: hell + eigenständiger Look === */
#vergleich.section--light { background:#fff; }
/* 3er-Grid: gleiche Gitters wie oben, identische Höhe */
.stx_compare3 {
  display: grid;
  gap: 2rem;                  /* großzügig wie oben */
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
@media (min-width: 900px){ .stx_compare3{ grid-template-columns: repeat(3, 1fr); } }

.stx_glass{
  background: linear-gradient(180deg, #F9FBFF 0%, #F2F6FF 100%);
  border:1px solid #D8E6FF;
  border-radius:18px;
  box-shadow: 0 14px 28px rgba(6, 29, 74, .08);
  padding:1.25rem 1.25rem 1.1rem;
}

.stx_glass h3{ margin:.1rem 0 .6rem; color:#0F3E78; font-size:1.6rem; }
.stx_big{ font-size:1.8rem; font-weight:800; line-height:1.1; }
.stx_sub{ color:#475569; font-size:1.2rem; }

.stx_list{ margin:.6rem 0 0; padding-left:1.1rem; color:#334155; }
.stx_list li{ margin:.35rem 0; }

/* SECURITAX Karte: zarter grüner Akzent */
.stx_card-own .stx_big{ color:#0B6B4B; }
.stx_card-own .stx_tag{ background:#E9FBF3; border:1px solid #C5F1DE; color:#0B6B4B; }

/* Abo Karte: rote Spar-Badge */
.stx_save{
  display:inline-block; margin-top:.6rem; padding:.42rem .7rem; border-radius:999px;
  background:#FFEFEF; border:1px solid #FFD9D9; color:#B1121F; font-weight:700; font-size:1.2rem;
}

/* Rechner Karte */
.stx_calc .row{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.4rem 0 .6rem; }
.stx_calc label{ font-size:1.2rem; color:#334155; display:flex; flex-direction:column; gap:.25rem; }
.stx_calc input{
  padding:.58rem .7rem; border-radius:10px; border:1px solid #D6E3FF; background:#fff; width:120px;
}
.stx_calc .out{ font-weight:800; color:#0F3E78; }

/* CTA-Reihe unten */
#vergleich .stx_row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
#vergleich .stx_btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem;
  border-radius:999px; border:1px solid transparent; font-weight:600; text-decoration:none; }
#vergleich .stx_btn--primary{ background:#E11D2E; color:#fff; }
#vergleich .stx_btn--primary:hover{ background:#C31625; }
#vergleich .stx_btn--ghost{ background:transparent; color:#0B0E12; border-color:#D6E3FF; }

/* Einheitliche Section-Abstände wie oben */
#vergleich.section--light .sca_container { max-width: 1200px; }
#vergleich.section--light { padding-top: 2.2rem; padding-bottom: 2.4rem; }

/* Karten-Style wie Regional-/Feature-Karten (hell + freundlich) */
.stx_glass{
  background:#F8FBFF;                 /* statt Verlauf: identisch zu restlichen Cards */
  border:1px solid #D6E3FF;
  border-radius:16px;
  box-shadow:0 10px 22px rgba(2,24,62,.07);
  padding:1.25rem 1.25rem 1.1rem;
  display:flex; flex-direction:column; /* für gleiche Höhen */
  width: 100%;
}

/* Headings und Body-Spalte konsistent */
.stx_glass h3{ margin:.1rem 0 .6rem; color:#0F3E78; font-size:1.6rem; }
.stx_card-body{ flex:1 1 auto; display:flex; flex-direction:column; }
.stx_list{ margin:.6rem 0 0; padding-left:1.1rem; color:#334155; font-size:1rem; }
.stx_list li{ margin:.35rem 0; }

/* Key-Zahlen konsistent zum Rest */
.stx_big{ font-size:1.7rem; font-weight:800; line-height:1.15; color:#0F3E78; }
.stx_sub{ color:#475569; font-size:.96rem; }

/* Spar-Badge dezent, wie Badges oben */
.stx_save{
  align-self:flex-start;
  margin-top:.6rem; padding:.42rem .7rem; border-radius:999px;
  background:#FFEFEF; border:1px solid #FFD9D9; color:#B1121F; font-weight:700; font-size:.92rem;
}

/* Mini-Rechner an Kartenstil anpassen */
.stx_calc .row{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.4rem 0 .6rem; }
.stx_calc label{ font-size:.9rem; color:#334155; display:flex; flex-direction:column; gap:.25rem; }
.stx_calc input{
  padding:.58rem .7rem; border-radius:10px; border:1px solid #D6E3FF; background:#fff; width:120px;
}
.stx_calc .out{ font-weight:800; color:#0F3E78; }



@media (min-width:900px){ .stx_compare3{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:899px){ .stx_glass{ padding:1rem; } }

/* CTA-Reihe wie überall */
#vergleich .stx_row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.2rem; }
#vergleich .stx_btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem;
  border-radius:999px; border:1px solid transparent; font-weight:600; text-decoration:none; }
#vergleich .stx_btn--primary{ background:#E11D2E; color:#fff; }
#vergleich .stx_btn--primary:hover{ background:#C31625; }
#vergleich .stx_btn--ghost{ background:transparent; color:#0B0E12; border-color:#D6E3FF; }

/* Gemeinsame Bühne für Beispiel + Ablauf + Stimmen */
/* Bühne ruhiger */
/* Ruhiger How-it-works Streifen */
#how.section--light{ background:#F7FAFE; padding:3rem 0; }
#how .sca_container{ max-width:1200px; }

.how_head{ margin:0 0 .75rem; font-size:clamp(1.5rem,1.2vw+1rem,2rem); color:#0F3E78; }
.how_sub{ color:#334155; margin:0 0 1.25rem; }

.how_steps{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media(min-width:960px){ .how_steps{ grid-template-columns:repeat(3,1fr); } }

.how_step{
  display:flex; gap:.9rem; align-items:flex-start; padding:1rem;
  background:#fff; border:1px solid #E4ECF8; border-radius:14px;
  box-shadow:0 6px 14px rgba(8,37,85,.06); transition:transform .12s ease, box-shadow .12s ease;
}
.how_step:hover{ transform:translateY(-2px); box-shadow:0 12px 22px rgba(8,37,85,.10); }
.how_num{
  min-width:34px; height:34px; border-radius:999px; background:#0F3E78; color:#fff;
  display:grid; place-items:center; font-weight:700; box-shadow:0 4px 10px rgba(15,62,120,.18);
}
.how_title{ margin:0 0 .9rem; font-weight:700; color:#0B1530 }
.how_text{ margin:0; color:#334155 }

.how_proof{
  margin-top:1rem; color:#475569; display:flex; gap:.75rem; flex-wrap:wrap; align-items:center;
}
.how_badge{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:999px;
  background:#F8FBFF; border:1px solid #D6E3FF; color:#0F3E78; font-weight:600; font-size:1.1rem;
}

.how_cta{ margin-top:1.25rem; display:flex; gap:1rem; flex-wrap:wrap }
.how_btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; border-radius:999px;
  border:1px solid #D6E3FF; font-weight:600; text-decoration:none }
.how_btn--primary{ background:#E11D2E; color:#fff; border-color:transparent }


/* Termin-Sektion (ruhig, hell) */
#termin .stx_grid { display:grid; gap:1.25rem; }
@media (min-width: 980px){ #termin .stx_grid-2 { grid-template-columns: 1fr 1fr; } }

.stx_card {
  background:#fff; border:1px solid #E4ECF8; border-radius:16px;
  box-shadow:0 6px 14px rgba(8,37,85,.06);
  padding:1.25rem; display:flex; flex-direction:column; gap:.75rem;
}

/* Hinweis-Box unter jedem Widget */
.stx_hint {
  background:#F8FBFF; border:1px dashed #D6E3FF; border-radius:14px;
  padding:.9rem; color:#1F2937;
}
.stx_h3 { margin:.25rem 0 .2rem; font-size:2rem; color:#0F3E78; }
.stx_help { color:#334155; font-size:1.6rem; margin:0; }

/* Höhe der Widgets auf Mobil etwas kleiner */
@media (max-width: 480px){
  .calendly-inline-widget{ height:620px !important; }
}

/* FAQ – Radio-Accordion, hell + rote Top-Linie */
#faq .sca_container{ max-width: 1200px; }

.faq{ display:grid; gap:1rem; }
.faq_item{
  background:#FFFFFF; border:1px solid #E4ECF8; border-radius:16px;
  box-shadow:0 8px 18px rgba(8,37,85,.06); overflow:hidden;
  width: 100%;
}
.faq_item::before{
  content:""; display:block; height:3px; background:#E11D2E; /* rote Linie */
}

/* Fragezeile */
.faq_q{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; cursor:pointer; padding:1rem 1.1rem;
  font-weight:700; color:#0F3E78;
}
.faq_q::after{
  content:"▾"; font-size:1rem; color:#64748B; transition:transform .15s ease;
}

/* Antwortbereich */
.faq_a{
  background:#F7FAFE; color:#1F2937;
  padding:0 1.1rem; max-height:0; overflow:hidden;
  transition:max-height .2s ease, padding .2s ease;
}
.faq_a p{ margin: .75rem 0 1rem; }

/* Radio verstecken */
.faq_ctrl{ position:absolute; left:-9999px; }

/* Geöffnet: via :checked */
.faq_ctrl:checked + .faq_q::after{ transform:rotate(180deg); }
.faq_ctrl:checked + .faq_q + .faq_a{
  padding: .6rem 1.1rem 1rem; max-height: 400px; /* reicht für 2–3 Absätze */
}

/* Hover/Focus states */
.faq_q:hover{ background:#F8FBFF; }
.faq_q:focus-visible{ outline:2px solid #93C5FD; outline-offset:2px; border-radius:12px; }

/* Abstand zur nächsten Frage */
.faq_item + .faq_item{ margin-top:.25rem; }

/* Finaler Dark-Hero CTA */
#finalcta {
  background: linear-gradient(180deg, #0E131A 0%, #121923 60%, #141C26 100%);
  color: #EAF2FF;
  padding: 3.2rem 0 3.6rem;
}
#finalcta .sca_container { max-width: 1200px; }

.finalcta_wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 2.2rem 1.6rem;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
  background:
    radial-gradient(800px 280px at 15% -20%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 380px at 110% 120%, rgba(255,56,56,.08), transparent 60%);
}

/* rote Top-Linie wie im Design */
.finalcta_wrap::before {
  content:""; position:absolute; left:0; top:0; right:0; height:4px;
  background:#E11D2E;
}

.finalcta_h1 {
  margin: 0 0 .6rem;
  font-size: clamp(2rem, 1.4vw + 1.1rem, 2.3rem);
  line-height: 1.2;
  color:#fff;
}
.finalcta_sub {
  margin: 0 0 1.8rem; color:#C7D6F2;
  
}

.finalcta_row { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.4rem; }
.finalcta_btn {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.15rem; border-radius:999px; font-weight:700;
  border:1px solid transparent; text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.finalcta_btn--primary { background:#E11D2E; color:#fff; }
.finalcta_btn--primary:hover { background:#C31625; transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(225,29,46,.25); }
.finalcta_btn--ghost { background:transparent; color:#EAF2FF; border-color:rgba(255,255,255,.18); }
.finalcta_btn--ghost:hover { background:rgba(255,255,255,.06); transform:translateY(-1px); }

/* Trust-Chips */
.finalcta_trust { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.finalcta_chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.06); color:#D7E5FF;
  border:1px solid rgba(255,255,255,.14); font-weight:600; font-size:.92rem;
}

/* Layout: Text links, „Soft Spotlight“ rechts */
.finalcta_grid { display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width: 980px){
  .finalcta_grid { grid-template-columns: 1.2fr .8fr; }
}
.finalcta_art {
  display:none;
}
@media (min-width:980px){
/* Rechte Bildfläche: edles, halbtransparentes Portrait */
.finalcta_art { display:none; }
@media (min-width:980px){
  .finalcta_art{ display:block; align-self:center; }
  .finalcta_portrait{
    position:relative;
    width:100%;
    height:300px;                /* Höhe der Fläche */
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.35);
    background:
      radial-gradient(240px 160px at 70% 30%, rgba(255,90,90,.16), transparent 60%),
      radial-gradient(260px 180px at 20% 70%, rgba(92,154,255,.16), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  }
  .finalcta_portrait img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    opacity:.58;                      /* halbtransparent edel */
    filter: contrast(1.05) saturate(1.02);
    transform: translateX(6%);        /* leicht nach rechts, wirkt dynamischer */
  }
  /* sanfte Vignette, damit Text-Fokus links bleibt */
  .finalcta_portrait::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(120% 100% at 10% 50%, transparent 0%, rgba(0,0,0,.28) 65%);
  }
}