/* ==========================================================================
   VK Rohrreinigung – eigene Anpassungen
   Wird NACH allen Theme-Stylesheets geladen und überschreibt diese gezielt.
   Angelegt: 01.09.2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero / Startbanner – kompakter und leichter
   -------------------------------------------------------------------------- */

/* Vorher: 225px oben / 275px unten + rund 30 leere <br>-Tags */
.slider-style-five .banner-carousel .slide-item {
    padding: 155px 0 200px 0;
}

.slider-style-five .banner-carousel .content-box.vk-hero-inhalt {
    max-width: 780px;
}


/* Ueberschrift: deutlich leichter als die bisherigen 34px/600 mit 2px Sperrung */
.slider-style-five .banner-carousel .content-box .vk-hero-titel {
    font-size: 48px;
    line-height: 1.14;
    /* Platz fuer zwei Zeilen reservieren – sonst ist der Slide mit der
       kuerzeren Ueberschrift niedriger und das Karussell springt */
    min-height: 2.2em;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin: 0 0 18px 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.slider-style-five .banner-carousel .content-box p.vk-hero-text {
    font-size: 21px;
    line-height: 1.62;
    /* Platz fuer drei Zeilen reservieren, damit unterschiedlich lange
       Texte die beiden Slides nicht verschieden hoch machen */
    min-height: 4.95em;
    font-weight: 400;
    letter-spacing: 0;
    color: #ffffff;
    margin: 0 0 34px 0;
    max-width: 640px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

/* Kleiner Vertrauensbalken unter dem Text */
.vk-hero-merkmale {
    /* feste Mindesthoehe, damit beide Slides gleich hoch bleiben,
       auch wenn eine Zeile einmal umbricht */
    min-height: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0 0 34px 0;
    padding: 0;
    list-style: none;
}
.vk-hero-merkmale li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .9);
}
.vk-hero-merkmale li:before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e8692b;
    flex: 0 0 7px;
}

/* --------------------------------------------------------------------------
   2. Schaltflächen im Hero
   -------------------------------------------------------------------------- */

.vk-hero-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.vk-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 6px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space: nowrap;
}
.vk-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.vk-btn-akzent {
    background: #e8692b;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(232, 105, 43, .30);
}
.vk-btn-akzent:hover,
.vk-btn-akzent:focus {
    background: #cf5820;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(232, 105, 43, .38);
}

