/* =========================================================
   LAUSITZGLANZ – BUSINESS MODUL
   Fahrzeugveredelung | Trockeneisreinigung
   ========================================================= */

   /* =========================================================
   GEMEINSAMER BUSINESS-BEREICH
   Hero + Services + Finale
   ========================================================= */

    .home-business-area {
    position: relative;
    width: 100%;

    background: linear-gradient(
        115deg,
        #01090E 0%,
        #020D15 38%,
        #041827 70%,
        #072136 100%
    );

        overflow: hidden;
    }


/* =========================================================
   01 – GRUNDLAYOUT
   ========================================================= */

.home-business {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);

    width: 100%;

    background: transparent;

    overflow: hidden;
}


.home-business__side {
    position: relative;
    min-width: 0;
}


.home-business__inner {
    position: relative;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   02 – MITTLERE TRENNLINIE
   ========================================================= */

.home-business__divider {
    position: relative;
    z-index: 5;

    width: 1px;
    height: 100%;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(190, 210, 225, 0.55) 10%,
        rgba(0, 142, 240, 0.65) 50%,
        rgba(190, 210, 225, 0.55) 90%,
        transparent 100%
    );
}


/* =========================================================
   03 – KOPFBEREICH
   Logo + Unterzeile + Silberkeile
   ========================================================= */

.business-head {
    position: relative;

    width: 100%;

    box-sizing: border-box;

    /*
       Kein seitliches Padding.
       Dadurch können die Silberkeile exakt bis
       an die Kanten des Hero-Bildes laufen.
    */

    padding: 25px 0 0;

    text-align: center;
    z-index: 3;
}


/* ---------------------------------------------------------
   Logo
   --------------------------------------------------------- */

.business-head__logo {
    display: block;

    width: min(470px, 80%);
    height: auto;

    margin: 0 auto 10px;
}


/* ---------------------------------------------------------
   Unterzeile

   Aufbau:
   Pfeil | Text | Pfeil

   Die beiden Pfeile erhalten automatisch den gesamten
   verbleibenden Platz links und rechts des Textes.
   --------------------------------------------------------- */

.business-head__subtitle {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    width: 100%;

    box-sizing: border-box;

    margin-top: 12px;

    column-gap: clamp(10px, 1.2vw, 18px);
    position: relative;
    z-index: 4;
}
   

/* ---------------------------------------------------------
   Silberkeile
   --------------------------------------------------------- */

.business-head__arrow {
    display: block;

    width: 100%;
    height: 8px;

    object-fit: fill;

    min-width: 0;
}


/* ---------------------------------------------------------
   Unterzeilen-Text
   --------------------------------------------------------- */

.business-head__title {
    min-width: 0;

    font-family: "Lausitz Sans", sans-serif;

    font-size: clamp(11px, 0.95vw, 15px);
    font-weight: 400;

    letter-spacing: clamp(0.10em, 0.18vw, 0.18em);

    color: #ffffff;

    white-space: nowrap;
}


/* =========================================================
   04 – HERO-BEREICH
   ========================================================= */

.business-hero {
    position: relative;

    width: 100%;
    height: 650px;

    margin-top: -10px;

    background-color: transparent;

    overflow: hidden;
    z-index: 1;
}


/* =========================================================
   05 – HERO-BILD
   ========================================================= */

.business-hero::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: 500px;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    pointer-events: none;
}


/* ---------------------------------------------------------
   Fahrzeugveredelung
   --------------------------------------------------------- */

.business-hero--vehicle::before {
    background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.10) 63%,
            rgba(0, 0, 0, 0.30) 71%,
            rgba(0, 0, 0, 0.58) 79%,
            rgba(0, 0, 0, 0.82) 88%,
            rgba(0, 0, 0, 1) 100%
        ),
        url("../images/business-fahrzeuge.png");
}


/* ---------------------------------------------------------
   Trockeneisreinigung
   --------------------------------------------------------- */

.business-hero--dryice::before {
    
    background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.10) 63%,
            rgba(0, 0, 0, 0.30) 71%,
            rgba(0, 0, 0, 0.58) 79%,
            rgba(0, 0, 0, 0.82) 88%,
            rgba(0, 0, 0, 1) 100%
        ),
        url("../images/business-trockeneis.png");
}


