/* ---------- ABOUT PAGE ---------- */

.about-page {
    font-family: "Inter", Arial, sans-serif;
    color: #111;
    background: #fcfcfc;

    --about-body-size: 14px;
    --about-display-size: clamp(34px, 3.1vw, 52px);
    --about-column-gap: clamp(56px, 7vw, 140px);
    --about-reading-pad-x: clamp(90px, 11vw, 180px);
}

.about-page .site-header {
    position: fixed;

    top: var(--ui-offset);
    left: var(--ui-offset);
    right: var(--ui-offset);
}

.about-main {
    width: 100%;
    min-height: 100svh;
}



/* ---------- ABOUT LAYOUT ---------- */

.about-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--about-column-gap);
    row-gap: clamp(56px, 7vh, 88px);
    align-items: start;

    padding:
        clamp(160px, 21vh, 230px)
        var(--about-reading-pad-x)
        clamp(96px, 14vh, 160px);
}

.about-headline {
    grid-column: 1 / 3;
    grid-row: 1;

    margin: 0;
    margin-bottom: 60px;

    font-family: "Inter", Arial, sans-serif;
    font-size: var(--about-display-size);
    line-height: 1.18;
    font-weight: 300;
    letter-spacing: -0.025em;
}

.about-portrait {
    grid-column: 3;
    grid-row: 1 / 3;

    width: clamp(240px, 20vw, 390px);
    margin: 0;

    justify-self: start;
    align-self: start;

    transform: rotate(2.5deg);
    transform-origin: center center;
}

.about-portrait img {
    width: 100%;
    height: auto;

    display: block;
    object-fit: contain;
}


/* ---------- INFO TEXT ---------- */

.about-info-group {
    min-width: 0;
}

/* Reihenfolge desktop festlegen */
@media (min-width: 801px) {
    .about-layout > .about-info-group:nth-of-type(1) {
        grid-column: 1;
        grid-row: 2;
    }

    .about-layout > .about-info-group:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2;
    }

    .about-layout > .about-info-group:nth-of-type(3) {
        grid-column: 3;
        grid-row: 3;

        margin-top: -25px;
    }

    .about-layout > .about-info-group:nth-of-type(4) {
        grid-column: 1;
        grid-row: 3;

        margin-top: -25px;
    }

    .about-layout > .about-info-group:nth-of-type(5) {
        grid-column: 2;
        grid-row: 3;

        margin-top: -25px;
    }
}

.about-info-group h2 {
    margin: 0 0 14px;

    font-family: "Inter", Arial, sans-serif;
    font-size: var(--about-body-size);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0;
}

.about-info-group p,
.about-info-group a {
    margin: 0;

    font-family: "Inter", Arial, sans-serif;
    font-size: var(--about-body-size);
    line-height: 1.28;
    font-weight: 300;
    letter-spacing: 0;
}

.about-info-group a {
    color: #111;
    text-decoration: none;
}

.about-info-group a:hover {
    text-decoration: underline;
}

.about-list span {
    display: block;
}

.about-list span + span {
    margin-top: 0.55em;
}

/* ---------- ABOUT Großer Bildschirm ---------- */
@media (min-width: 1600px) {

    .about-page {
        --about-body-size: 15.5px;
    }

     .about-info-group h2,
    .about-info-group p,
    .about-info-group a {
        line-height: 1.35;
    }

    @media (min-width: 2200px) {

    .about-page {
        --about-body-size: 16px;
    }

}

}

/* ---------- ABOUT MOBILE ---------- */

@media (max-width: 800px) {

    .about-page {
        --about-display-size: clamp(34px, 9vw, 48px);
        --about-body-size: 16.5px;
    }

    .about-page .site-header {
    position: absolute;

    top: 16px;
    left: 16px;
    right: 16px;
}

    .about-layout {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 0;

        padding:
            120px
            20px
            32px;
    }

    .about-headline {
        grid-column: 1 / 4;
        grid-row: auto;

        width: 100%;
        max-width: none;

        line-height: 1.12;
    }

    .about-portrait {
        grid-column: 2 / 4;
        grid-row: auto;

        width: 100%;
        max-width: 280px;

        margin:
            0px
        0
        48px
        auto;


        justify-self: end;

        transform: rotate(2deg);
        transform-origin: center center;
    }

    .about-info-group {
    grid-column: 1 / 4;
    grid-row: auto;

    width: 100%;
}

.about-info-group + .about-info-group {
    margin-top: 38px;
}

/* Mobile order */

.about-layout > .about-info-group:nth-of-type(1) {
    order: 1;
}

.about-layout > .about-info-group:nth-of-type(4) {
    order: 2;
}

.about-layout > .about-info-group:nth-of-type(2) {
    order: 3;
}

.about-layout > .about-info-group:nth-of-type(5) {
    order: 4;
}

.about-layout > .about-info-group:nth-of-type(3) {
    order: 5;
}
}