.vk-btn-hell {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.vk-btn-hell:hover,
.vk-btn-hell:focus {
    background: #ffffff;
    color: #0b1953;
    border-color: #ffffff;
}

.vk-btn-dunkel {
    background: #0b1953;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(11, 25, 83, .25);
}
.vk-btn-dunkel:hover,
.vk-btn-dunkel:focus {
    background: #16276e;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Anpassung an kleinere Bildschirme
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 991px) {
    .slider-style-five .banner-carousel .slide-item {
        padding: 120px 0 165px 0;
    }
    .slider-style-five .banner-carousel .content-box .vk-hero-titel {
        font-size: 37px;
        min-height: 2.2em;
    }
    .slider-style-five .banner-carousel .content-box p.vk-hero-text {
        font-size: 19px;
    }
}

@media only screen and (max-width: 767px) {
    .slider-style-five .banner-carousel .slide-item {
        padding: 100px 0 140px 0;
    }
    .slider-style-five .banner-carousel .content-box .vk-hero-titel {
        font-size: 29px;
        line-height: 1.2;
        min-height: 2.36em;
    }
    .slider-style-five .banner-carousel .content-box p.vk-hero-text {
        font-size: 17.5px;
        margin-bottom: 26px;
        /* Platz fuer fuenf Zeilen reservieren, damit beide Slides
           auf schmalen Bildschirmen gleich hoch bleiben */
        min-height: 8.5em;
    }
    .vk-hero-merkmale {
        gap: 8px 18px;
        margin-bottom: 26px;
        /* drei Zeilen reservieren: auf sehr schmalen Geraeten bricht die
           laengere Merkmalzeile sonst tiefer um als die kuerzere */
        min-height: 94px;
    }
    .vk-hero-merkmale li {
        font-size: 13.5px;
    }
    .vk-btn {
        padding: 14px 24px;
        font-size: 14.5px;
    }
    .vk-hero-aktionen .vk-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   4. Lesbarkeit im Hero – weicher Farbverlauf hinter dem Text
   -------------------------------------------------------------------------- */

.slider-style-five .banner-carousel .slide-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 1;
    background: linear-gradient(100deg,
        rgba(11, 25, 83, .80) 0%,
        rgba(11, 25, 83, .58) 36%,
        rgba(11, 25, 83, .10) 68%,
        rgba(11, 25, 83, 0) 100%);
}

.slider-style-five .banner-carousel .content-box.vk-hero-inhalt {
    z-index: 3;
}

@media only screen and (max-width: 767px) {
    .slider-style-five .banner-carousel .slide-item:before {
        background: linear-gradient(180deg,
            rgba(11, 25, 83, .72) 0%,
            rgba(11, 25, 83, .62) 55%,
            rgba(11, 25, 83, .45) 100%);
    }
}

/* --------------------------------------------------------------------------
   5. Einsatzgebiete im Fußbereich
   -------------------------------------------------------------------------- */

.vk-gebiete {
    background: #f7f8fb;
    border-top: 1px solid #e7e9f0;
    padding: 46px 0 42px;
}
.vk-gebiete h2 {
    font-size: 21px;
    font-weight: 600;
    color: #0b1953;
    margin: 0 0 6px;
}
.vk-gebiete p {
    font-size: 14.5px;
    color: #6f7482;
    margin: 0 0 20px;
}
.vk-gebiete ul {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vk-gebiete li a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #dfe2ec;
    border-radius: 40px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    color: #0b1953;
    text-decoration: none;
    transition: all .18s ease;
}
.vk-gebiete li a:hover {
    background: #0b1953;
    border-color: #0b1953;
    color: #ffffff;
    text-decoration: none;
}
.vk-gebiete li a[aria-current="page"] {
    background: #0b1953;
    border-color: #0b1953;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   6. Anfrageseite
   -------------------------------------------------------------------------- */

.vk-seitenkopf {
    background: linear-gradient(135deg, #0b1953 0%, #16276e 100%);
    padding: 76px 0 66px;
    color: #ffffff;
}
.vk-seitenkopf-label {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #f5a97b;
    margin-bottom: 14px;
}
.vk-seitenkopf h1 {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin: 0 0 16px;
}
.vk-seitenkopf p {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
    max-width: 680px;
    margin: 0 0 30px;
}

.vk-ablauf {
    background: #ffffff;
    padding: 46px 0 40px;
    border-bottom: 1px solid #eef0f5;
}
.vk-ablauf ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.vk-ablauf li {
    position: relative;
    padding-left: 52px;
}
.vk-ablauf li > span {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0b1953;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vk-ablauf h3 {
    font-size: 16.5px;
    font-weight: 600;
    color: #0b1953;
    margin: 6px 0 6px;
}
.vk-ablauf p {
    font-size: 14.5px;
    line-height: 1.65;
    color: #6f7482;
    margin: 0;
}

.vk-anfrage .vk-abschnitt {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #0b1953;
    margin: 30px 0 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e7e9f0;
}
.vk-anfrage .vk-abschnitt:first-of-type {
    margin-top: 6px;
}
.vk-zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}
.vk-zusage {
    margin-top: 28px;
    background: #ffffff;
    border: 1px solid #e7e9f0;
    border-left: 3px solid #e8692b;
    border-radius: 8px;
    padding: 18px 20px;
}
.vk-zusage strong {
    display: block;
    font-size: 14px;
    color: #0b1953;
    margin-bottom: 10px;
}
.vk-zusage ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.vk-zusage li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.75;
    color: #6f7482;
}
.vk-zusage li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #17a673;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .vk-seitenkopf {
        padding: 54px 0 46px;
    }
    .vk-seitenkopf h1 {
        font-size: 30px;
    }
    .vk-seitenkopf p {
        font-size: 15.5px;
    }
    .vk-ablauf ol {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .vk-zweispaltig {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* --------------------------------------------------------------------------
   7. Ortsspezifischer Textbereich auf den Ortsseiten
   -------------------------------------------------------------------------- */

.vk-ortstext {
    background: #ffffff;
    padding: 62px 0 58px;
}
.vk-ortstext .vk-ortstext-inner {
    max-width: 820px;
}
.vk-ortstext h2 {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #0b1953;
    margin: 0 0 20px;
}
.vk-ortstext h3 {
    font-size: 19px;
    font-weight: 600;
    color: #0b1953;
    margin: 34px 0 12px;
}
.vk-ortstext p {
    font-size: 16px;
    line-height: 1.8;
    color: #5b6070;
    margin: 0 0 16px;
}
.vk-ortstext .vk-ortsteile {
    margin: 30px 0 0;
    padding: 20px 22px;
    background: #f7f8fb;
    border-left: 3px solid #e8692b;
    border-radius: 0 8px 8px 0;
    font-size: 15px;
    line-height: 1.75;
    color: #5b6070;
}
.vk-ortstext .vk-ortsteile strong {
    display: block;
    color: #0b1953;
    margin-bottom: 6px;
}

@media only screen and (max-width: 767px) {
    .vk-ortstext {
        padding: 44px 0 40px;
    }
    .vk-ortstext h2 {
        font-size: 24px;
    }
    .vk-ortstext p {
        font-size: 15.5px;
    }
}

/* --------------------------------------------------------------------------
   8. Kasten unter dem Hero
   Die geschwungene Abschlussform des Heros (.shape, z-index 2) wurde ueber
   den Kasten gezeichnet und hat Ueberschriften und Symbole abgeschnitten.
   -------------------------------------------------------------------------- */

.support-section {
    position: relative;
    z-index: 3;
}

/* --------------------------------------------------------------------------
   9. Zugehoerigkeitshinweis auf das Mutterunternehmen
   Steht im Abschnitt "VK ROHRREINIGUNG - PROFESSIONELL UND VERLAESSLICH",
   nicht mehr im Hero: dort konkurrierte es mit Ueberschrift und Button.
   -------------------------------------------------------------------------- */

.vk-marke {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 0 30px 0;
    padding: 0 0 26px 0;
    border-bottom: 1px solid rgba(11, 25, 83, .12);
    text-decoration: none;
    max-width: 560px;
}
.vk-marke:hover {
    text-decoration: none;
}
/* owl.css setzt ".owl-carousel .owl-item img{width:100%}" – hier greift das
   zwar nicht, die feste Groesse steht trotzdem bewusst doppelt gesichert. */
.about-style-two .vk-marke img {
    display: block;
    height: 152px;
    width: 152px;
    max-width: 152px;
    flex: 0 0 152px;
    border-radius: 50%;
}
.vk-marke span {
    display: block;
    font-size: 14.5px;
    line-height: 1.65;
    color: #6f7482;
}
.vk-marke strong {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: #0b1953;
    margin-bottom: 4px;
}
.vk-marke:hover strong {
    color: #e8692b;
}

@media only screen and (max-width: 767px) {
    .vk-marke {
        gap: 16px;
        margin-bottom: 24px;
        padding-bottom: 20px;
    }
    .about-style-two .vk-marke img {
        height: 104px;
        width: 104px;
        max-width: 104px;
        flex: 0 0 104px;
    }
    .vk-marke span {
        font-size: 13.5px;
    }
    .vk-marke strong {
        font-size: 14.5px;
    }
}