:root {
    --fontFamily: roboto, sans-serif;
    --fontWeight: 400;
    --lineHeight: 1.5;
    --strokeWidth: 0.032em;
    --letterSpacing: 0.01em;
    --colPro01: 133, 173, 30;
    --colPro02: 180, 200, 115;
    --colPro03: 200, 210, 170;
    --colContra01: 237, 107, 86;
    --colContra02: 217, 134, 126;
    --colContra03: 204, 167, 163;
    --colAttention01: 233, 174, 0;
    --colAttention02: 230, 198, 116;
    --colAttention03: 230, 215, 160;
    --colKnot: 256, 256, 256, 0.3;
    --colSpecialInfo: 54, 169, 225;
    --colNormalIcon: 193, 193, 193;
    --colNormalLine: 193, 193, 193;
    --colBackrule: 0, 0, 0, 0.45;
    --colOpener: 145, 145, 145;
    --colRequirement: 255, 255, 255, 0.4;
    --colTaMapIcon: 226, 192, 125;
    --colBG: 255, 255, 255;
    --colAccent01: 33, 121, 203;
    --colAccent02: 53, 141, 223;
    --colUIBack01: 108, 108, 108;
    --colUIBack02: 215, 215, 215;
    --colUIBack03: 235, 235, 235;
    --colUIBack04: 248, 248, 248;
    --colUIBack05: 255, 255, 255;
    --colUIText01: 60, 60, 60;
    --colUIText02: 108, 108, 108;
    --colUIText03: 135, 135, 135;
    --colUIText04: 210, 210, 210;
    --colUIText05: 240, 240, 240;
    --colRatinglevel01: 133, 173, 30;
    --colRatinglevel02: 196, 195, 40;
    --colRatinglevel03: 232, 188, 3;
    --colRatinglevel04: 240, 147, 83;
    --colRatinglevel05: 237, 107, 86;
    --boxShadow: 0, 0, 0, 0.2;
    --boxCorner: 256, 256, 256, 1;
    --focusArea01: 0, 0, 0, 0.2;
    --focusArea02: 265, 265, 265, 1;
    --Wings_LogoTypeColor: 0, 48, 93;
    --bodyBG_H: url(BG_Bright_H.jpg);
    --bodyBG_V: url(BG_Bright_V.jpg);
    --welcomeBG_V: var(--welcomeBG_bright_V, url(intro_BG_BrightV.jpg));
    --welcomeBG_H: var(--welcomeBG_bright_H, url(intro_BG_BrightH.jpg));
    --WingsBG: url(Wings_introBGbright.jpg);
    --focusOutline: 1px dashed rgba(var(--colAccent01), 0.5)
}



/* basicFrame */


* {
    box-sizing: border-box;
    -webkit-touch-callout: none;
}


html {
    height: 100%;
    overscroll-behavior-y: none;
    -webkit-touch-callout: none;
}

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-touch-callout: none;
    overscroll-behavior-y: none;
    background-color: rgba(var(--colUIBack04));
    color: rgb(var(--colUIText01));
    font-family: var(--fontFamily);
    line-height: var(--lineHeight);
    font-weight: var(--fontWeight);
    letter-spacing: var(--letterSpacing);
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-chars: auto 5;
    -ms-hyphenate-limit-chars: auto 5;
    hyphenate-limit-chars: auto 5;
}

