/* =====================================================
   BLUEOUTDESIGN
   responsive.css
   Responsive Design für Tablet & Smartphone
===================================================== */


/* =====================================================
   TABLET
   1024px und kleiner
===================================================== */

@media (max-width: 1024px) {

    /* Allgemein */

    .container {
        width: calc(100% - 40px);
    }

    section {
        width: calc(100% - 40px);
        padding: 85px 0;
    }


    /* Navigation */

    nav {
        width: calc(100% - 40px);
    }

    nav div {
        gap: 18px;
    }

    nav div a {
        font-size: 13px;
    }


    /* Hero */

    #hero {
        min-height: 650px;

        padding-top: 120px;
        padding-bottom: 100px;
    }

    #hero h1 {
        font-size: clamp(44px, 7vw, 68px);
    }

    #hero > div {
        max-width: 700px;
    }


    /* Leistungen */

    #leistungen > div:nth-child(2) {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Preise */

    #preise > div:nth-child(2) {
        grid-template-columns: repeat(2, 1fr);
    }

    #preise article:last-child {
        grid-column: 1 / -1;

        max-width: 500px;

        width: 100%;

        margin: 0 auto;
    }


    /* Referenzen */

    #referenzen {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* Kontakt */

    #kontakt {
        max-width: 850px;
    }
}


/* =====================================================
   TABLET KLEIN
   900px und kleiner
===================================================== */

@media (max-width: 900px) {

    /* Navigation */

    nav {
        min-height: 72px;
    }

    nav div {
        gap: 14px;
    }


    /* Hero */

    #hero {
        min-height: 600px;
    }

    #hero h1 {
        font-size: clamp(42px, 8vw, 62px);

        letter-spacing: -2px;
    }


    /* Leistungen */

    #leistungen > div:nth-child(2) {
        grid-template-columns: 1fr;
    }

    #leistungen article {
        width: 100%;
    }


    /* Preise */

    #preise > div:nth-child(2) {
        grid-template-columns: 1fr;
    }

    #preise article {
        width: 100%;
    }

    #preise article:last-child {
        grid-column: auto;

        max-width: none;
    }
}


/* =====================================================
   MOBILE
   768px und kleiner
===================================================== */

@media (max-width: 768px) {

    /* Allgemein */

    .container {
        width: calc(100% - 30px);
    }

    section {
        width: calc(100% - 30px);

        padding: 75px 0;
    }


    /* Navigation */

    nav {
        width: calc(100% - 30px);

        min-height: 70px;
    }

    nav > a:first-child {
        font-size: 22px;
    }


    /* Navigation Links ausblenden */

    nav div {
        display: none;

        position: absolute;

        top: 75px;

        left: 15px;

        width: calc(100% - 30px);

        padding: 15px;

        background: #080d17;

        border: 1px solid var(--border);

        border-radius: 12px;

        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.45);

        flex-direction: column;

        gap: 5px;
    }


    /* Navigation öffnen */

    nav div.mobile-open {
        display: flex;
    }


    nav div a {
        display: block;

        width: 100%;

        padding: 12px;

        border-radius: 7px;

        text-align: center;

        background: rgba(255, 255, 255, 0.03);

        font-size: 14px;
    }

    nav div a:hover {
        background: rgba(22, 135, 237, 0.12);
    }


    /* Hamburger */

    .mobile-menu-button {
        display: flex;
    }


    /* Hero */

    #hero {
        min-height: 600px;

        padding:
            100px 15px
            80px;

        display: flex;

        align-items: center;
    }

    #hero::before {
        width: 350px;
        height: 350px;

        right: -180px;
        top: 100px;
    }

    #hero h1 {
        font-size: clamp(40px, 10vw, 58px);

        line-height: 1.05;

        letter-spacing: -2px;
    }

    #hero > div > p:nth-of-type(2) {
        font-size: 16px;

        max-width: 600px;
    }


    /* Hero Buttons */

    #hero > div > div {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }

    #hero > div > div a {
        width: 100%;
    }


    /* Überschriften */

    section h2 {
        font-size: clamp(32px, 8vw, 44px);
    }

    section h3 {
        font-size: 20px;
    }


    /* Leistungen */

    #leistungen > div:nth-child(2) {
        margin-top: 35px;

        grid-template-columns: 1fr;

        gap: 15px;
    }

    #leistungen article {
        padding: 25px;
    }


    /* Preise */

    #preise > div:nth-child(2) {
        margin-top: 35px;

        grid-template-columns: 1fr;

        gap: 15px;
    }

    #preise article {
        padding: 27px;
    }


    /* Ablauf */

    #ablauf article {
        padding: 22px;
    }


    /* Kontakt */

    #kontakt {
        width: 100%;
    }

    #kontakt form {
        margin-top: 30px;
    }


    /* Unterseiten */

    main > section:first-child:not(#hero) {
        padding-top: 90px;
    }

    main > section:first-child:not(#hero) h1 {
        font-size: clamp(38px, 10vw, 52px);

        letter-spacing: -1.5px;
    }

    main > section:first-child:not(#hero) > p:last-child {
        font-size: 16px;
    }


    /* Footer */

    footer {
        padding: 30px 15px;

        flex-direction: column;

        text-align: center;

        gap: 12px;
    }
}


