/* =========================================================
   TANKSTELLENBUDDY
   COMING SOON LANDINGPAGE
   ========================================================= */


/* =========================================================
   1. GRUNDLEGENDE EINSTELLUNGEN
   ========================================================= */

:root {

    --blue: #0066b2;
    --blue-dark: #00549a;

    --white: #ffffff;

    --text-dark: #1a202c;

}


/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   HTML / BODY
   --------------------------------------------------------- */

html,
body {

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background: #ffffff;

}


/* ---------------------------------------------------------
   Body
   --------------------------------------------------------- */

body {

    font-family: 'Inter', sans-serif;

    color: var(--text-dark);

    overflow-x: hidden;

}


/* =========================================================
   2. HAUPTSEITE
   ========================================================= */

.coming-soon-page {

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

}


/* =========================================================
   3. LOGO-BEREICH
   ========================================================= */

.logo-container {

    width: 100%;

    /*
       Weißer Bereich für das größere Logo.
       Das Logo bekommt dadurch deutlich mehr Platz.
    */

    height: 160px;

    display: flex;
  
    align-items: center;
    justify-content: center;

    background: #ffffff;

    padding: 15px 20px;

}


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

.logo {

    display: block;

    width: auto;

    /*
       Größeres Logo für Desktop.
    */

    height: 100px;

    max-width: 340px;

    object-fit: contain;

}


/* =========================================================
   4. HERO SECTION
   ========================================================= */

.hero-section {

    position: relative;

    width: 100%;

    /*
       Der Hero nimmt den kompletten restlichen
       Bildschirm ein.
    */

    height: calc(100vh - 160px);
    height: calc(100dvh - 160px);

    min-height: 0;

    overflow: hidden;

}


/* =========================================================
   5. HERO BILD
   ========================================================= */

.hero-image {

    position: absolute;

    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    /*
       Das Bild füllt den kompletten Hero.

       Es wird NICHT verzerrt.
       Nicht passende Bereiche werden
       sauber abgeschnitten.
    */

    object-fit: cover;

    /*
       Hier kannst du später bei Bedarf
       den Bildausschnitt verändern.

       center center = exakt mittig
    */

    object-position: center center;

}


/* =========================================================
   6. COMING SOON KARTE
   DESKTOP
   ========================================================= */

.coming-soon-card {

    position: absolute;

    z-index: 10;

    /*
       Vertikal mittig im Hero
    */

    top: 50%;


    /*
       Rechts im Bild
    */

    right: 11%;


    transform: translateY(-50%);


    /*
       Größe der Karte
    */

    width: 550px;

    min-height: 125px;


    /*
       Inhalt zentrieren
    */

    display: flex;

    align-items: center;
    justify-content: center;


    /*
       Innenabstand
    */

    padding: 20px 30px;


    /*
       TankstellenBuddy-Blau
    */

    background: linear-gradient(
        135deg,
        var(--blue) 0%,
        var(--blue-dark) 100%
    );


    /*
       Leichter Schatten für
       Abhebung vom Foto
    */

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.24);


    /*
       Verhindert unerwünschte
       Zeilenumbrüche
    */

    line-height: normal;

}


/* =========================================================
   7. COMING SOON SCHRIFT
   ========================================================= */

.coming-soon-card h1 {

    margin: 0;

    font-family: 'Montserrat', sans-serif;

    color: #ffffff;

    font-size: 3rem;

    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.025em;

    text-align: center;

    white-space: nowrap;

}


/* =========================================================
   8. DESKTOP - KLEINERE BILDSCHIRME
   ========================================================= */

@media (max-width: 1300px) {


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

    .logo-container {

        height: 150px;

    }


    .logo {

        height: 90px;

        max-width: 310px;

    }


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

    .hero-section {

        height: calc(100vh - 150px);
        height: calc(100dvh - 150px);

    }


    /* -----------------------------------------
       Karte
       ----------------------------------------- */

    .coming-soon-card {

        right: 8%;

        width: 500px;

        min-height: 115px;

    }


    .coming-soon-card h1 {

        font-size: 2.7rem;

    }

}


/* =========================================================
   9. TABLET
   ========================================================= */

@media (max-width: 900px) {


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

    .logo-container {

        height: 135px;

        padding: 12px 20px;

    }


    .logo {

        height: 78px;

        max-width: 280px;

    }


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

    .hero-section {

        height: calc(100vh - 135px);
        height: calc(100dvh - 135px);

    }


    /* -----------------------------------------
       Coming Soon Karte
       ----------------------------------------- */

    .coming-soon-card {

        right: 5%;

        width: 440px;

        min-height: 100px;

    }


    .coming-soon-card h1 {

        font-size: 2.3rem;

    }

}


/* =========================================================
   10. MOBILE
   ========================================================= */

@media (max-width: 600px) {


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

    .logo-container {

        width: 100%;

        height: 115px;

        padding: 12px 15px;

    }


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

    .logo {

        height: 72px;

        max-width: 270px;

    }


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

    .hero-section {

        width: 100%;

        height: calc(100vh - 115px);
        height: calc(100dvh - 115px);

        overflow: hidden;

    }


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

    .hero-image {

        width: 100%;
        height: 100%;

        object-fit: cover;

        /*
           Auf Smartphones etwas weiter
           nach oben ausgerichtet, damit
           die Tankstelle besser sichtbar bleibt.
        */

        object-position: center center;

    }


    /* -----------------------------------------
       Coming Soon Karte
       ----------------------------------------- */

    .coming-soon-card {

        /*
           Exakt horizontal zentriert
        */

        left: 50%;

        /*
           Exakt vertikal zentriert
           im Hero
        */

        top: 50%;

        right: auto;


        /*
           Mittelpunkt der Karte
           entspricht Mittelpunkt des Bildes
        */

        transform: translate(-50%, -50%);


        /*
           Deutlich kleiner als Desktop
        */

        width: 78%;

        min-height: 72px;


        padding: 14px 12px;


        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.23);

    }


    /* -----------------------------------------
       Coming Soon Schrift
       ----------------------------------------- */

    .coming-soon-card h1 {

        font-size: clamp(
            1.35rem,
            6.5vw,
            1.8rem
        );

        letter-spacing: 0.015em;

        line-height: 1;

        white-space: nowrap;

    }

}


/* =========================================================
   11. KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 380px) {


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

    .logo-container {

        height: 105px;

    }


    .logo {

        height: 65px;

        max-width: 240px;

    }


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

    .hero-section {

        height: calc(100vh - 105px);
        height: calc(100dvh - 105px);

    }


    /* -----------------------------------------
       Karte
       ----------------------------------------- */

    .coming-soon-card {

        width: 82%;

        min-height: 66px;

        padding: 12px 10px;

    }


    .coming-soon-card h1 {

        font-size: 1.25rem;

    }

}