:root {

--font-size-xs: 0.8rem;
--font-size-s: 1.1rem;
--font-size-sm: 1.25rem;
--font-size-m: 1.5rem;
--font-size-l: 2rem;
--font-size-xl: 3rem;
--font-size-xxl: 4rem;

--space-xxs: 0.4rem;
--space-xs: 0.8rem;
--space-s: 1rem;
--space-sm: 1.75rem;
--space-m: 2.5rem;
--space-ml: 3.75rem;
--space-l: 5rem;
--space-xl: 7.5rem;
--space-xxl: 10rem;

--yellow: #fff019;
--yellow-hover: #f9ff85;
--dark: #07111D;
--dark-hover: #1b2a3b;
--almost-dark: #1D3047;
--medium-dark: #415771;
--medium: #73859C;
--medium-lighter: #B1BAC6;
--medium-almost-light: #e6eaf0;
--light: #f6f6f8;
--lightest: #f7f9fd;

--medium-light: #ADB8DE;

--slider-element-height: 20rem;

}

/* Seitenweite Settings */

:-webkit-any(article, aside, nav, section) h1, ul {
    margin-block-start: 0px;
    margin-block-end: 0px;
}

html {
    box-sizing: border-box;
    font-family: "din-2014", sans-serif;
    font-size: 112.5%;
    color: var(--dark);
    background-color: var(--lightest);
}

body {
    margin: 0px;
}

.max-width, .nav-content {
    padding-left: var(--space-l);
    padding-right: var(--space-l);
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

section:not(.hero), footer {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* Typografie */

h1, h2, h3, h4, h5, h6, p, li {
    margin-block-start: 0px;
    margin-block-end: 0px;
    line-height: calc(1em + 0.5rem);
    max-width: 40rem;
}

.rechtliches h1,
.rechtliches h2,
.rechtliches h3,
.rechtliches h4,
.rechtliches p {
    margin-top: 1em;
    margin-bottom: 0.5em;
}


p, li:not(.slider-1-1 li) {
    max-width: 32.5em;
}

p, li:not(.slider-1-1 li), details {
    line-height: 1.7;
    font-weight: 300;
    font-size: var(--font-size-s);
    color: var(--dark); 
}

ul:not(nav ul):not(.slider-1-1 ul):not(ul.service-slider-list) {
    padding-inline-start: var(--space-xs);
}

.slider-1-1 ul {
    margin-top: var(--space-s);
}

li:not(nav li):not(.slider-1-1 li):not(.service-slider-list li) {
    padding-left: var(--space-s);
}

li:not(:last-of-type):not(nav li):not(.slider-1-1 li):not(.service-slider-list li) {
    margin-bottom: var(--space-xs);
}

li:first-of-type:not(nav li):not(.slider-1-1 li):not(.service-slider-list li) {
    margin-top: var(--space-s);
}

h1, h2, h3, h4 {
    font-weight: 300;
    text-transform: uppercase;
}

h1 {
    font-size: var(--font-size-xxl);
}

h2 {
    font-size: var(--font-size-xl); 
    max-width: 50rem;
}

h3, .heading-3 {
    font-size: var(--font-size-l);
}

h4, .heading-4 {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    font-weight: 300;
}


h1 span, h2 span, h3 span, h4 span {
    font-weight: 600;
}

.paragraph-special {
    align-self: flex-end;
}

.paragraph-special-no-line {
    align-self: flex-end;
}

.paragraph-special::before {
    content: "";
    display: block;
    width: 33%; /* Linie nimmt 33% der Breite ein */
    height: 0.1em; /* Höhe der Linie */
    background-color: var(--medium-almost-light); /* Farbe der Linie */
    margin-bottom: var(--space-sm);
}

.number-intro {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.number {
    font-size: var(--font-size-xxl);
    font-weight: 500;
}


/* Links und Buttons */

a {
    color: var(--dark);
    text-decoration: none;
    pointer-events: auto;
}

p a, label a {
    text-decoration: underline;
    font-weight: 500;
    color: inherit;
}

a.is-active {
    font-weight: 600;
}

.textlink {
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

.textlink svg {
    display: inline-block;
    margin-left: 0.5em; /* Space between text and image */
    vertical-align: middle; /* Align the image with the text */
    height: 0.8em;
    padding-bottom: 0.1em;
}

button:not(.accordion) {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
    align-items: center;
    padding: var(--space-s) var(--space-m);
    border-radius: 10em;
    font-size: var(--font-size-sm);
    cursor: pointer;
    font-weight: 400;
    font-family: inherit;
}

button svg {
    height: var(--font-size-xs);

}

.is-external svg {
    height: 0.7em;
}


.transform-on-hover {
    transform: translateX(0.2em); /* Move SVG slightly to the right */
}

.transform-on-hover-left {
    transform: translateX(-0.2em);
}

.transform-on-hover-down {
    transform: translateY(0.2em);
}

.transform-on-hover-up {
    transform: translateY(-0.125em) translateX(0.125em);
}


/* Abstände */

.spacer-s {
    height: var(--space-s);
}

.spacer-m {
    height: var(--space-m);
}

.spacer-ml {
    height: var(--space-ml);
}

.spacer-l {
    height: var(--space-l);
}

.spacer-xl {
    height: var(--space-xl);
}

/* Layouts */

.layout-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s);
}

.layout-1-1-m {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
}

.layout-1-1-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
}

.is-auto-content-left {
    grid-template-columns: auto 1fr;
}

.layout-1-1-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--space-s);
    align-items: stretch;
}