/* =====================================================
   SMARTPHONE
   600px und kleiner
===================================================== */

@media (max-width: 600px) {

    /* Hero */

    #hero {
        min-height: 560px;

        padding-top: 90px;
        padding-bottom: 70px;
    }

    #hero p:first-child {
        font-size: 11px;

        letter-spacing: 2px;
    }

    #hero h1 {
        font-size: 40px;

        letter-spacing: -1.5px;
    }

    #hero > div > p:nth-of-type(2) {
        font-size: 15px;

        line-height: 1.7;
    }


    /* Cards */

    #leistungen article,
    #preise article,
    main article {
        padding: 22px;
    }


    /* Kontakt */

    #kontakt input,
    #kontakt textarea,
    #kontakt select {
        font-size: 16px;
    }


    /* Footer */

    footer div {
        display: flex;

        flex-direction: column;

        gap: 8px;
    }
}


/* =====================================================
   KLEINES SMARTPHONE
   480px und kleiner
===================================================== */

@media (max-width: 480px) {

    /* Navigation */

    nav {
        width: calc(100% - 24px);
    }

    nav > a:first-child {
        font-size: 20px;
    }

    nav div {
        left: 12px;

        width: calc(100% - 24px);
    }


    /* Hero */

    #hero {
        min-height: 520px;

        padding:
            80px 12px
            60px;
    }

    #hero h1 {
        font-size: 36px;

        line-height: 1.08;
    }


    /* Sections */

    section {
        width: calc(100% - 24px);

        padding: 60px 0;
    }

    section h2 {
        font-size: 30px;
    }


    /* Unterseiten */

    main > section:first-child:not(#hero) {
        padding-top: 75px;
    }

    main > section:first-child:not(#hero) h1 {
        font-size: 36px;
    }


    /* Buttons */

    #hero a,
    section a[href*="kontakt"],
    section a[href*="kontakt.html"],
    button {
        min-height: 48px;

        padding: 0 18px;

        font-size: 14px;
    }
}


/* =====================================================
   SEHR KLEINE GERÄTE
   360px und kleiner
===================================================== */

@media (max-width: 360px) {

    nav > a:first-child {
        font-size: 18px;
    }

    .mobile-menu-button {
        width: 42px;
        height: 42px;
    }

    #hero h1 {
        font-size: 32px;
    }

    #hero > div > p:nth-of-type(2) {
        font-size: 14px;
    }

    section h2 {
        font-size: 28px;
    }

    #leistungen article,
    #preise article,
    main article {
        padding: 19px;
    }
}


/* =====================================================
   QUERFORMAT AUF HANDYS
===================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    #hero {
        min-height: 500px;

        padding-top: 70px;
        padding-bottom: 60px;
    }

    nav {
        min-height: 60px;
    }

    nav div {
        top: 65px;
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}