/* =========================================================
   06 – SCHWARZER TEXT- UND ÜBERGANGSBEREICH
   ========================================================= */

.business-hero::after {
    content: "";

    position: absolute;
    z-index: 1;

    left: 0;
    right: 0;

    /*
       Der schwarze Bereich beginnt bereits im unteren
       Teil des Bildes und läuft anschließend wieder
       weich in den Business-Hintergrund aus.
    */

    top: 390px;
    bottom: 0;

    background: linear-gradient(
        to bottom,

        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.18) 8%,
        rgba(0, 0, 0, 0.48) 18%,
        rgba(0, 0, 0, 0.78) 28%,

        rgba(0, 0, 0, 0.96) 38%,
        #000000 46%,
        #000000 68%,

        rgba(0, 0, 0, 0.92) 76%,
        rgba(0, 0, 0, 0.70) 84%,
        rgba(0, 0, 0, 0.40) 92%,
        rgba(0, 0, 0, 0) 100%
    );

    pointer-events: none;
}


/* =========================================================
   07 – KALAM CLAIMS
   ========================================================= */

.business-claim {
    position: absolute;
    z-index: 3;

    top: 50px;
    right: 16%;

    display: flex;
    flex-direction: column;

    width: fit-content;

    margin: 0;

    font-family: "Kalam", cursive;

    font-size: clamp(26px, 2.1vw, 36px);
    font-weight: 400;
    line-height: 1.08;

    text-align: center;

    color: transparent;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    transform: rotate(-4deg);
}


/* ---------------------------------------------------------
   Fahrzeug – Kalam-Farbverlauf
   --------------------------------------------------------- */

.business-hero--vehicle .business-claim {
    background-image: linear-gradient(
        135deg,
        #69CFFF 0%,
        #008EF0 55%,
        #36B5FF 100%
    );
}


/* ---------------------------------------------------------
   Trockeneis – Kalam-Farbverlauf
   --------------------------------------------------------- */

.business-hero--dryice .business-claim {
    top: 60px;
    right: 22%;

    line-height: 1.12;

    background-image: linear-gradient(
        135deg,
        #BCEBFF 0%,
        #159FFF 55%,
        #65CFFF 100%
    );

    transform: rotate(-5deg);
}


/* =========================================================
   08 – LICHT-SWOOSH UNTER KALAM
   ========================================================= */

.business-claim::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -20px;

    width: 175px;
    height: 14px;

    transform:
        translateX(-50%)
        rotate(-7deg);

    background: none;

    border: none;
    border-top: 2px solid #159fff;

    border-radius: 50% 50% 0 0;

    filter:
        drop-shadow(
            0 0 3px
            rgba(0, 142, 240, 0.70)
        );
}


/* =========================================================
   09 – BUSINESS INTRO
   Headline + blaue Unterzeile
   ========================================================= */

.business-intro {
    position: absolute;
    z-index: 3;

    left: clamp(30px, 5.4vw, 55px);
    right: clamp(30px, 4vw, 40px);

    bottom: 50px;

    width: auto;

    margin: 55px 0 0 0 !important;
    padding: 0;
}


/* ---------------------------------------------------------
   Hauptüberschrift
   --------------------------------------------------------- */

.business-intro__title {
    margin: 0;

    font-family: "Lausitz Sans", sans-serif;

    font-size: clamp(26px, 2vw, 34px);
    font-weight: 600;
    line-height: 1.12;

    letter-spacing: 0.08em;

    color: #f4f6f8;

    text-shadow:
        0 3px 4px rgba(0, 0, 0, 1),
        0 7px 10px rgba(0, 0, 0, 0.95),
        0 12px 20px rgba(0, 0, 0, 0.80);
}


.business-intro__title span {
    display: block;
}


/* ---------------------------------------------------------
   Blaue Unterzeile
   --------------------------------------------------------- */

.business-intro__subtitle {
    width: 100%;

    box-sizing: border-box;

    margin: 25px 0 0;
    padding: 0;

    font-family: "Lausitz Sans", sans-serif;

    font-size: clamp(12px, 1vw, 16px);
    font-weight: 400;
    line-height: 1.35;

    letter-spacing: 0.18em;

    color: #00A8F3;

    text-align: left;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 1),
        0 4px 8px rgba(0, 0, 0, 0.90);
}


