/* Fonts */
/* ***** */
@import url("fonts.css");

/* Variables */
/* ***** */
:root {
    --kb-blue: #2686a6;
    --kb-blue-dark: #0f5a73;
    --kb-grey: #5a5a5a;
    --kb-dark-grey: #313131;
    --kb-black: #5a5a5a;
    --kb-white: #ffffff;
}

/* Generic */
/* ******* */
body { font-family: 'Open Sans', sans-serif; color: var(--kb-grey); font-size: 1rem; line-height: 1.5; transform: none; }
h1, .h1 { font-size: 3.3rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
h2, .h2 { font-size: 2.75rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.05rem; }
h3, .h3 { font-size: 1.75rem; font-weight: 700; line-height: 1.3; color:var(--kb-black); }
h4, .h4 { font-size: 1.5rem; line-height: 1.5; }
ul { margin-top: 0; margin-bottom: 0; padding-left: 0; font-size: 1.25rem; list-style:none; }
li { margin-top: 15px; margin-bottom: 15px; display: block; line-height: 1.2; }
ul.dots { list-style-type: disc !important; padding-left:1em !important; margin-left:1em; }
ul.dots li { display: list-item; }
p { line-height: 1.5; }
::selection { background-color: var(--kb-blue); color: var(--kb-dark-grey); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--kb-blue); }
::-webkit-scrollbar-thumb { background: var(--kb-blue-dark); }
::-webkit-scrollbar-thumb:hover { background-color: var(--kb-grey); }

.carousel-indicators {display: none;}

