:root {
    --default-color: black;
    --default-background-color: #ffffff;
    --default-background: var(--default-background-color);
    --color: var(--default-color);
    --background-color: var(--default-background-color);
    --cd-color: #007b96;
    --cd-color: #1D3557;
    --cd-color: #2e3794;
    /* --cd-color: #48a99a; */
    /* --cd-color: #1e3a5f; */
    --cd-color2: #ff7b96;
    --cd-color2: #007A87;
    --cd-color2: #009d8e;
    /* --cd-color2: #ff00af; */
    /* --cd-color2: #e2b84a; */
    --em-color: #61e5ff;
    --grid-line-width: 1px;
    --grid-line: solid var(--grid-line-width) var(--default-color);
    --base-font-size: 16px;
    --default-font-size: calc(var(--font-size-device-factor) * var(--base-font-size));
    --font-size-device-factor: 1;
    --default-line-height: 1.375rem;
    --headline-line-height: 1.0em;
    --cap-height: 0.8em;
    --default-padding: calc(var(--default-line-height) * 1.0);
    --padding: var(--default-padding);
    --scrollbar-thumb-color: var(--color);
    --scrollbar-track-color: var(--background-color);
    --scrollbar-width: 12px;
}

@media (min-width: 600px) {
    :root {
        --default-padding: calc(var(--default-line-height) * 1.5);
    }
}

@media (min-width: 1025px) {
    :root {
        --font-size-device-factor: 1.125;
    }
}

@media (min-width: 1921px) {
    :root {
        --font-size-device-factor: 1.25;
    }
}

* {
    overflow-wrap: anywhere;
    /* Standard Syntax (Firefox / Future-proof) */
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
    scrollbar-width: auto;
}

/* Webkit Syntax (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 10px;
    /* Optional: Adds a padding effect around the thumb */
}

/* For the Variable Font */
/* latin-ext */
@font-face {
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../../../core/assets/fonts/lexend_deca_latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../../../core/assets/fonts/lexend_deca_latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reset for common form elements */
api-caller:not(:defined),
api-caller {
    display: none;
}

button,
input,
select,
textarea {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    background: transparent;
    color: inherit;
    vertical-align: middle;
    box-sizing: border-box;
    appearance: none;

    /* Removes default OS styling (arrows, rounded corners) */
}

a,
button,
input,
textarea {
    -webkit-tap-highlight-color: transparent;
}

pre {
    white-space: pre-wrap;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: block;
    margin: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: var(--default-line-height);
}
ol li{
    position: relative;
    padding-left: calc(2.25rem);
    counter-increment: item;
}
ol li:after{    
    position: absolute;
    display: flex;
    align-items: center;
    font-size: 0.75em;
    line-height: 1em;
    justify-content: center;
    left:0;
    top:-0.14rem;
    content: counter(item) ". ";
    color: white;
    background: var(--cd-color);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 2em;
    font-weight: 600
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
}

button {
    position: relative;
}

letter-arrow {
    letter-spacing: 0;
}

a {
    color: inherit;
}
strong {
    font-weight: 700;
}
p {
    margin-top: 0;
    margin-bottom: var(--default-line-height);
}

p:last-child {
    margin-bottom: 0;
}

:is(h1, h2, h3, h4, h4, h5, h6):first-child {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h4,
h5,
h6 {
    word-spacing: 0;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: var(--default-line-height);
    line-height: var(--headline-line-height);
}


h1,
h2 {
    font-size: 2.5rem;
}

h3 {
    margin-bottom: 0;
}

h4 {
    font-size: 1.5em;
}


h1,
h2,
h3,
h4,
h4,
h5,
h6,
ul,
p,
ol {
    max-width: 1280px;
}

/* Application */
html {
    height: 100%;
    color: var(--color);
    background: var(--background);
    font-family: 'Lexend Deca';
    font-size: var(--default-font-size);
    font-weight: 350;
    line-height: var(--default-line-height);
    box-sizing: border-box;
}

html[loaded] {
    scroll-behavior: smooth;
}

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

html,
body {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
    position: relative;
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    min-height: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    background: var(--default-background-color);
}

/* HEADER */
header {
    position: sticky;
    width: 100%;
    max-width: 100%;
    z-index: 9;
    top: 0;
    display: flex;
    flex-direction: column;
    padding-top: max(var(--padding), env(safe-area-inset-top));
    padding-left: max(var(--padding), env(safe-area-inset-left));
    padding-right: max(var(--padding), env(safe-area-inset-right));
    padding-bottom: calc(var(--default-padding) + 1px);
}

header h1 {
    margin: 0;
}

header:before {
    background: var(--cd-color);
    color: white;
}

/* rotated backgrounds */
header:before {
    content: " ";
    position: absolute;
    left: -300px;
    top: 0;
    width: calc(100% + 600px);
    height: 100%;
    transform: rotate(-1deg);
    transform-origin: top left;
}

/* SECTION */
section {
    position: relative;
    width: 100%;
    padding: var(--default-padding);
    padding-top: 3rem;
    color: var(--cd-color);
}


section:nth-child(2):before,
section:nth-child(4):before {
    content: " ";
    position: absolute;
    left: -300px;
    top: 0;
    width: calc(100% + 600px);
    height: 100%;
    transform: rotate(1deg);
    transform-origin: top left;
    background: var(--cd-color2);
    color: white;
    z-index: -1;
}

section:nth-child(2),
section:nth-child(4) {
    color: white;
}

/* ARTICLE */
.saeulen {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;
}

.saeulen>* {}

article.saeule {
    position: relative;
    padding: var(--default-padding);
    color: var(--cd-color2);
    flex: 1 1 400px;
    max-width: 800px;
}
article.saeule strong{
    color: var(--cd-color);
}
article.saeule:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 0px);
    height: 100%;
    transform: rotate(1deg);
    background: white;
    border-radius: var(--default-padding);
    z-index: -1;
}


/* MAIN */

/* LOGO */
.logo {
    position: relative;
}

.logo h1 {
    display: block;
    display: flex;
    font-size: 3em;
    flex-direction: column;
    line-height: 1em;
    margin: 0;
}

.logo svg-icon {
    position: absolute;
    background: var(--em-color);
    top: 0.15em;
    left: 0.02em
}

.logo .name {
    color: #ffffff;
}

.logo .claim {
    font-size: 0.333em;
    line-height: 1em;
    margin-top: 0.333em;
    color: var(--cd-color2);
    color: var(--em-color);
}

/* FOOTER */
footer {
    position: relative;
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    background: var(--background-color);
    padding-top: calc(var(--padding) + 1px);
    padding-left: max(var(--padding), env(safe-area-inset-left));
    padding-right: max(var(--padding), env(safe-area-inset-right));
    padding-bottom: max(var(--padding), env(safe-area-inset-bottom));
    margin-top: auto;
    display: flex;
    gap: var(--default-padding);
    color: var(--cd-color);
}

footer .footerlinks {
    display: flex;
    flex-wrap: wrap;
    column-gap: calc(1 * var(--padding));
    row-gap: calc(0.5 * var(--padding));
}

footer .footerlink {
    text-decoration: none;
    font-weight: 300;
}


/* FLEX WRAP */
.flexwrap {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--default-line-height));
}




section#kontrast {
    /* color: var(--cd-color); */
}

section#kontrast h4 {
    color: var(--cd-color2);
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.zitat {
    margin-top: 1em;
    margin-bottom: 0.5em;
    display: flex;
    flex-direction: column;
    color: var(--cd-color);
}
.zitat > *{
    margin: 0;
}
.zitat > span{
    display:block;
    margin-left: auto;
    font-size: 12px;
}