/* ======================================================
   logo.css
   Vollständiges Wordmark-System
====================================================== */

/* =========================================
   HEADER LAYOUT
========================================= */

.header-inner {

    grid-template-columns:
        auto
        1fr
        auto;

    gap: clamp(1.4rem, 3vw, 3rem);
}

/* =========================================
   WORDMARK
========================================= */

.brand-wordmark {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

    min-width: 0;
}

.brand-text {

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1;
}

/* =========================================
   NAME
========================================= */

.brand-title {

    display: inline-block;

    width: fit-content;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(2.2rem, 2.7vw, 3rem);

    font-weight: 600;

    line-height: .9;

    letter-spacing: -.045em;

    color: var(--ink);

    white-space: nowrap;

    transition:
        font-size .28s ease,
        color .2s ease;
}

.brand-wordmark:hover .brand-title {
    color: var(--navy);
}

/* =========================================
   BERUFSBEZEICHNUNG
========================================= */

.brand-subtitle {

    display: inline-block;

    width: fit-content;

    margin-top: .44rem;

    font-family:
        "Inter",
        system-ui,
        sans-serif;

    font-size: .76rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .22em;

    text-transform: uppercase;

    color: #5f756d;

    white-space: nowrap;

    opacity: .95;
}

/* =========================================
   SCROLLED HEADER
========================================= */

body.scrolled .brand-title {

    font-size:
        clamp(1.85rem, 2vw, 2.35rem);
}

body.scrolled .brand-subtitle {

    font-size: .58rem;

    letter-spacing: .18em;
}

/* =========================================
   FOOTER WORDMARK
========================================= */

.footer-text {

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1;
}

.footer-title {

    display: inline-block;

    width: fit-content;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(2rem, 2.5vw, 2.6rem);

    font-weight: 600;

    line-height: .92;

    letter-spacing: -.04em;

    color: var(--ink);

    white-space: nowrap;
}

.footer-subtitle {

    display: inline-block;

    width: fit-content;

    margin-top: .42rem;

    font-family:
        "Inter",
        system-ui,
        sans-serif;

    font-size: .68rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: #60766f;

    white-space: nowrap;

    opacity: .95;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1180px) {

    .brand-title {

        font-size: 1.9rem;
    }

    .brand-subtitle {

        display: inline-block !important;

        font-size: .54rem;

        letter-spacing: .1em;
        font-size: .62rem;
    }

    .footer-title {

        font-size: 1.9rem;
    }

    .footer-subtitle {

        font-size: .56rem;

        letter-spacing: .12em;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

    .header-inner {

        grid-template-columns:
            1fr auto;
    }

    .brand-title {

        font-size: 1.42rem;

        line-height: .95;
    }

    .brand-subtitle {

        display: inline-block !important;

        margin-top: .24rem;

        font-size: .52rem;

        letter-spacing: .06em;

        line-height: 1;
    }

    .footer-title {

        font-size: 1.55rem;
    }

    .footer-subtitle {

        font-size: .5rem;

        letter-spacing: .08em;
    }
}