/* Styles */
/* ****** */
#hero {background: var(--kb-blue);}
.radiator {max-width: 32vw;}
.hero-wording h1 span {display: block; font-weight: normal; font-size: 0.62em;}
#topbar {z-index: 99;}
.hero-btn {background: #FFF !important; color:  var(--kb-blue) !important;}
.font-grey { color: var(--kb-grey); }
.hero-wording {
    flex-direction: column;
}
#cta:after {
    content: "In weniger als 2 Minuten";
    position: absolute;
    background: #14586e;
    color: #FFF;
    font-size: 13px;
    padding: 3px 11px;
    bottom: -21px;
    /* width: 100%; */
    left: 15px;
    border-radius: 15px;
    transform: rotate(-1deg);
}
.badge_figure {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 110px;
}
}
.sr-circle {}
.font-dgrey { color: var(--kb-dark-grey) !important; }
.material { font-family: 'Material Icons'; font-size: 1.5em; display: inline-block; float: left; margin-right: 10px; }
.top-p { display: inline-block; margin-top: 6px; margin-bottom: 5px; }
.bg-green { background-color: var(--kb-blue); }
.color-green { color: var(--kb-blue); }
.bg-grey { background-color: var(--kb-dark-grey); }
.button-green { text-align: center; background-color: #aecb36; border-radius: .4rem; padding: 1.125rem 1.75rem; font-size: 1.3rem; font-weight: 700; }
.btn-primary { color: white; background-color: var(--kb-blue); border-color: var(--kb-blue); letter-spacing:0.02em; }
.btn-primary:hover { background-color: var(--kb-blue-dark); border-color: var(--kb-blue-dark); }
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active { color: var(--kb-white); background-color: var(--kb-blue-dark); border-color: var(--kb-blue-dark); }
.rounded-start { border-radius: 10px 0 0 10px !important; }
.rounded-end { border-radius: 0 10px 10px 0 !important; }
#containerwrapper { background: var(--kb-white); box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); }
.static-background-section { height: 80vh;  display: flex; align-items: center; justify-content: center; color: white; text-align: center; }
.static-background-section-autoHeight { height: auto; background-size: cover; background-position: 50% 85%; background-attachment: fixed; display: flex; align-items: center; justify-content: center; color: white; text-align: center; }
.sbg-2 { background-image: linear-gradient(rgba(43, 43, 43, .62), rgba(43, 43, 43, .62)), url('../img/image-2.webp'); }
.sbg-3 { background: #ededed; }
.sbg-4 { background: #ededed;}
.section-content { background-color: rgba(0, 0, 0, 0.6); padding: 2rem; border-radius: 10px; border: 4px solid var(--kb-blue);}
.icon-mtop { margin-top: -4px; }
.cta-button-1 { font-size: 150%; margin-top: 30px; }
.contact_section { background-color: #5a5a5a; }
.image-box { position: relative; width: 100%; height: 400px; background-size: cover; background-position: center }
.image-text { position: absolute; bottom: 0; left: 0; padding: 15px; color: white; background-color: rgba(0, 0, 0, 0.35); width: 100%; }
.invalid-feedback { color: #ff7b88; }
.grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 100%; }
.grid-item { display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; }
.grid-item-special { border-top: 4px solid var(--kb-blue); border-right: 4px solid var(--kb-blue); border-radius: 0 30px 0 0; width: calc(100% + 2px); }
.grid-item-special-2 { border-top: 4px solid var(--kb-blue); border-left: 4px solid var(--kb-blue); border-radius: 30px 0 0 0; width: calc(100% + 2px); margin-left: -2px; }
.line-out-right { padding: 0; }
.line-out-right-2 { display: flex; justify-content: space-between; }
.flex-item-left { flex: 1; border-right: 4px solid var(--kb-blue); }
.flex-item-right { flex: 1; }
.flex-item-left-2 { flex: 1; }
.flex-item-right-2 { flex: 1; border-left: 4px solid var(--kb-blue); }
.head-border-1 { border-right: 4px solid var(--kb-blue); border-bottom: 4px solid var(--kb-blue); }
.head-border-2 { border-left: 4px solid var(--kb-blue); border-bottom: 4px solid var(--kb-blue); }
.hidden { opacity: 0; }
#successAlert { border-right: 4px solid #b7c74b; }
.border-round { border: 4px solid var(--kb-blue); }
.b-dics { border-radius: 15px; }
.text-shadow { text-shadow: -2px -1px 9px rgba(0,0,0,0.62); }
.text-left { text-align: left; }
.mon-pro { background: #fff; padding: 20px; border-radius: 15px; color: #000; font-weight: bold; font-size: 20px; }
#steps { position: relative; }
.stepsarrow { content: ""; position: absolute; bottom: -80px; width: 69px; height: 133px; background: url(..//img/arrow.svg); background-size: cover; }
#cookie-banner p {padding-bottom: 0px !important; margin-bottom: 0px !important; color: #FFF;}
#cookie-banner button {background: var(--kb-blue); color: var(--kb-dark-grey); border-radius: 15px; padding: 10px; margin-left: 15px; border: none; }
.cookie-notice {z-index: 9999999999 !important;}
#popup { background: var(--kb-dark-grey); color: #FFF; }
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex;
justify-content: center; align-items: center; visibility: hidden; z-index: 9999999; }
#popup { background-color: var(--kb-dark-grey); color: #FFF; padding: 20px; border-radius: 8px; text-align: center; max-width: 400px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }
#popup button { width: 100%; background: var(--kb-blue); color: var(--kb-dark-grey); border: none; border-radius: 15px; padding: 15px; }
#popup button.mutebtn { background: transparent; color: #ededed; }
#popup h3 { color: #FFF; }
#popup img { max-width: 100%; height: auto; border-radius: 8px; }
#close-btn { margin-top: 15px; padding: 10px 20px; background-color: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
#close-btn:hover { background-color: #555; }
.icons { width: 75%; }
#questions, #steps, #before-after, #ausstellung, #vid, #idea { background: #fff; z-index:0; position:relative; }
#kontakt { background: #5a5a5a; z-index:9999; position:relative; }
footer { background: var(--kb-blue); z-index:9999; position:relative; }
#vid, #steps2 { background: #ededed; z-index:9999; position:relative; }
figcaption {background: var(--kb-blue-dark); position: absolute; bottom: 0; left: 0;}
figure img {margin: 0 !important;}
figure {height: 400px;}
.dots { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; color: #FFF;}
.sticky-top { z-index: 99999 !important; }
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; z-index: 1000; }
#popup { position: relative; margin: 10% auto; padding: 20px; width: 90%; max-width: 400px; background-color: var(--kb-dark-grey); border-radius: 5px; text-align: center; }
.consent-buttons { margin-top: 15px; }
.consent-buttons button { margin: 5px; }
#customConsentOptions { display: none; margin-top: 10px; text-align: left; }
#customConsentOptions label { display: block; margin: 5px 0; }

/* Navbar */
/* ****** */
.navbar-custom { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
.navbar-custom img { height: 30px; }
.navbar-nav .nav-link { padding: 0.75rem 1.5rem; margin-left: 0.5rem; }
.navbar-toggler { border: none; }

/* Slider */
/**********/
.carousel-item { background-size: cover; background-position: 50% 85%; background-repeat: no-repeat; min-height: 650px; position: relative;}
.carousel-item:nth-child(1) { background-image: url('../img/image-3_slider.webp'); }
.carousel-item:nth-child(2) { background-image: url('../img/image-4_slider.webp'); }
.carousel-item:nth-child(3) { background-image: url('../img/image-5_slider.webp'); }
.carousel-item:nth-child(4) { background-image: url('../img/image-6_slider.webp'); }
.carousel-item:nth-child(5) { background-image: url('../img/image-7_slider.webp'); }
.carousel-item:nth-child(6) { background-image: url('../img/image-8_slider.webp'); }
.carousel-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); bottom: inherit !important; }

.question {
    border-bottom: 1px solid #ededed;
}

.quote {
    background: var(--kb-blue);
}

/* Media Queries, Mobile First */
/* *************************** */
@media (max-width: 600px) {
  #cta:after {
    bottom: -43px;
}  
.navbar-custom img {
    height: 60px !important;
}
}
@media (max-width: 768px) {
    .hero-wrap {
        flex-direction: column;
    }
    .radiator {
        width: 100%;
        max-width: none;
    }
    .sr-circle {
        order: 1;
    }
    .hero-wrap h1 {
        font-size: 1.8rem;
    }
#referenzen .carousel-item {min-height: 300px !important;}
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
@media (min-width: 1400px) {
}

/* Media Queries, Topdown */
/* ********************** */
@media (max-width: 1399.98px) {
}
@media (max-width: 1199.98px) {
	.static-background-section { background-attachment: scroll !important; }
	.static-background-section-autoHeight { background-attachment: scroll !important; }
        .static-background-section {height: auto !important}
    #hero {padding: 30px 10px 30px 10px}
}
@media (max-width: 991.98px) {
	.top-p { margin-top: 8px; font-size: 0.9em; }
	/* .video-sec {height: 90vh !important; } */
    h1, .h1 { font-size: 2.5rem; hyphens: auto; }
    h2, .h2 { font-size: 1.75rem; hyphens: auto; }
    h3, .h3 { font-size: 0.75rem; hyphens: auto; }
    h4, .h4 { font-size: 0.5rem; hyphens: auto; }
}
@media (max-width: 767.98px) {
	#topbar { display:none; }
	.smart-nav { width: 100%; border-radius: 10px !important; margin: 0 !important; }
	.navbar-nav { padding-top: 20px; }
    h1, .h1 { font-size: 1.5rem; hyphens: auto; }
    h2, .h2 { font-size: 1.25rem; hyphens: auto; }
    h3, .h3 { font-size: 1.25rem; hyphens: auto; }
    h4, .h4 { font-size: 1.25rem; hyphens: auto; }
}
@media (max-width: 575.98px) {
	ul li { line-height: 1.5; }
	.navbar-custom img { height: 20px; }
	p { font-size: 0.75; }
    .mon-pro { background: #fff; padding: 10px; border-radius: 15px; color: #000; font-weight: bold; font-size: 16px; }
    .stepsarrow { bottom: -50px; }
    .cta-button-1 { font-size: 100% !important;  }
}