header {
    display: block;
    padding: 0px 3%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

header>h2 {
    max-width: 32em;
}

main {
    flex-grow: 1;
    padding: 0px 3% 3% 3%;
    display: flex;
    flex-direction: column;
}

.noTouch main {
    transition: background 0.3s ease, filter 0.3s ease;
}

main::after {
    content: "";
    background: url(HFH_introBGbright02_H.jpg) top left no-repeat;
    background-position: 60%;
    background-size: cover;
    opacity: 0.1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

footer {
    color: rgb(var(--colUIText02));
    padding: 0.5em 3%;
    /* position: relative; */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: flex-end; */
    /* background-color: rgb(var(--colUIBack03)); */
}


a {
    text-decoration: none;
    word-break: break-all;
}

#newsBox a,
span a,
p a {
    color: rgb(var(--colAccent01));
}

.noTouch #newsBox a:hover,
.noTouch span a:hover,
.noTouch p a:hover {
    color: rgba(var(--colAccent01), 0.6);
}



p {
    line-height: calc(var(--lineHeight) * 1.2);
    font-weight: unset;
    margin: 1em;
    padding-inline-start: unset;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

}

h1,
h2,
h3,
h4 {
    font-weight: unset;
    margin-left: 0.75rem;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 1em;
    margin-top: 1em;
}

h2 {
    font-size: 2em;
    margin-bottom: 0.75em;
    margin-top: 1em;
}


h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    margin-top: 1em;
}

h4 {
    font-size: 0.85em;
    margin-bottom: 0px;
    margin-top: 1em;
}

.smallText {
    font-size: 0.8em;
}


/* Linien */

hr {
    background: rgb(var(--colUIText04));
    border: none;
    height: 1px;
    width: 100%;
    margin: 1em 0px;
}

summary {
    cursor: pointer;
    /* color: rgb(var(--colAccent01)); */
    padding: 0em 0.25em;
    border-radius: 0.3em;
    width: fit-content;
}

summary::after {
    content: attr(data-closed);
}

details[open]>summary {
    max-width: fit-content;
}

details[open] summary::after {
    content: attr(data-open);
}


.noTouch summary:hover {
    /* filter:brightness(1.3); */
    background-color: rgb(var(--colUIText03));
    color: rgb(var(--colUIBack03));
    transition: 0.1s ease-in;
    transition-property: background-color, color;
}

details>p {
    margin-top: 0.25em;
    margin-bottom: 0.5em;
    padding: 0.5em 0.75em;
}

details:not(.legend__details)>p {
    border-radius: 0.5em;
    background: rgb(var(--colUIBack04));
}

*:focus:not(:focus-visible) {
    outline: none
}

*:focus-visible {
    outline: var(--focusOutline);
    outline-offset: 2px;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline-offset: -1px !important;
}

::-moz-selection {
    background: rgb(var(--colAccent01));
    color: #fff;
}

::selection {
    background: rgb(var(--colAccent01));
    color: #fff;
}

.noTouch *::-webkit-scrollbar {
    background: none;
    /* Safari and Chrome */
    width: 1em;
    height: 1em;
}

.noTouch *::-webkit-scrollbar-thumb {
    background: rgba(var(--colUIText03), 0.3);
    border: 0.35em solid transparent;
    background-clip: padding-box;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    z-index: -1;
}

.noTouch *::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--colUIText03), 0.5);
    background-clip: content-box;
    border: 0.3em solid transparent;
    cursor: grab;
}

*::-webkit-scrollbar-corner {
    background: none;
}

*::-webkit-resizer {
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 2em 2em;
    border-color: transparent transparent rgba(var(--colUIText03), 0.5) transparent;
}

*::-webkit-resizer:hover {
    border-color: transparent transparent rgba(var(--colAccent01), 1) transparent;
}

button {
    /* font-family: var(--fontFamily); */
    font-size: 1em;
    /* font-weight: 300; */
}

.logo_wrapper {
    margin: 2em 0 0 0;
}

.logo {
    width: 100%;
    height: fit-content;
    max-width: 32em;
    max-height: 8em;
    z-index: 1;
}

.headLine {
    --fontSizeMin: 1.5;
    font-size: calc(var(--fontSizeMin) * 1rem + ((var(--fontSizeMin) * 1.5) - var(--fontSizeMin)) * ((100vw - 20rem) / (120 - 20)));
}


#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: hsla(0, 0%, 0%, 0.8);
    color: white;
}

#loader>p {
    max-width: 30em;
}

.spinner {
    border: 0.25rem solid hsla(0, 0%, 0%, 0.8);
    border-top: 0.25rem solid rgb(var(--colAccent01));
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    animation: spin 1s linear infinite;
    margin-bottom: 1em;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (min-width: 64em) {
    header {
        flex-direction: row-reverse;
    }
}