html {
    font-size: 100%;

    font-family: 'Roboto', sans-serif;

    -webkit-text-size-adjust: 100%;
}

body {
    line-height: 1.5;
    font-size: clamp(1.125rem, 4cqi, 1.5rem);
}

section {
    container-type: inline-size;
}

/* trims of empty pixels above and below fonts */
:is(h1, h2, h3, h4, h5, h6, p, button) {
    text-box: trim-both cap alphabetic;
}

p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    padding-block: 0; /* Komplett entfernen, Abstände über margin steuern */

    hyphens: auto;
}


h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

h1 {
    font-size: clamp(2rem, 6cqi, 6rem);
    font-weight: 700;

    line-height: 1.125;

    max-inline-size: 25ch;

    text-transform: uppercase;
}

h2 {
    text-transform: uppercase;

    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.65;
    max-inline-size: 30ch;
}

h3 {
    font-size: 2rem;
    --selection-bg-color: rgba(0, 0, 255, 0.3);
    --selection-text-color: #d8cc48;
}

h4 {
    font-size: clamp(3rem, 4vw + 0.5rem, 4rem);
    font-weight: 700;

    max-inline-size: 25ch;

}

h5 {
    font-size: 1.75rem;

}

h6 {
    font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
}


p {
    text-wrap: pretty;

    line-height: 1.2;

    font-weight: 500;
    letter-spacing: -0.03em;

    /* max 75ch */
    max-inline-size: 65ch;
}

blockquote {
    text-transform: uppercase;

    &::before {
        content: '\201C';
    }

    &::after {
        content: '\201D';
    }
}