@font-face {
    font-family: "Sequel";
    src: url("assets/fonts/sequel_sans_medium_disp-webfont.woff2") format("woff2"),
        url("assets/fonts/sequel_sans_medium_disp-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-display: swap;
}

@font-face {
    font-family: "Sequel";
    src: url("assets/fonts/sequel_sans_bold_disp-webfont.woff2") format("woff2"),
        url("assets/fonts/sequel_sans_bold_disp-webfont.woff") format("woff");
    font-weight: bold;
    font-style: bold;
    text-rendering: optimizeLegibility;
    font-display: swap;
}

@font-face {
    font-family: "Sequel";
    src: url("assets/fonts/sequel_sans_roman_disp-webfont.woff2") format("woff2"),
        url("assets/fonts/sequel_sans_roman_disp-webfont.woff") format("woff");
    font-weight: 300;
    font-style: 300;
    text-rendering: optimizeLegibility;
    font-display: swap;
}

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

* {
    margin: 0;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

:root {
    --clr-dark: #030303;
    --clr-light: white;
    --clr-pink: #d37496;
    --clr-green: #227D49;
    --clr-violet: #802B87;

    /* @link https://utopia.fyi/clamp/calculator?a=320,1240,14.3—24|23.99—40|29.98—50|47.99—80|53.98—90 */

    --h1: clamp(3.3738rem, 2.5907rem + 3.9152vi, 5.625rem);
    --h2: clamp(2.9994rem, 2.3035rem + 3.4793vi, 5rem);
    --h3: clamp(1.8738rem, 1.4385rem + 2.1761vi, 3.125rem);
    --text: clamp(1.4994rem, 1.1513rem + 1.7402vi, 2.5rem);
    /* --padding: clamp(0.8938rem, 0.6829rem + 1.0543vi, 1.5rem); */
    --padding: var(--text);

    --contain: 1080px;
    --contain-text: 80ch;

    --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
    --gutter: var(--padding, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));

    --defaultLineHeight: 1.1;

    --flow: var(--padding);

    --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

@media screen and (min-width: 1024px) {
    :root {
        --defaultLineHeight: 1.175;
    }
}

*,
*:after,
*:before {
    scrollbar-gutter: stable;
}

html {
    height: 100%;
    max-width: 100%;
    font-family: "Sequel", var(--system-ui);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    min-width: 320px;
    scroll-behavior: smooth;
    color: var(--clr-light);
    background-color: var(--clr-dark);
    font-size: 14px;
}

@media screen and (min-width: 1024px) {
    html {
        font-size: 16px;
    }
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
}

address {
    font-style: normal;
}

a,
button {
    outline-offset: var(--outline);
    outline-color: var(--clr-dark);
    outline-width: 1px;
}

::-moz-selection {
    color: var(--clr-violet);
    background-color: var(--clr-pink);
}

::selection {
    color: var(--clr-violet);
    background-color: var(--clr-pink);
}

.flow>*+* {
    margin-block-start: var(--text);
}

.content-grid {
    --padding-inline: var(--gutter);
    --content-max-width: var(--contain, 80ch);
    --breakout-max-width: calc(var(--content-max-width, 80ch) * 1.2);
    --content-size: min(100% - (var(--padding-inline) * 2),
            var(--content-max-width));
    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

    display: grid;
    grid-template-columns:
        [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] var(--content-size) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid> :not(.breakout, .full-width),
.full-width> :not(.breakout, .full-width) {
    grid-column: content;
}

/* typography */
h1,
h2,
h3,
h4 {
    line-height: 1.1;
    margin: 0;
    line-height: var(--defaultLineHeight);
}

h1 {
    font-size: var(--h1);
    font-weight: bold;
}

h2 {
    font-size: var(--h2);
    font-weight: normal;
}

h3 {
    font-size: var(--h3);
    font-weight: bold;
}

p {
    font-size: var(--text);
    font-weight: 300;
    line-height: var(--defaultLineHeight);
}

p.bold {
    font-weight: bold;
}

/* images */
picture img,
img {
    user-select: none;
    max-width: 100%;
    height: auto;
    /* Removes the empty space on the bottom without using 'display'. */
    vertical-align: middle;
    /* If image doesn't load, the alt text is visible in italic. */
    font-style: italic;
    /* Used on images with LQIP backgrounds: see snippet 'image-with-lqip'. */
    background-repeat: no-repeat;
    background-size: cover;
    /* In case you are using 'float' on the image. */
    shape-margin: 1rem;
}

.image {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.tap-highlight {
    -webkit-tap-highlight-color: transparent;
}

a:visited,
a:focus,
a {
    color: inherit;
}

video {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.container {
    position: relative;
}

main {
    position: relative;
    width: 100%;
}

main h1 {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    padding-top: var(--text);
    line-height: var(--defaultLineHeight);
}

@media screen and (min-width: 1024px) {
    main h1 {
        line-height: 1;
    }
}

.hero-image {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.section {
    padding: var(--padding) 0;
}

main.section {
    padding: 0;
}

.section.first {
    padding-top: 0;
}

.video-section {
    padding: 0;
}

.section.black {
    background-color: var(--clr-dark);
}

.section.pink {
    background-color: var(--clr-pink);
}

.section.green {
    background-color: var(--clr-green);
}

.section.violet {
    background-color: var(--clr-violet);
}

.footer-logo {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.footer-logo img {
    max-width: 100%;
    height: auto;
    width: 200px;
    /* Ändere die Größe nach Bedarf */
}

@media (max-width: 200px) {
    .footer-logo img {
        width: 150px;
        /* Anpassung für mobile Geräte */
    }
}