*, :after, :before {
    box-sizing: border-box;
}

blockquote, body, dd, dl, figure, h1, h2, h3, h4, p {
    margin: 0;
}

html {
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    background: var(--color-light);
    color: var(--color-dark);
    font-family: var(--font-base);
    font-size: var(--size-step-1);
    letter-spacing: var(--tracking);
    line-height: 1.4;
    min-height: 100vh;
}

:root {
    --color-dark: #404040;
    --color-light: #fff;
    --color-primary: #0B5C9E;
    --color-secondary: #C32B2C;
    --space-s-m: clamp(1rem, 0.73rem + 1.36vw, 1.875rem);
    --space-m-l: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
    --space-l-xl: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
    --space-l-2xl: clamp(2rem, 1.07rem + 4.66vw, 5rem);
    --space-2xl-3xl: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
    --size-step-1: clamp(1.1875rem, 1.01rem + 0.87vw, 1.75rem);
    --size-step-2: clamp(1.4375rem, 1.11rem + 1.65vw, 2.5rem);
    --size-step-3: clamp(1.75rem, 1.19rem + 2.82vw, 3.5625rem);
    --size-step-4: clamp(2.0625rem, 1.15rem + 4.56vw, 5rem);
    --size-step-5: clamp(2.5rem, 1.08rem + 7.09vw, 7.0625rem);
    --size-step-6: clamp(3rem, 0.84rem + 10.78vw, 9.9375rem);
    --font-base: Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    --font-serif: Georgia, sans-serif;
    --gutter: var(--space-s-m);
    --border-radius: var(--size-step-1);
    --tracking: -0.05ch;
    --tracking-s: -0.075ch;
    --wrapper-max-width: 85rem;
    --spot-color: var(--color-dark);
}

a {
    color: currentcolor;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img, picture {
    display: block;
    max-width: 100%;
}

h1, h2, h3 {
    letter-spacing: var(--tracking-s);
    line-height: 1;
    max-width: 20ch;
}

h1 {
    font-size: var(--size-step-5);
    width: 16ch;
    word-wrap: break-word;
}

h2 {
    font-size: var(--size-step-4);
}

h3 {
    font-size: var(--size-step-3);
}

blockquote:not([class]), li, p {
    max-width: 50ch;
}

blockquote:not([class]) {
    font-family: var(--font-serif);
    font-size: var(--size-step-2);
}

blockquote:not([class]) p:last-of-type {
    font-family: var(--font-base);
    font-size: var(--size-step-1);
    font-weight: 400;
}

svg {
    flex: none;
    height: 2ex;
    width: auto;
}

.card {
    background: var(--color-dark);
    border-radius: var(--border-radius);
    color: var(--color-light);
    max-width: unset;
    padding: var(--space-m-l);
}

.card ::selection {
    background: var(--color-secondary);
    color: var(--color-dark);
}

.curve {
    fill: var(--spot-color, var(--color-light));
    display: block;
    height: 3.5em;
    width: 100%;
}

.features {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem, 33%, 20rem);
    --gutter: var(--space-l-xl);
    --flow-space: var(--space-s);
    text-align: center;
}

.features svg {
    display: block;
    height: 4em;
    margin-inline: auto;
}

.features a {
    text-decoration: none;
}

.features a:hover {
    text-decoration: underline;
    text-decoration-thickness: .08ex;
    text-underline-offset: .2ex;
}

.prose {
    --flow-space: var(--space-l-xl);
    --wrapper-max-width: 55rem;
}

.prose :is(h2, h3, h4) + * {
    --flow-space: var(--space-s-m);
}

.prose blockquote {
    border-inline-start: 10px solid var(--color-secondary);
    font-family: var(--font-serif);
    font-size: var(--size-step-2);
    font-style: italic;
    padding: var(--space-m-l);
}

.prose blockquote > * + * {
    margin-top: var(--space-m-l);
}

.prose blockquote :last-child {
    font-family: var(--font-base);
    font-size: var(--size-step-1);
    font-style: normal;
}

.section > .curve {
    transform: translateY(-1px);
}

.section > .curve:first-child {
    transform: rotate(180deg) translateY(-1px);
}

.section__inner {
    background: var(--spot-color, var(--color-dark));
    color: var(--color-light);
}

.section blockquote {
    font-size: var(--size-step-4);
    font-weight: 700;
    letter-spacing: var(--tracking-s);
    line-height: 1;
}

.section :is(h1, h2, h3, blockquote) {
    opacity: 95%;
}

.signoff h2 {
    font-size: var(--size-step-1);
    font-weight: 400;
    letter-spacing: var(--tracking);
    max-width: 30ch;
}

.signoff p {
    color: var(--color-primary);
    font-size: var(--size-step-6);
    font-weight: 700;
    letter-spacing: var(--tracking-s);
    line-height: 1;
}

.grid {
    display: grid;
    gap: var(--gutter, var(--space-s-l));
    grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
}

.grid[data-rows=masonry] {
    align-items: start;
    grid-template-rows: masonry;
}

.grid[data-layout="50-50"] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem, 50vw, 26rem);
}

.flow > * + * {
    margin-top: var(--flow-space, 1em);
}

.region {
    padding-bottom: var(--region-space, var(--space-l-2xl));
    padding-top: var(--region-space, var(--space-l-2xl));
}

.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--wrapper-max-width, 85rem);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    position: relative;
}

.mt-l-xl {
    margin-top: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}

.center {
    text-align: center;
}

.flow-space-s-m {
    --flow-space: clamp(1rem, 0.73rem + 1.36vw, 1.875rem);
}

.flow-space-2xl-3xl {
    --flow-space: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}

.spot-color-primary {
    --spot-color: #0B5C9E;
}

.spot-color-secondary {
    --spot-color: #C32B2C;
}

#hallidude {
    width: 17rem;
    height: auto;
    display: block;
    margin: auto;
}

#anrufen {
    text-align: center;
}

#anrufen svg {
    height: 8rem;
    border-radius: 50%;
    border: 10px solid #C32B2C;
    padding: 1rem;
}

.linkimage {
    max-width: 100%;
    border-radius: 2rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    height: auto;
}

.blaumann {
    color: #0B5C9E;
}

.lightlink {
    color: #add8e6;
}

.smaller {
    font-size: clamp(1.7rem, 1.16rem + 2.80vw, 3.4rem);
}

.slide {
    grid-area: 1 / 1;
    opacity: 0;
    animation: fadeSlide 20s infinite ease-in-out;
    width: 100%;
    height: auto;
    border-radius: 4rem;
}

@keyframes fadeSlide {
    0% { opacity: 0; }
    14.28% { opacity: 1; }
    28.57% { opacity: 1; }
    42.85% { opacity: 0; }
    100% { opacity: 0; }
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 2.857s; }
.slide:nth-child(3) { animation-delay: 5.714s; }
.slide:nth-child(4) { animation-delay: 8.571s; }
.slide:nth-child(5) { animation-delay: 11.428s; }
.slide:nth-child(6) { animation-delay: 14.285s; }
.slide:nth-child(7) { animation-delay: 17.142s; }

.boxlink {
    border: 3px solid #0B5C9E;
    transition: border 0.2s ease-in-out;
    color: #0B5C9E;
}

.boxlink:hover {
    border: 3px solid #C32B2C;
    color: #C32B2C;
}

@media (max-width: 321px) {
    body, h1, article {
        font-size: 0.8rem;
    }
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.2rem;
    }
}