@charset "utf-8";

/* fonts */
@font-face {font-family: 'Roboto';src: url('../fonts/Roboto-Regular.ttf') format('truetype');font-display: swap;}
@font-face {font-family: 'Montserrat';src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');font-display: swap;}


/* global color variables */
:root {--main-orange-color: #e74e02;--main-blue-color: #0e7db9;--main-light-blue-color: #6daed8;}

/* usage color: var(--main-orange-color); */

/* all */
*{hyphens:auto;font-family:'Roboto','Montserrat',sans-serif;}

/* floating-alongside */
.floating-alongside {opacity: 0;transition: opacity 1.5s ease-in-out;}
.floating-alongside.show {opacity: 1;}
.floating-alongside {position: fixed; top: 70vh; right: 23px; z-index: 1000;}
.floating-alongside a, .floating-alongside a:focus {width:57px;height:57px;text-align: center;text-decoration: none;background-color: var(--main-blue-color);border-radius: 50%;}
.floating-alongside i {font-size: 32px;color:#fff;}
.floating-alongside a:hover {background-color: #fff;box-shadow:0px 0px 3px 1px var(--main-blue-color);}
.floating-alongside a:hover i {color: var(--main-blue-color);}
.floating-alongside .phone, .floating-alongside .mail {margin-bottom: 10px}


/* header */
header {min-height:100vh;position:relative;color:var(--main-orange-color);}
header::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-image:url("/images/kanalrohr-rohrreinigung.webp");background-size:cover;background-position:center;background-repeat:no-repeat;filter:brightness(0.45);z-index:-1;}header div.headAllHeightFlex {flex-grow: 1;}
header div.headAllHeight {height: 100%;}
header div.col.headAllHeight {padding:100px 0 80px 0;}


nav img.navbar-logo {max-width: 300px;position: relative;left: -25px;}
nav i {color: #fff;}
nav .close i {color: var(--main-blue-color);}
nav .navbar-tel i {margin-right:15px;font-size:31px;}
nav .menuBtn i {font-size:33px;}
nav button.menuBtn {padding:0;background-color: transparent;}
nav button.menuBtn, nav button.menuBtn:focus {border:none;box-shadow: none;}
nav.navbar{background: transparent;padding-top: 20px;padding-bottom: 12px;}
navbar-logo{position:relative;left:-25;}


nav .container-fluid{display: flex;align-items: center;justify-content: space-between;}
nav .dropdown-menu {border:none;}
nav .nav-item {padding: 15px 30px;}
nav ul.navbar-nav li{text-align: center;}
nav .nav-item a.nav-link{font-size:1.3rem;}
nav #navbarMenu{z-index: 1001;position: fixed; top:0; right:-100vw; width: 100vw; height: 100vh;background-color: #FFF;}
nav #navbarMenu .close {padding:23px; text-align: left;font-size: 2rem;}
nav #navbarMenu .close i {cursor: pointer;}
nav #navbarMenu .wrapper {height: 100vh;}
nav #navbarMenu .wrapper .navFooter {color: var(--bs-body-color);margin-bottom: 40px;}
nav #navbarMenu .wrapper .navFooter img {max-width: 213px;}
nav #navbarMenu .wrapper .navFooter a {text-decoration: none;color: var(--bs-body-color);}



header h1{font-size:clamp(40px,6vw,90px);color:#ffffff;font-weight:600;line-height:1.1;text-shadow:none;}
header h2{font-size:clamp(28px,4vw,60px);color:#ffffff;font-weight:400;margin-top:10px;text-shadow:none;}
header .c2a:hover {/* background-color:var(--main-orange-color); */color:#fff;}
header .c2a span{transition: all 0.7s;z-index: -1;}
header .c2a .first {content: "";position: absolute;right: 100%;top: 0;width: 25%;height: 100%;background: var(--main-orange-color);}
header .c2a:hover .first {top: 0;right: 0;}
header .c2a .second {content: "";position: absolute;left: 25%;top: -100%;height: 100%;width: 25%;background: var(--main-orange-color);}
header .c2a:hover .second {top: 0;left: 50%;}
header .c2a .third {content: "";position: absolute;left: 50%;height: 100%;top: 100%;width: 25%;background: var(--main-orange-color);}
header .c2a:hover .third {top: 0;left: 25%;}
header .c2a .fourth {content: "";position: absolute;left: 100%;top: 0;height: 100%;width: 25%;background: var(--main-orange-color);}
header .c2a:hover .fourth {top: 0;left: 0;}

.c2aBtn2{margin: 0 auto;max-width: 414px;display: inline-block;font-size: 1.6rem;letter-spacing: 1px;padding: 15px 24px;border: 2px solid var(--main-orange-color);background-color: var(--main-orange-color);color: #fff;text-decoration: none;border-radius: 8px;box-shadow: 0 4px 12px rgba(0,0,0,0.12);}
.c2aBtn2:hover{background-color: #d94800;color: #fff;box-shadow: 0 6px 16px rgba(0,0,0,0.18);transform: translateY(-1px);}
.c2aBtn2:after{display: none;}
.c2aBtn2 i{margin-right: 10px;}


header .form-control, header .form-control:focus {background-color:#ffffff;;border-color:#cbcfd8;font-size:1.2rem;}
header .form-control:focus {box-shadow:0 0 0 .05rem rgba(30,56,126,.25);}
header .input-group {height:60px;}
header .input-group i {color:var(--main-orange-color);font-size:1.3rem;}
header .input-group .input-group-text {padding:.375rem 1rem;}
header button.btn{
padding:.375rem 1rem;
background-color:#ffffff;
border-color:#ffffff;
border-left:none;}
header button.btn:hover {background-color:rgb(30, 56, 126, 0.5);}
header button.btn:hover i {color:#000;}

/* searchPartnerResult */
body {position: relative;}
.searchPartnerResult{position:absolute;left:0;right:0;top:100%;background-color:#fff;max-height:230px;overflow-y:auto;border-radius:0 0 10px 10px;z-index:999;box-shadow:0 10px 25px rgba(0,0,0,0.18);}
.searchPartnerResult .filteredPlaces {display: block; text-decoration: none; color:var(--bs-body-color); padding: 10px 30px;cursor: pointer;}

/* content */
div.content section {margin: 53px 0;text-align: justify;}
div.content section h3 {text-align: center;margin-bottom:0.2rem;}
div.content section h3.blue-small {color:var(--main-orange-color);font-size:calc(1.2rem + .6vw);margin-bottom:0.2rem;}
div.content section p.blue-small {color:var(--main-orange-color);font-size:calc(1.2rem + .6vw);margin-bottom:0.2rem;text-align:center;}
div.content section p {font-size:calc(1rem + .6vw);}
div.content section .contentImage img {width: 100%;/* box-shadow: 0px 0px 1px 1px var(--main-orange-color); */ border-radius: 10px;}
.videoService {width: 100%;border-radius: 10px;}

/* reviews */
#reviews .carousel {margin: 1rem 0;}
#reviews .carousel-indicators {margin-bottom: -1rem;}
#reviews .carousel-inner {min-height:470px;}
#reviews img {margin-top: 0.5rem;width:25%;border-radius:50%;box-shadow:0px 0px 5px 1px var(--main-orange-color);}
#reviews p.reviewName {margin:10px 0;}
#reviews .stars {margin-bottom:10px;color:#FECD19;}
#reviews .quote {position:absolute;width:50px;height:50px;top:60px;left:0;font-size:4rem;color:#a3a3a3;}
#reviews p.reviewText {font-size: 0.9rem;}

/* services */
#services .accordion-button {/* color:var(--main-orange-color); */font-size: 1.3rem;}
#services .accordion-button:focus {border-color:none;box-shadow: none;}
#services .accordion-button:not(.collapsed) {color: var(--bs-accordion-btn-color);background-color:inherit;}
#services button.accordion-button, #services .accordion-body {padding-left: 0;padding-right:0;}
#services .serviceIconWrapper {width:20%;margin-right:10px;text-align: center;}
#services img.serviceIcon {height:50px;}
#services img.serviceImage {width:100%;border-radius: 10px;}
#services a.moreDetails {padding: 10px 15px; text-decoration: none; background-color: var(--main-orange-color);color: #fff;font-weight: bold;border-radius: 5px;}
#services a.moreDetails:hover {background-color: #fff;color: var(--main-orange-color);box-shadow:0px 0px 3px 1px var(--main-orange-color);}

.accordion-item {border: none!important;}

/* imprint */
#imprint .accordion-button {font-size: 1.1rem;}
#imprint .accordion-button:focus {border-color:none;box-shadow: none;}
#imprint .accordion-button:not(.collapsed) {color:var(--main-orange-color);background-color:inherit;}
#imprint button.accordion-button, #imprint .accordion-body {padding-left: 0;padding-right:0;}
#imprint .imprintIconWrapper {margin-right:17px;}
#imprint .imprintIconWrapper i {font-size:2rem;}
#imprint img.serviceImage {width:100%;border-radius: 10px;}

/* video */
.ytVideoWrapper {position: relative;width: 100%;padding-bottom: 56.25%;}
#video iframe.ytVideo {border-radius: 10px;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* contact */
#contact #success-contact-form {margin: 0 15px 15px; text-align:center; border:1px solid #157a08; color:#157a08; padding:5px 0; border-radius:5px; font-size:15px;}
#contact form#contact-form {font-size: 1.3rem;text-align:center;}
#contact input, #contact textarea {padding:10px;width:100%;border:none;border-bottom: 1px solid var(--bs-body-color);color:var(--bs-body-color);}
#contact ::placeholder {color:var(--bs-body-color);}
#contact button {margin:20px 0;width:60%;border-radius:10px;font-size:1.2rem;background-color: var(--main-orange-color);color: #fff;}
#contact button:hover {color:var(--main-orange-color);background-color: #fff;border: 1px solid var(--main-orange-color)}

/* openStreetMap */
#openStreetMap #map {min-height:400px;border-radius: 10px;}

/* Call Button */
div.callBtnBox {display: flex; justify-content: center; align-items: center;}
div.callBtnInnerTxt {position:absolute; z-index:2;}
div.callBtnBox .btn {line-height: 55px; height: 70px; text-align: center; width: 20rem; cursor: pointer; display:flex; justify-content:center;}
div.callBtnBox .btn:hover {color:var(--main-orange-color);}
div.callBtnBox .btn-special {color: #FFF;font-size:1.2rem;transition: all 0.5s; position: relative;}
div.callBtnBox .btn-special::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,117,188,0.4);background-color: var(--main-orange-color); transition: all 0.3s;}
div.callBtnBox .btn-special:hover::before {opacity: 0;transform: scale(0.5,0.5);}
div.callBtnBox .btn-special::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;opacity: 0;transition: all 0.3s;border: 1px solid rgba(0,117,188,0.5);border: 1px solid var(--main-orange-color);transform: scale(1.2,1.2);}
div.callBtnBox .btn-special:hover::after {opacity: 1;transform: scale(1,1);}

/* iconService */
#iconServices .iconWrapper i {font-size: 4rem;}
#iconServices .iconWrapper p{font-size: 1rem;font-weight: bold;color: var(--bs-gray-900);}

/* footer */
footer {margin:50px 0 20px 0;}
footer img {width:63%;}
footer i {font-size:2.1rem;color:#043882;}
footer a {text-decoration: none;color:var(--bs-body-color);}
footer .footerPartnerVorOrt {font-size: 0.9rem;}
footer .footerPartnerVorOrt .title {font-size: 0.95rem;font-weight: bold;}
footer .footerPartnerVorOrt a {padding: 0px 10px;}
footer .copyrightPowered {font-size: 0.8rem;}

/* cookie consent button */
.cookie-consent-btn {position: fixed;bottom: 20px;left: 20px;z-index: 1;background-color: #0e7db9;border: none;border-radius: 50%;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;cursor: pointer;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
.cookie-consent-btn i {color: rgba(255, 255, 255, 0.7);font-size: 24px;}

/* Desktop Menü */
.desktop-menu{list-style:none;display:flex;gap:24px;margin:0 0 0 auto;padding:0;align-items:center;}

.desktop-menu li{display:inline-block;}
.desktop-menu a{text-decoration:none;color:#ffffff;font-size:18px;font-weight:500;}
.desktop-menu a:hover{color:#ffffff;}

/* Navbar / Logo */
nav.navbar{background:transparent;padding-top:20px;padding-bottom:12px;}
nav .container-fluid{display:flex;align-items:center;justify-content:space-between;}
nav img.navbar-logo{max-width:260px;height:auto;position:relative;left:-10px;}
nav button.menuBtn{display:none;padding:0;background-color:transparent;border:none;box-shadow:none;}
nav button.menuBtn:focus{border:none;box-shadow:none;}
nav .menuBtn i{font-size:33px;color:#fff;}

nav i{color:#fff;}
nav .close i{color:var(--main-blue-color);}
nav .dropdown-menu{border:none;}
nav .nav-item{padding:15px 30px;}
nav ul.navbar-nav li{text-align:center;}
nav .nav-item a.nav-link{font-size:1.3rem;}

nav #navbarMenu{z-index:1001;position:fixed;top:0;right:-100vw;width:100vw;height:100vh;background-color:#FFF;}
nav #navbarMenu .close{padding:23px;text-align:left;font-size:2rem;}
nav #navbarMenu .close i{cursor:pointer;}
nav #navbarMenu .wrapper{height:100vh;}
nav #navbarMenu .wrapper .navFooter{color:var(--bs-body-color);margin-bottom:40px;}
nav #navbarMenu .wrapper .navFooter img{max-width:213px;}
nav #navbarMenu .wrapper .navFooter a{text-decoration:none;color:var(--bs-body-color);}

/* Hero */
.hero-call-text{color:#ffffff;text-align:center;text-shadow:none;max-width:360px;margin:0 auto 14px auto;line-height:1.2;font-size:clamp(22px, 2.2vw, 40px);font-weight:600;}
.hero-call-sub{display:block;font-size:14px;margin-top:8px;opacity:0.9;line-height:1.2;font-weight:400;letter-spacing:0.5px;}

.hero-phone-icon i{font-size:42px;color:#ffffff !important;text-shadow:none !important;}
.hero-phone-number,
.hero-phone-number:hover,
.hero-phone-number:focus,
.hero-phone-number:active{color:#ffffff !important;font-size:clamp(28px, 3vw, 42px);font-weight:600;letter-spacing:0;text-decoration:none !important;text-shadow:none !important;box-shadow:none !important;background:none !important;transition:none !important;}

header h1{font-size:clamp(42px, 5vw, 72px);color:#ffffff;font-weight:600;line-height:1.1;text-shadow:none;margin-bottom:8px;}
header h2{font-size:clamp(24px, 3vw, 38px);color:#ffffff;font-weight:400;margin-top:0;text-shadow:none;}

/* Suchfeld */
.heroSearchBox{max-width:640px;width:100%;margin:24px auto 0 auto;}

header .form-control,
header .form-control:focus{background-color:#ffffff;border-color:#cbcfd8;font-size:1.1rem;box-shadow:none;}

header .input-group{height:56px;}
header .input-group i{color:var(--main-orange-color);font-size:1.2rem;}
header .input-group .input-group-text{padding:.375rem 1rem;}

header button.btn{padding:.375rem 1rem;background-color:#ffffff;border-color:#ffffff;border-left:none;}
header button.btn:hover{background-color:#ffffff;}
header button.btn:hover i{color:var(--main-orange-color);}

/* Mobile */
@media (max-width: 992px){.desktop-menu{display:none;}

nav button.menuBtn{display:block;}

nav img.navbar-logo{max-width:190px;left:0;}}

@media (max-width: 768px){
.hero-call-text{font-size:20px;padding:0 12px;margin-bottom:10px;}

.hero-phone-wrap{gap:10px;margin:14px 0;}
.hero-phone-icon i{font-size:28px;}

.hero-phone-number,
.hero-phone-number:hover,
.hero-phone-number:focus,
.hero-phone-number:active{font-size:24px !important;text-align:center;word-break:break-word;}

header h1{font-size:38px;line-height:1.1;}
header h2{font-size:30px;line-height:1.2;}

.heroSearchBox{margin-top:18px;}
header .input-group{height:52px;}}

/* Mobile Menü ohne Burger */
@media (max-width: 768px){

.menuBtn{display:none;}
.desktop-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:10px;}

nav .container-fluid{flex-direction:column;}}

@media (max-width: 768px){nav button.menuBtn,.menuBtn{display:none !important;}}
@media (max-width:768px){nav .container-fluid{flex-direction:column;align-items:center;}

.desktop-menu{display:flex;justify-content:center;align-items:center;gap:14px;width:100%;margin-top:8px;margin-bottom:6px;}
.desktop-menu li{display:inline-block;}
.desktop-menu a{font-size:15px;text-align:center;}}

.rohrwerk-team-img {width: 100% !important;height: auto !important;max-width: 100%;display: block;object-fit: contain !important;}
.contentImage {height: auto !important;}
.contentImage img {width: 100% !important;height: auto !important;object-fit: contain !important;}

@media (max-width: 767px) {.contentImage,.contentImage img,.rohrwerk-team-img {height: auto !important;max-height: none !important;}}
@media (max-width: 767px) {.contentImage {max-width: 320px;margin: 0 auto 20px auto;}

.rohrwerk-team-img {width: 100% !important;height: auto !important;display: block;}}

.hero-cta-wrap{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;width:100%;margin:0 0 22px 0;}
.hero-cta-wrap .hero-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;text-decoration:none;color:#fff;font-size:16px;font-weight:600;line-height:1;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,0.22);}
.hero-cta-wrap .hero-cta-btn i,
.hero-cta-wrap .hero-cta-btn span{color:#fff;}
.hero-cta-wrap .hero-cta-call{background:#e74e02;}
.hero-cta-wrap .hero-cta-whatsapp{background:#25D366;}
.hero-cta-wrap .hero-cta-mail{background:#043882;}
.hero-cta-wrap{gap:8px;margin:0 0 16px 0;}
.hero-cta-wrap .hero-cta-btn{font-size:15px;padding:9px 12px;border-radius:10px;}}


@media (max-width:768px){
.hero-call-text{font-size:18px;line-height:1.25;max-width:280px;margin:0 auto 10px auto;padding:0;}
.hero-call-sub{font-size:12px;margin-top:4px;}

.hero-phone-wrap{gap:10px;margin:12px 0 16px 0;flex-wrap:nowrap;}
.hero-phone-icon i{font-size:26px;}
.hero-phone-number,
.hero-phone-number:hover,
.hero-phone-number:focus,
.hero-phone-number:active{font-size:22px !important;text-align:center;white-space:nowrap;}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px;
    margin-top:40px;
}

.contentImage {
    height: auto !important;
}

.contentImage img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
    object-fit: contain !important;
    border-radius: 10px;
}

@media (max-width: 767px) {
    .contentImage {
        max-width: 220px !important;
        margin: 0 auto 15px auto !important;
    }

    .contentImage img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    #introduction .col-lg-3,
    #dichtheitspruefung .col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    #introduction .col-lg-9,
    #dichtheitspruefung .col-md-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}