@font-face {
    font-family: "Manrope";
    src:
        url("/assets/fonts/manrope-regular.woff2"),
        url("/assets/fonts/manrope-regular.woff"),
        url("/assets/fonts/manrope-regular.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src:
        url("/assets/fonts/manrope-bold.woff2"),
        url("/assets/fonts/manrope-bold.woff"),
        url("/assets/fonts/manrope-bold.otf") format("opentype");
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Font sizes */
    --font-size-xxxl: 6rem;
    --font-size-xxl: 4.75rem;
    --font-size-xl: 3rem;
    --font-size-ll: 2rem;
    --font-size-l: 1.25rem;
    --font-size-m: 1rem;
    --font-size-s: 0.75rem;

    --line-height: 1.3;
    --line-height-small: 0.9;

    --letter-spacing-small: 4%;

    --icon-width: 40px;

    --rounded-corners-min: 0.4em;
    --rounded-corners: 0.6em;
    --rounded-corners-max: 1em;

    /* Spacing */
    --spacing-xxl: 48px;
    --spacing-xl: 40px;
    --spacing-l: 32px;
    --spacing-m: 24px;
    --spacing-s: 16px;
    --spacing-xs: 8px;
    --spacing-xxs: 4px;

    --text-margin-bottom: 0.5em;

    /* Colors */
    --color-primary: #9EB9EA;
    --color-primary-transparent: hsl(356.5, 85.12%, 47.45%, .5);
    --color-primary-darkest-transparent: hsl(354, 83%, 2%, .90);
    --color-black: #080808;
    --color-black-transparent: hsl(198, 31.25%, 6.27%, .9);
    --color-grey: #06090b;
    --color-white: #fdfdfd;
    --color-text-shadow-white: #240000;
}

/* ----- CSS Reset ----- */
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
    margin: 0;
}

html {
    scrollbar-gutter: stable;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
    color: var(--color-white);
    background-color: var(--color-black);
    font-family: "Manrope";
    hyphens: auto;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
    max-width: 70ch;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    max-width: 70ch;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}

/* ----- !CSS Reset----- */

