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

html {
    background: #05070c;
}

body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    overflow-x: hidden;
}


/* =========================
   HINTERGRUND
   ========================= */

.hintergrund {
    position: fixed;
    inset: 0;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.55)
        ),
        url("br-main.jpg") center center / cover no-repeat;

    z-index: -10;
}


/* =========================
   KOPF
   ========================= */

.kopf {
    min-height: 75vh;

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

    text-align: center;

    padding: 50px 20px;
}

.kopf h1 {
    font-size: clamp(3rem, 9vw, 8rem);

    font-weight: 300;

    letter-spacing: 0.18em;

    text-shadow:
        0 3px 20px rgba(0,0,0,.8),
        0 0 40px rgba(255,255,255,.15);
}

.kopf .linie {
    width: 140px;
    height: 1px;

    background: rgba(255,255,255,.7);

    margin: 25px 0;
}

.kopf p {
    font-size: clamp(1rem, 2vw, 1.4rem);

    letter-spacing: .2em;

    color: rgba(255,255,255,.8);
}


/* =========================
   DAS FOTO-CHAOS
   ========================= */

.fotofeld {
    width: min(1500px, 96%);

    margin: 0 auto;

    padding:
        5vh
        2vw
        15vh;

    display: flex;
    flex-direction: column;

    gap: clamp(30px, 7vh, 110px);
}


/* FOTO GRUNDSTIL */

.foto {
    position: relative;

    filter:
        drop-shadow(0 15px 25px rgba(0,0,0,.55));

    transition:
        transform .35s ease,
        filter .35s ease;

    z-index: 1;
}

.foto img,
.foto video {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 3px;
}


/* =========================
   UNTERSCHIEDLICHE GRÖSSEN
   ========================= */

.foto.klein {
    width: clamp(170px, 25vw, 380px);
}

.foto.mittel {
    width: clamp(260px, 42vw, 650px);
}

.foto.gross {
    width: clamp(350px, 65vw, 950px);
}


/* =========================
   WILD VERTEILEN
   ========================= */

.foto.links {
    align-self: flex-start;
    margin-left: 1%;
}

.foto.mitte {
    align-self: center;
}

.foto.rechts {
    align-self: flex-end;
    margin-right: 1%;
}


/* =========================
   LEICHT VERDREHEN
   ========================= */

.foto.drehen1 {
    transform: rotate(-3deg);
}

.foto.drehen2 {
    transform: rotate(2deg);
}

.foto.drehen3 {
    transform: rotate(-1.5deg);
}


/* =========================
   BEIM DRÜBERFAHREN
   ========================= */

.foto:hover {
    transform:
        rotate(0deg)
        scale(1.04);

    filter:
        drop-shadow(0 25px 40px rgba(0,0,0,.8));

    z-index: 20;
}


/* =========================
   NOCH ETWAS MEHR CHAOS
   ========================= */

.foto:nth-child(4n) {
    margin-top: -25px;
}

.foto:nth-child(7n) {
    margin-top: 40px;
}

.foto:nth-child(5n) {
    margin-bottom: -20px;
}


/* =========================
   FUSS
   ========================= */

footer {
    text-align: center;

    padding: 80px 20px;

    font-size: .75rem;

    letter-spacing: .5em;

    color: rgba(255,255,255,.45);
}


/* =========================
   HANDY
   ========================= */

@media (max-width: 700px) {

    .kopf {
        min-height: 60vh;
    }

    .kopf h1 {
        letter-spacing: .08em;
    }

    .fotofeld {
        width: 94%;
        gap: 55px;
    }

    .foto.klein {
        width: 55%;
    }

    .foto.mittel {
        width: 75%;
    }

    .foto.gross {
        width: 94%;
    }

}