/* Mori Book & Book Italic */
@font-face {
    font-family: 'PP Mori';
    src: url(../fonts/PPMori-Book.woff);
    font-weight: normal;
}

@font-face {
    font-family: 'PP Mori';
    src: url(../fonts/PPMori-Book.woff);
    font-weight: normal;
    font-style: italic;
}

/* Mori Bold & Bold Italic */
@font-face {
    font-family: 'PP Mori';
    src: url(../fonts/PPMori-ExtraBold.woff);
    font-weight: bold;
}

@font-face {
    font-family: 'PP Mori';
    src: url(../fonts/PPMori-ExtraBoldItalic.woff);
    font-weight: bold;
    font-style: italic;
}


/* Defines variables for colors (c = color) */
:root {
    --c1: #D9D2C3;
    --c2: #FFD580;
    --c3: #80aaff;
    --c4: #191919;
    --c5: #b00020;
}

/* Defines light mode variables for colors (c = color) */
@media (prefers-color-scheme: light) {
    :root {
        --c1: #191919;
        --c2: #ffab00;
        --c3: #0054FF;
        --c4: #FFF9ED;
        --c5: #CF193A;
    }
  }


body {
    background-color: var(--c4);
    color: var(--c1);
    font-family: 'PP Mori', Arial, sans-serif;
    line-height: 1.4;
    font-size: 1rem;
    text-align: justify; /* For Edge */
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto; /* For iPhone */
}

/* Align content always in center of screen */ 
.site-wrapper {
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    display: grid;
    justify-content: center;
    align-content: center;
}

/* Wrapper that defines how a div with large text within it looks */
.content-text-wrapper {
    margin: 16vh 2.5vw 16vh 2.5vw;
    max-width: 800px;
}

/* Makes Wraper Responisible to screen size (above 800px) and sets it in middle */ 
@media only screen and (min-width: 800px) {
    .content-text-wrapper{
        margin: 16vh auto 16vh auto;
    }
}

/* Defines the look of every heading */
h1, h2, h3, h4 {
    color: var(--c2);
}

h3, h4 {
    margin-block-end: -0.25em;
    margin-block-start: 1.5em;
}

/* Defines the look of normal Links and also adds a hover animation */
a {
    color: var(--c3);
    padding-top: 0.2rem;
    text-decoration: none;
    box-shadow: 0px -0.1rem var(--c3) inset;
    transition-duration: 300ms;
}

a:hover {
    color: var(--c4);
    box-shadow: 0px -2rem var(--c3) inset;
}

a:focus {
    color: var(--c4);
    box-shadow: 0px -2rem var(--c3) inset; 
}

/* Places behind every Link that opens another tab an upright arrow */
a[target="_blank"]::after {
    content: " ↗︎";
}

/* Defines the look of a highlighted span in text */
.highlight {
    background-color: var(--c2);
    color: var(--c4);
    padding-top: 0.2rem;
}

.bold {
    font-weight: bold;
}

/* Adds color to Bullet Points in ul */
ul {
    list-style: none;
}

ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: var(--c2); /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

/* Defines the look of images */
.img-l {
    width: 100%;
}

.img-m {
    width: 70%;
}

.img-s {
    width: 30%;
}

iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}

/*Defines the Look of the Download Card for the Sub-Site Vollmacht*/

.download-card {
    min-width: 400px;
    border: solid var(--c2);
    padding: 2vh 2vw 6vh 2vw;
}

@media only screen and (min-width: 800px) {
    .download-card {
        max-width: 30vw;
    }
}

/*Defines the Look of the (added)-New-Label*/

.new-label {
    font-size: 0.5rem;
    display: inline;
    background-color: #CF193A;
    color: white;
    padding: 0.5em 0.4em 0.2em 0.4em ;
    margin-left: 0.3rem;
    border-radius: 0.2em;
}