/* =========================================================
   10 – RESPONSIVE
   ========================================================= */


/* =========================================================
   TABLET / SCHMALERE DESKTOPS
   ========================================================= */

@media (max-width: 1200px) {

    .business-head__logo {
        width: min(430px, 76%);
    }


    .business-head__subtitle {
        column-gap: 12px;
    }


    .business-head__title {
        font-size: clamp(11px, 1.15vw, 14px);
        letter-spacing: 0.12em;
    }


    .business-intro__title {
        font-size: clamp(24px, 2.4vw, 31px);
    }


    .business-intro__subtitle {
        font-size: clamp(11px, 1.15vw, 14px);
        letter-spacing: 0.14em;
    }
}


/* =========================================================
   MOBILE / BUSINESS-BEREICHE UNTEREINANDER
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------------------
       Businessbereiche untereinander
       ----------------------------------------------------- */

    .home-business {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       Trennlinie horizontal
       ----------------------------------------------------- */

    .home-business__divider {
        width: 100%;
        height: 1px;

        background: linear-gradient(
            to right,
            transparent,
            rgba(0, 142, 240, 0.65),
            transparent
        );
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .business-head {
        padding: 30px 0 0;
    }


    .business-head__logo {
        width: min(470px, 82%);
    }


    .business-head__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    gap: clamp(12px, 1.5vw, 20px);

    /*
       Die Zeile wird nach unten auf die
       obere Hero-Bildkante gezogen.
    */
    transform: translateY(10px);

    position: relative;
    z-index: 4;
    }

    .business-head__arrow {
    display: block;

    width: clamp(65px, 9vw, 110px);
    height: auto;

    flex: 0 1 auto;

    object-fit: contain;
    }


    .business-head__title {
        flex: 0 0 auto;

        font-family: "Lausitz Sans", sans-serif;

        font-size: clamp(11px, 0.95vw, 15px);
        font-weight: 400;

        letter-spacing: clamp(0.10em, 0.18vw, 0.18em);

        color: #ffffff;

        white-space: nowrap;
    }


    /* -----------------------------------------------------
       Hero
       ----------------------------------------------------- */

    .business-hero {
        height: 590px;
    }


    .business-hero::before {
        height: 450px;
    }


    .business-hero::after {
        top: 350px;
    }


    /* -----------------------------------------------------
       Kalam Claim
       ----------------------------------------------------- */

    .business-claim {
        font-size: clamp(25px, 5vw, 34px);
    }


    /* -----------------------------------------------------
       Intro
       ----------------------------------------------------- */

    .business-intro {
        left: 30px;
        right: 30px;

        bottom: 85px;
    }


    .business-intro__title {
        font-size: clamp(24px, 5vw, 32px);
    }


    .business-intro__subtitle {
        margin-top: 18px;

        font-size: clamp(11px, 2.6vw, 14px);

        letter-spacing: 0.12em;
    }
}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 560px) {

    .business-head {
        padding-top: 22px;
    }


    .business-head__logo {
        width: 82%;

        margin-bottom: 8px;
    }


    .business-head__subtitle {
        margin-top: 8px;

        column-gap: 8px;
    }


    .business-head__title {
        font-size: clamp(9px, 2.8vw, 12px);

        letter-spacing: 0.08em;
    }


    .business-head__arrow {
        height: 5px;
    }


    .business-hero {
        height: 540px;
    }


    .business-hero::before {
        height: 410px;
    }


    .business-hero::after {
        top: 315px;
    }


    .business-claim {
        top: 38px;
        right: 10%;

        font-size: clamp(23px, 7vw, 31px);
    }


    .business-hero--dryice .business-claim {
        top: 45px;
        right: 12%;
    }


    .business-intro {
        left: 22px;
        right: 22px;

        bottom: 70px;
    }


    .business-intro__title {
        font-size: clamp(21px, 6vw, 28px);

        letter-spacing: 0.055em;
    }


    .business-intro__subtitle {
        margin-top: 14px;

        font-size: clamp(10px, 3vw, 13px);

        line-height: 1.45;
        letter-spacing: 0.09em;
    }

}