* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    background: #000;
    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;
}


img {
    max-width: 100%;
    display: block;
}


/* 
   Header
 */

header {
    position: sticky;
    top: 0;

    z-index: 1000;

    background: rgba(0, 0, 0, 0.92);

    backdrop-filter: blur(10px);

    border-bottom: 1px solid #222;
}


.nav {
    max-width: 1200px;

    margin: auto;

    padding: 20px 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.logo {
    font-size: 24px;

    font-weight: bold;

    letter-spacing: 1px;
}


.logo span {
    color: #f9630e;

    font-weight: normal;
}


/* 
   Navi
*/

nav a {
    color: #fd6812;

    text-decoration: none;

    margin-left: 25px;

    transition: 0.3s;
}


nav a:hover {
    color: #fff;
}


/* 
   Haupt
 */

main {
    max-width: 1200px;

    margin: auto;

    padding: 80px 30px;
}


/* 
   TText und Bildblock
 */

.block {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 35px;

    align-items: center;

    margin-bottom: 80px;

    opacity: 0;

    transform:
        translateY(30px);

    animation:
        erscheinen
        0.8s
        ease
        forwards;
}


.block:nth-child(2) {
    animation-delay: 0.2s;
}


.block:nth-child(3) {
    animation-delay: 0.4s;
}


@keyframes erscheinen {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* 
   Box Text
 */

.text {
    background: #111;

    border:
        1px solid
        #292929;

    border-radius: 20px;

    padding: 40px;

    min-height: 280px;

    display: flex;

    align-items: center;

    transition: 0.3s;
}


.text:hover {

    transform:
        translateY(-5px);

    border-color: #555;

    box-shadow:
        0 15px 40px
        rgba(255, 255, 255, 0.05);
}


/* 
   Überschrift 
 */

.text h1 {

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );

    line-height: 1.15;

    margin-bottom: 20px;
}


.text h2 {

    font-size: 32px;

    margin-bottom: 15px;
}


/* 
   Text
 */

.text p {

    color: #ccc;

    font-size: 18px;
}


/* =
   Bilder Pics
 */

.bild-container {

    overflow: hidden;

    border-radius: 20px;

    border:
        1px solid
        #292929;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.5);
}


.bild {

    width: 100%;

    height: 350px;

    object-fit: cover;

    transition:
        transform
        0.5s
        ease;
}


.bild-container:hover .bild {

    transform:
        scale(1.05);
}


/* 
   BUTTo
 */

.button {

    display: inline-block;

    margin-top: 25px;

    padding:
        13px 25px;

    background: #f9630e;

    color: #000;

    border-radius: 10px;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}


.button:hover {

    background: #ccc;

    transform:
        translateY(-2px);
}


/* 
   Footer
 */

footer {

    border-top:
        1px solid
        #222;

    text-align: center;

    padding:
        40px 20px;

    color: #777;
}


.footer-links {

    margin-top: 15px;
}


footer a {

    color: #fd6812;

    text-decoration: none;

    margin:
        0 10px;

    transition: 0.3s;
}


footer a:hover {

    color: #fff;
}


/* 
   COOKIE BANNERRRR
 */

.cookie-banner {

    position: fixed;

    bottom: 500px;

    left: 20px;

    right: 20px;

    max-width: 1100px;

    margin: auto;

    background: #151515;

    border:
        1px solid
        #f9630e;

    border-radius: 18px;

    padding: 25px;

    box-shadow:
        0 15px 50px
        rgba(0, 0, 0, 0.7);

    z-index: 9999;

    display: none;
}


.cookie-content {

    display: flex;

    gap: 25px;

    align-items: center;

    justify-content:
        space-between;
}


.cookie-text {

    flex: 1;
}


.cookie-text h3 {

    margin-bottom: 8px;
}


.cookie-text p {

    color: #bbb;

    font-size: 14px;
}


/* 
   COOKIE Butt
*/

.cookie-buttons {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}


.cookie-buttons button {

    border: none;

    padding:
        12px 18px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: bold;
}


.accept {

    background: #fff;

    color: #013d09;
}


.necessary {

    background: #333;

    color: #fff;
}


.cookie-buttons button:hover {

    opacity: 0.8;
}


/* 
   Mobil Ebene
 */

@media (max-width: 700px) {


    /* Header */

    header {

        position: relative;
    }


    .nav {

        padding:
            18px 20px;

        flex-direction:
            column;

        gap: 15px;
    }


    nav a {

        margin:
            0 8px;

        font-size: 14px;
    }



    /* Haupt */

    main {

        padding:
            40px 20px;
    }


    .block {

        grid-template-columns:
            1fr;

        gap: 20px;

        margin-bottom:
            45px;
    }



    /* Text */

    .text {

        padding: 28px;

        min-height:
            auto;
    }


    .text h1 {

        font-size: 32px;
    }


    .text h2 {

        font-size: 26px;
    }


    .text p {

        font-size: 16px;
    }



    /* Bilder Pics */

    .bild {

        height: 250px;
    }



    /* COOKIE */

    .cookie-banner {

        bottom: 500px;

        left: 10px;

        right: 10px;

        padding: 20px;
    }


    .cookie-content {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .cookie-buttons {

        flex-direction:
            column;
    }


    .cookie-buttons button {

        width: 100%;
    }

}