/* =========================
   HERO
========================= */

.hero {
    max-width: none;
    min-height: 100svh;
    padding: 80px max(25px, 2vw) 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(212, 208, 206, 0.8),
            rgba(155, 147, 141, 0.7),
            rgba(163, 155, 150, 0.2)),
        var(--hero-bg) center 10% / cover no-repeat;
}

.hero header {
    margin-top: 40px;
    align-self: flex-end;
    text-align: right;
}

.hero header h1 {
    max-width: 900px;
    color: var(--accent-dark);
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: .88;
    letter-spacing: -.04em;
}

.banner {
    width: min(760px, 100%);
    padding: 30px 35px;
}

.banner p{
    color: var(--accent);
    font-weight: 500;
}


.introduction {
    padding-top: 80px;
    font-size: 20px;
}




/* =========================
   BILDER
========================= */

.image {
    display:flex;
    justify-content:left;
    margin-bottom: 20px;
}

.image img {
    padding:0;
}

.imagebreit{
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    margin-bottom: 20px;
}

.imagebreit img{
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}



.introduction img{
    position: relative;
    display: block;
    width: 100%;
    min-height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(var(--accent-rgb), .70);
}

/* =========================
   TEA TIME
========================= */
#teatime {
    background:
        linear-gradient(
            rgba(var(--background-rgb), .8),
            rgba(var(--background-rgb), .8)
        ),
        url("../Bilder/logo.png") bottom right / 500px no-repeat;
}





@media (max-width: 800px) {

    #start {
        padding: 35px 25px;
    }

    #start::before {
        background:
            linear-gradient(
                rgba(239, 233, 228, .84),
                rgba(239, 233, 228, .62)
            ),
            url("../Bilder/window.jpg") center / cover no-repeat;
    }

    .hero-content header h1 {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .hero-content header p {
        letter-spacing: .2em;
    }

    .intro {
        margin-top: 30px;
        padding: 25px;
    }

    .photo img {
        min-height: 300px;
    }

    main::before {
        width: 300px;
        height: 300px;
        right: -180px;
    }

    main::after {
        width: 280px;
        height: 280px;
        left: -170px;
    }

    #medikamente::after {
        width: 320px;
        height: 320px;
        right: -190px;
    }
}