body {
    font-family: ABC Rom, sans-serif;
    margin: 0;
    background-color: #bacca6;
    padding: 20px 20px 100px 20px;
}

.cursor {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    mix-blend-mode: color;
}

.cursor__symbol {
    border-radius: 2000px;
    transition: scale 1s;
    background-color: coral;
    height: 130px;
    width: 130px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
}

.cursor[data-active="true"] .cursor__symbol {
    scale: 2;
}

h1 {
    font-family: Polysans, sans-serif;
    color: white;
    margin: 0;
    font-size: 30px;
}

h2 {
    margin: 0;
    color: white;
    font-size: 20px;
}

.logo {
    width: 30px;
    margin-bottom: -4px;
}

.personen {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

.personen__person {
    font-size: 20px;
    line-height: 24px;
    margin-top: 100px;
}

.personen__name {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}

.personen__daten {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}

.personen__mail-link {
    position: relative;
    text-decoration: none;
    color: black;
}

.personen__mail-link:hover {
    cursor: pointer;
    text-decoration: underline;
}

.personen__mail-link::after {
    /* https://css.gg/icon/mail/css */
    content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z" fill="currentColor" /></svg>');
    width: 1em;
    position: absolute;
    padding-left: 5px;
    display: block;
    right: -27px;
    top: 1px;
}

.personen__portrait {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}

.personen__portrait-bild {
    width: 100%;
    display: block;
}

@media all and (max-width: 599px) {
    .personen__name {
        margin-top: 10px;
    }
}

@media all and (min-width: 600px) {
    h1 {
        font-size: 8vw;
        line-height: 8vw;
        margin: -0.5vw 0 5vw -0.5vw;
    }

    h2 {
        font-size: 2vw;
    }

    .logo {
        width: 8vw;
        margin-bottom: -0.8vw;
    }

    .personen__person {
        display: grid;
        grid-template-columns: minmax(15ch, 400px) minmax(20ch, 400px);
        grid-template-rows: auto;
        gap: 10px 10px;
    }

    .personen__name {
        text-align: right;
    }
}

@media all and (min-width: 1000px) {
    .personen__person {
        width: 50%;
    }
}

@media all and (min-width: 1600px) {
    .personen__person {
        width: 33.3%;
    }
}