/* ----- Helper Classes ----- */
.visually-hidden {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.text-xxxl {
    font-size: var(--font-size-xxxl);
    font-family: "Manrope";
    font-weight: bold;
    /*text-transform: uppercase;*/
    /*letter-spacing: var(--letter-spacing-small);*/
    line-height: 1;
}

.text-xxl {
    font-size: var(--font-size-xxl);
    font-family: "Manrope";
    font-weight: normal;
    /*text-transform: uppercase;*/
    /*letter-spacing: var(--letter-spacing-small);*/
}

.text-xl {
    font-size: var(--font-size-xl);
    font-family: "Manrope";
    font-weight: normal;
    /*text-transform: uppercase;*/
    /*letter-spacing: var(--letter-spacing-small);*/
}

.text-ll {
    font-size: var(--font-size-ll);
    font-weight: bold;
}


.text-l {
    font-size: var(--font-size-l);
    font-weight: bold;
    /*letter-spacing: var(--letter-spacing-small);*/
}

.text-m-bold {
    font-size: var(--font-size-m);
    font-weight: bold;
    /*letter-spacing: var(--letter-spacing-small);*/
}

.text-m {
    font-size: var(--font-size-m);
    font-weight: normal;
    letter-spacing: var(--letter-spacing-small);
}

.text-s {
    font-size: var(--font-size-s);
    font-weight: normal;
    letter-spacing: var(--letter-spacing-small);
}

.title * {
    hyphens: none;
}

.container {
    padding-block: var(--spacing-m);
}

.section {
    margin-inline: auto;
    max-width: 1600px;
    padding-inline: var(--spacing-m);
}

.section-button {
    position: sticky;
    margin: auto;
    max-width: 1600px;
    padding-inline: var(--spacing-m);
    top: var(--spacing-s);
    z-index: 10;
}

.full-height {
    min-height: 100svh;
}

/* ----- !Helper Classes ----- */

strong {
    font-weight: 700;
}

a {
    color: var(--color-white);
}

a:is(:hover, :focus-visible):not(.button) {
    text-decoration: 3px underline;
}

.footer a {
    color: var(--color-black);
}

a:visited:not(.button, footer *, .title-link) {
    color: var(--color-primary);
}

.title-link {
    text-decoration: none;
}

.title-link:is(:hover, :focus-visible) {
    text-decoration: 3px underline;
}

.primary-color {
    color: var(--color-black);
}

.prose>*+* {
    margin-block-start: 0.75em;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}

.logo {
    max-width: 55%;
    margin: auto;
}

.button {
    display: grid;
    z-index: 0;
    position: relative;
    background: var(--color-white);
    color: var(--color-black);
    padding-block: 0.5em;
    padding-inline: 0.75em;
    text-decoration: none;
    border: 0.02em transparent var(--color-primary-darker);
    border-radius: var(--rounded-corners);
    width: max-content;
    transition:
        scale 250ms ease-in-out;
}

.button:is(:hover, :focus-visible) {
    border: var(--color-black);
    scale: 0.98;
    text-decoration: underline;
}

a.button.back {
    margin-block: var(--spacing-s);
    /*margin-inline: var(--spacing-m);*/
    position: sticky;
    top: var(--spacing-s);
}

.icon {
    width: auto;
    height: auto;
    filter: invert(97%) sepia(61%) saturate(0%) hue-rotate(27deg) brightness(101%) contrast(107%);
    /*margin-right: var(--spacing-xs);*/
}

.icon-red {
    width: auto;
    height: auto;
    filter: invert(29%) sepia(95%) saturate(5023%) hue-rotate(344deg) brightness(84%) contrast(112%);
    margin-right: var(--spacing-xs);
}

.infolist {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: var(--spacing-s);
}

.infolist-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

div.ki {
    position: relative;
    z-index: 1;
}

div.ki::before {
    content: "KI-generiert";
    background-color: var(--color-white);
    color: var(--color-black);
    position: absolute;
    right: var(--spacing-xs);
    top: var(--spacing-xs);
    z-index: 2;
    font-size: var(--font-size-s);
    border-radius: var(--spacing-xxs);
    padding-inline: var(--spacing-xxs);
}

/*
  ------
*/
main {
    position: relative;
    z-index: 1;
    overflow-x: hidden;
    background-color: var(--color-black);
}

.two-columns {
    display: grid;
    grid-template-columns: 3fr 2fr;
    min-height: 100svh;
}

.two-columns:first-child {
    align-items: center;
}


.two-columns figure {
    padding: var(--spacing-l);
}


.background-image {
    width: 100vw;
    overflow-x: hidden;
    background-image: url("/assets/img/tm_background_image.avif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*border-image: fill 1 radial-gradient(transparent, transparent, var(--color-black));*/
}

.content {
    /*display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100svh;
    align-items: center;
    padding: var(--spacing-l);
    gap: var(--spacing-m);*/
    display: flex;
    flex-direction: column;
    padding-block: var(--spacing-l);
    justify-content: center;
    align-items: start;
    gap: var(--spacing-l);
}

.background-gradient {
    background: radial-gradient(circle at center,
            var(--color-primary-darkest-transparent) 30%,
            /*transparent,*/
            transparent);
}

.first-page {
    display: flex;
    flex-direction: column;
    padding-block: var(--spacing-l);
    justify-content: center;
    align-items: start;
    gap: var(--spacing-l);
}

#first-page-info {
    align-items: start;
}

#first-page-info>* {
    margin-bottom: 1rem;
}

.top-content {
    margin-inline: auto;
    display: flex;
    align-items: start;
    justify-content: start;
}

#subtitle {
    color: var(--color-primary);
}

.middle-content {
    margin-inline: auto;
}

.middle-content>* {
    margin-block-end: var(--spacing-s);
}

.form {
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.form-input-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
    gap: var(--spacing-xxs);
    width: 100%;
}

