html {
    font-family: var(--font-family-sans);
    color: var(--color-text);
    max-width: 100vw;
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
}

a {
    color: currentColor;
    cursor: pointer;
}

a[href^="mailto:"] {
    word-break: break-word;
}

p {
    max-width: 48rem;
}

p a,
section ul:not(.iconlist):not(.event-teasers):not(.newsitem-teasers) a,
section ol:not(.iconlist):not(.event-teasers):not(.newsitem-teasers) a {
    white-space: nowrap;
}

p a:after,
section ul:not(.iconlist):not(.event-teasers):not(.newsitem-teasers) a:after,
section ol:not(.iconlist):not(.event-teasers):not(.newsitem-teasers) a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -0.1rem;
    width: calc(100% + 0.2rem);
    height: 33%;
    background: var(--color-text--transparent);
    -webkit-transition: height 100ms linear;
    -o-transition: height 100ms linear;
    transition: height 100ms linear; 
}

p a:hover:after,
section ul:not(.iconlist):not(.event-teasers):not(.newsitem-teasers) a:hover:after,
section ol:not(.iconlist):not(.event-teasers):not(.newsitem-teasers) a:hover:after {
    height: 100%;
}

strong, 
b {
    font-weight: bold;
}

ul,
ol,
p,
pre,
blockquote {
    margin-top: var(--space-xs);
}

ul,
ol,
p {
    line-height: var(--line-height-l);
}

section ul:not(.iconlist) {
    padding-left: 1rem;
}

li > p:first-child {
    margin-top: 0;
}

section ul:not(.iconlist):not(.gallery) li {
    list-style-type: '– ';
}

h1,
h1 *,
h2,
h2 *,
h3, 
h3 *,
h4,
h4 * {
    font-family: var(--font-family-serif);
    font-weight: bold;
    line-height: var(--line-height-m);
}

h1,
h1 * {
    font-size: var(--font-size-h1);
    margin-top: var(--space-s);
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

@media screen and (min-width: 48rem) {
    h1,
    h1 * {
        -webkit-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }
}

h2,
h2 *  {
    font-size: var(--font-size-h2);
    margin-top: var(--space-s);
}

h3,
h3 *  {
    font-size: var(--font-size-h3);
    margin-top: var(--space-s);
}

h1 + h2,
h1 + h2 *,
h2 + h3,
h2 + h3 * {
    margin-top: calc(0.5 * var(--space-s));
}

h4,
h4 *  {
    font-size: var(--font-size-h4);
    margin-top: var(--space-2xs);
}

.codeblock {
    display: -ms-grid;
    display: grid;
}

code {
    font-family: var(--font-family-mono);
    font-size: 1em;
    background: var(--color-light);
    padding: 0 .5rem;
    display: inline-block;
    color: var(--color-text);
}

pre {
    background: var(--color-text);
    color: var(--color-text--inv);
    padding: var(--space-l);
    overflow-x: scroll;
    overflow-y: hidden;
}

pre code {
    padding: 0;
    background: none;
    color: inherit;
}

blockquote {
    border-left: 0.125rem solid currentcolor;
    padding-left: var(--space-xs);
    max-width: 25rem;
    font-family: var(--font-family-script);
    font-size: var(--font-size-h2);
}

blockquote footer {
    margin-top: var(--space-3xs);
}

hr {
    border: 0;
    background: currentColor;
    height: calc(1.33 * var(--space-2xl));
    width: 0.1rem;
    margin-left: auto;
    margin-right: auto;
}

/*
hr:after {
    content: '';
    display: block;
    width: calc( 4 * var(--font-size));
    height: calc( 4 * var(--font-size));
    margin: 0 auto;
    -webkit-mask: url('../icons/.svg') no-repeat 50% 50%;
    mask: url('../icons/.svg') no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: var(--color-primary);
}
*/

input, 
button, 
textarea, 
select {
    font: inherit;
}