/* =========================================================
   DRACHENBRUT-LARP
   ÜBERGANGSSEITE
   ========================================================= */


/* =========================================================
   1. GRUNDLAGEN
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;

    display: flex;
    flex-direction: column;

    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.6;

    color: #24211d;

    background:
            linear-gradient(
                    135deg,
                    #f8f5ef 0%,
                    #f3ead8 55%,
                    #eee1c6 100%
            );
}

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

main {
    flex: 1;

    width: min(1200px, calc(100% - 2rem));

    margin-inline: auto;

    padding: 0.75rem 0 3rem;
}

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   2. HEADER
   ========================================================= */

.site-header {
    width: min(1200px, calc(100% - 2rem));

    margin-inline: auto;

    padding: 1.25rem 0 0.75rem;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;
}

.site-brand {
    display: flex;
    align-items: center;
}

.site-brand__logo {
    width: 58px;
    height: 58px;

    object-fit: contain;
}

.site-header__status {
    margin: 0;

    font-size: 0.9rem;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #76532d;
}


/* =========================================================
   3. HERO
   ========================================================= */

.hero {
    position: relative;

    overflow: hidden;

    padding:
            clamp(1.25rem, 3vw, 2rem)
            clamp(1.5rem, 5vw, 4rem)
            clamp(2rem, 4vw, 3rem);

    background:
            linear-gradient(
                    135deg,
                    #eee7da 0%,
                    #f8f5ef 55%,
                    #eee8dd 100%
            );

    border: 1px solid #d8d1c5;
    border-radius: 0.75rem;

    box-shadow:
            0 0.75rem 2rem rgba(36, 33, 29, 0.06);
}


/* =========================================================
   4. HERO / BILDWELT
   ========================================================= */

.hero__art {
    position: relative;

    min-height: clamp(210px, 22vw, 275px);

    margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
}

.hero__art img {
    position: absolute;

    pointer-events: none;
    user-select: none;
}


/* Schloss links */

.hero__castle {
    left: -1%;
    bottom: 0;

    width: clamp(200px, 29%, 340px);

    opacity: 0.88;

    filter:
            saturate(0.85)
            contrast(0.96);

    z-index: 1;
}


/* Drachenbrut-Banner mittig */

.hero__banner {
    top: 0;
    left: 50%;

    width: clamp(400px, 61%, 700px);

    transform: translateX(-50%);

    z-index: 3;
}


/* Drache rechts */

.hero__dragon {
    right: 5%;
    bottom: 0;

    width: clamp(140px, 20%, 230px);

    z-index: 4;
}


/* Wappen ganz rechts */

.hero__crest {
    right: 0.5%;
    bottom: 2%;

    width: clamp(55px, 6.5%, 78px);

    z-index: 5;
}


/* =========================================================
   5. HERO / TEXT
   ========================================================= */

.hero__content {
    position: relative;

    max-width: 800px;

    margin-inline: auto;

    text-align: center;

    z-index: 10;
}

.hero__eyebrow {
    margin: 0 0 0.8rem;

    font-size: 0.9rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #76532d;
}

.hero__title {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.1;

    color: #3b2818;
}

.hero__intro {
    max-width: 720px;

    margin: 1.4rem auto 0;

    font-size: clamp(1rem, 2vw, 1.15rem);

    color: #5b4632;
}


/* =========================================================
   6. FOOTER
   ========================================================= */

.site-footer {
    width: min(1200px, calc(100% - 2rem));

    margin-inline: auto;

    padding: 1.25rem 0 1.75rem;

    border-top: 1px solid #d8d1c5;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    flex-wrap: wrap;
}

.site-footer__copyright {
    color: #6b6258;

    font-size: 0.9rem;
}

.site-footer__nav {
    display: flex;

    gap: 1.25rem;

    flex-wrap: wrap;
}

.site-footer__nav a {
    color: #514a42;

    font-weight: 600;
    text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
    color: #24211d;

    text-decoration: underline;
}


/* =========================================================
   7. TABLET
   ========================================================= */

@media (max-width: 800px) {

    .site-header__inner {
        gap: 1rem;
    }

    .hero__art {
        min-height: 225px;

        margin-bottom: 1rem;
    }

    .hero__banner {
        width: min(80%, 620px);
    }

    .hero__castle {
        left: -4%;

        width: 35%;
    }

    .hero__dragon {
        right: 3%;

        width: 22%;
    }

    .hero__crest {
        right: 0;

        width: 7%;
    }
}


/* =========================================================
   8. SMARTPHONE
   ========================================================= */

@media (max-width: 520px) {

    .site-header {
        padding-top: 1rem;
    }

    .site-brand__logo {
        width: 48px;
        height: 48px;
    }

    .site-header__status {
        max-width: 190px;

        font-size: 0.72rem;

        text-align: right;
    }

    main {
        padding-top: 0.5rem;
    }

    .hero {
        padding: 1.25rem 1.25rem 2rem;

        border-radius: 0.5rem;
    }

    .hero__art {
        min-height: 190px;

        margin-bottom: 1rem;
    }

    .hero__banner {
        top: 0;

        width: 100%;
    }

    .hero__castle {
        display: none;
    }

    .hero__dragon {
        right: auto;
        bottom: 0;
        left: 50%;

        width: 120px;

        transform: translateX(-50%);
    }

    .hero__crest {
        display: none;
    }

    .hero__eyebrow {
        font-size: 0.8rem;

        letter-spacing: 0.04em;
    }

    .hero__title {
        font-size: clamp(2rem, 11vw, 2.7rem);
    }

    .hero__intro {
        margin-top: 1rem;
    }

    .site-footer__inner {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.75rem;
    }
}