/* =========================================================
   SEITE
   ========================================================= */

.legal-page {

    padding: 75px 65px 90px;

    background: var(--cream);

}

/* =========================================================
   CONTAINER
   ========================================================= */

.legal-container {

    width: min(100%, 1000px);

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 22px;

}

/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.legal-heading {

    max-width: 700px;

    margin: 0 auto;

    text-align: center;

}

.legal-heading .small-title {

    margin-bottom: 12px;

}

.legal-heading h1 {

    margin-bottom: 18px;

    font-size:
        clamp(3rem, 6vw, 5rem);

}

.legal-intro {

    max-width: 520px;

    margin: 0 auto;

    color: var(--soft-dark);

    font-size: 0.9rem;

    line-height: 1.7;

}

/* =========================================================
   KARTEN
   ========================================================= */

.legal-card {

    border-radius: 28px;

    background: var(--white);

    box-shadow:
        0 12px 35px
        rgba(81, 75, 87, 0.08);

}

/* =========================================================
   KONTAKTKARTE
   ========================================================= */

.legal-contact-card {

    display: flex;

    gap: 25px;

    padding: 38px 42px;

}

.legal-card-icon {

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--mint);

    color: var(--dark);

    font-size: 1.25rem;

}

.legal-card-icon.mint {

    background: var(--mint);

}

.legal-card-icon.lilac {

    background: var(--light-lilac);

}

.legal-card-icon.pink {

    background: var(--pink);

}

.legal-card-content {

    min-width: 0;

}

.legal-card-content .small-title {

    margin-bottom: 8px;

}

.legal-card h2 {

    margin-bottom: 10px;

    font-size:
        clamp(1.7rem, 3vw, 2.3rem);

}

.legal-name {

    margin-bottom: 15px;

    color: var(--soft-dark);

    font-size: 0.82rem;

}

.legal-card address {

    margin-bottom: 27px;

    color: var(--soft-dark);

    font-size: 0.82rem;

    font-style: normal;

    line-height: 1.7;

}

/* =========================================================
   KONTAKT
   ========================================================= */

.legal-contact {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

}

.legal-contact > div {

    min-height: 75px;

    padding: 14px 16px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-radius: 17px;

    background: #faf8f5;

}

.legal-contact strong {

    margin-bottom: 5px;

    color: var(--dark);

    font-size: 0.66rem;

    text-transform: uppercase;

    letter-spacing: 0.06em;

}

.legal-contact a {

    color: var(--soft-dark);

    font-size: 0.74rem;

    text-decoration: none;

    transition:
        color 0.2s ease;

}

.legal-contact a:hover {

    color: var(--dark);

}

/* =========================================================
   TEXT-KARTEN
   ========================================================= */

.legal-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;

}

.legal-text-card {

    min-height: 340px;

    padding: 32px;

}

.legal-text-card .legal-card-icon {

    margin-bottom: 22px;

}

.legal-text-card .small-title {

    margin-bottom: 8px;

}

.legal-text-card p:not(.small-title) {

    margin-bottom: 14px;

    color: var(--soft-dark);

    font-size: 0.82rem;

    line-height: 1.75;

}

.legal-text-card p:last-child {

    margin-bottom: 0;

}

.legal-address {

    margin-top: 20px;

    padding: 17px 18px;

    border-radius: 17px;

    background: #faf8f5;

}

.legal-address strong {

    color: var(--dark);

}

/* =========================================================
   URHEBERRECHT
   ========================================================= */

.legal-wide-card {

    display: flex;

    gap: 25px;

    padding: 38px 42px;

}

.legal-wide-content {

    min-width: 0;

}

.legal-wide-content .small-title {

    margin-bottom: 8px;

}

.legal-wide-content p:not(.small-title) {

    margin-bottom: 14px;

    color: var(--soft-dark);

    font-size: 0.82rem;

    line-height: 1.75;

}

.legal-wide-content p:last-child {

    margin-bottom: 0;

}

/* =========================================================
   ABSCHLUSS
   ========================================================= */

.legal-note {

    padding: 8px 15px 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #aaa4ae;

    text-align: center;

}

.legal-note span {

    color: var(--pink);

    font-size: 0.9rem;

}

.legal-note p {

    margin: 0;

    font-size: 0.67rem;

    line-height: 1.5;

}

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

@media (max-width: 950px) {

    .legal-page {

        padding-left: 40px;

        padding-right: 40px;

    }

}

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

@media (max-width: 700px) {

    .legal-page {

        padding: 55px 20px 65px;

    }

    .legal-container {

        gap: 16px;

    }

    .legal-heading {

        margin-bottom: 8px;

    }

    .legal-heading h1 {

        font-size: 3rem;

    }

    .legal-intro {

        font-size: 0.84rem;

    }

    .legal-contact-card {

        gap: 17px;

        padding: 28px 23px;

        border-radius: 23px;

    }

    .legal-card-icon {

        width: 45px;
        height: 45px;

        flex: 0 0 45px;

        font-size: 1rem;

    }

    .legal-contact {

        grid-template-columns: 1fr;

        gap: 9px;

    }

    .legal-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }

    .legal-text-card {

        min-height: auto;

        padding: 27px 23px;

        border-radius: 23px;

    }

    .legal-wide-card {

        gap: 17px;

        padding: 28px 23px;

        border-radius: 23px;

    }

    .legal-card h2 {

        font-size: 1.8rem;

    }

    .legal-text-card p:not(.small-title),
    .legal-wide-content p:not(.small-title) {

        font-size: 0.8rem;

        line-height: 1.7;

    }

    .legal-note {

        padding-top: 6px;

    }

}

/* =========================================================
   SEHR KLEINE HANDYS
   ========================================================= */

@media (max-width: 420px) {

    .legal-page {

        padding: 45px 15px 55px;

    }

    .legal-heading h1 {

        font-size: 2.65rem;

    }

    .legal-contact-card {

        padding: 25px 19px;

    }

    .legal-wide-card {

        padding: 25px 19px;

    }

    .legal-text-card {

        padding: 25px 19px;

    }

}

/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .legal-contact a {

        transition: none !important;

    }

}