.form label {
    font-weight: bold;
}

.form-input-wrapper input {
    border-radius: var(--rounded-corners);
    border: transparent;
    padding: var(--spacing-s);
    letter-spacing: var(--letter-spacing-small);
}

input::placeholder {
    letter-spacing: var(--letter-spacing-small);
}

input:user-invalid {
    border: 3px solid var(--color-primary);
    color: var(--color-primary);
    padding: calc(var(--spacing-s) - 3px);
    position: relative;
}

form .error-message {
    display: block !important;
    position: relative;
    color: var(--color-primary);
}

form .datenschutz {
    padding-block-end: var(--spacing-xxs);
}

form .error-message:empty {
    visibility: none;
}

.bottom-content>*:not(:last-child) {
    margin-bottom: var(--spacing-m);
}

.hr {
    border-top: 2px var(--color-primary) solid;
    width: 65%;
    margin: auto;
}

.info-cards {
    position: relative;
    padding-block: var(--spacing-m);
    display: flex;
    /*justify-content: space-around;*/
    flex-wrap: wrap;
}

.info-cards>* {
    padding-inline: var(--spacing-m);
    /*flex: 1;*/
    display: flex;
    gap: var(--spacing-s);
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.info-card:first-child {
    padding-inline-start: 0px;
    border-right: 1px solid var(--color-primary);
}

.info-card:last-child {
    padding-inline-end: 0px;
    border-left: 1px solid var(--color-primary);
}

.footer {
    /*position: sticky;
    bottom: 0;
    left: 0;*/
    background-color: var(--color-white);
    color: var(--color-black);
    text-align: right;
    padding: var(--spacing-m);
    z-index: 0;
}

.footer p {
    font-size: 1.25rem;
}

.footer ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-s);
    justify-content: flex-end;
    flex-wrap: wrap;
}


@media (max-width: 1050px) {
    .two-columns {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 100svh;
    }

    .two-columns figure {
        padding: 0%;
        padding-block-end: var(--spacing-m);
    }
}

@media (max-width: 800px) {
    :root {
        --font-size-xxxl: 3.8rem;
        --font-size-xxl: 3rem;
        --font-size-xl: 2.5rem;
    }

    .logo {
        max-width: 100%;
    }

    main.background-image {
        background-image: url("/assets/img/tm_background_image_mobile_2.jpg");
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .two-columns {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 100svh;
    }

    .two-columns figure {
        padding: 0%;
        padding-block-end: var(--spacing-m);
    }

    .content {
        align-items: baseline;
    }

    #first-page-info {
        gap: var(--spacing-s);
        align-items: flex-start;
    }

    #first-page-info>* {
        text-align: left;
        margin-bottom: 0;
    }

    .top-content {
        text-align: left;
        padding-block-end: var(--spacing-l);
        align-items: flex-start;
    }

    .middle-content {
        width: auto;
    }

    .bottom-content {
        width: 100%;
    }

    .form {
        align-items: start;
    }

    .form label {
        flex: 100%;
    }

    form .error-message {
        display: block;
        position: relative;
    }

    .form button {
        flex: 1;
    }

    button:is(:hover, :focus-visible) {
        background-color: var(--color-white);
        color: var(--color-black);
        transform: none;
        box-shadow: none;
    }

    button:active {
        transform: none;
        box-shadow: none;
    }

    .info-cards {
        flex-direction: column;
        gap: var(--spacing-m);
        max-width: 100%;
    }

    .info-card {
        padding: unset;
        flex: 1;
        justify-content: unset;
    }

    .info-card:first-child {
        border-block-end: 1px solid var(--color-primary);
        border-right: none;
        padding-bottom: var(--spacing-m);
    }

    .info-card:last-child {
        border-block-start: 1px solid var(--color-primary);
        border-left: none;
        padding-top: var(--spacing-m);
    }

    .success-message {
        text-align: left;
    }
}

/* View Transitions */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-group(*) {
        mix-blend-mode: color-burn;
        animation: 750ms;
    }
}