.layout-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
    align-items: end;
    justify-content: space-between;
}

.max-width-2-1 {
    max-width: 50rem;
}

.layout-2-1 .slider-nav {
    justify-self: end;
}

.layout-2-1 > p {
    margin-top: 0.3em;
}

.layout-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-xl);
}

.layout-1-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-xl);
}

.layout-1-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-m);
}

.contentbox-number {
    display: flex;
    flex-direction: column;
    gap: var(--space-xss);
}

.dividerline {
    display: block;
    width: 100%;
    height: 0.1em;
    background-color: var(--medium-almost-light);
}

.is-in-slider {
    color: white;
    opacity: 25%;
    height: 0.05em;
    margin-bottom: var(--space-s);
}

.overlaying-element-wrapper {
    position:relative;
}

.flex-align-top {
    align-items: start;
}

.flex {
    display: flex;
    gap: var(--space-l);
    flex-wrap: wrap;
}

/* Breakpoints */

@media screen and (max-width: 80rem) {
    .layout-1-1-1-1 {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 67.5rem) {

    .layout-1-1-1 {
        gap: var(--space-s);
    }

    .spacer-l {
        height: var(--space-m);
    }

    .flex {
        gap: var(--space-m);
    }

    .layout-1-1-section {
        grid-template-columns: 1fr;
        gap: var(--space-m);
    }

    section:not(.hero), footer {
        padding-top: var(--space-l);
        padding-bottom: var(--space-l);
    }

    h1 {
        font-size: var(--font-size-xl);
    }
    
    h2 {
        font-size: var(--font-size-l); 
        max-width: 50rem;
    }
    
    h3, .heading-3 {
        font-size: var(--font-size-l);
    }
    
    h4, .heading-4 {
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        font-weight: 300;
    }

    .spacer-xl {
        height: var(--space-l);
    }

    .spacer-m {
        height: var(--space-sm);
    }
   
}

@media screen and (max-width: 45rem) {

    .layout-1-1-1 {
        grid-template-columns: 1fr;
        gap: var(--space-m);
    }

    .layout-1-1 {
        grid-template-columns: 1fr;
    }

    .layout-1-1-1-1 {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: var(--font-size-l);
    }

    .main-logo {
        max-width: 10rem;
    }

    :root {
    --slider-element-height: 25rem;
    }

    .textlink {
        font-size: var(--font-size-s); 
    }
}