html {
    --background-color: #008dc3;
    --on-background-color: white;

    --link-color: #fff;

    --selection-color: blue;
    --on-selection-color: white;
    --scrollbar-track: var(--footer-bg);
    --scrollbar-handle: white;
    --scrollbar-hanlde-hover: var(--background-color);
    --site-max-width: 75rem;
    --burger-menu-breakpoint: 50rem;
    --member-color: #fff;
    --member-hover-color: var(--secondary-color, #000);
    --text-color: var(--on-background-color);
    --font-size: 1rem;

    --header-color: #008dc3;
    --header-color-desktop: transparent;
    --footer-bg: #004c6c;
    --textfield-bg: var(--header-color);
    --primary-color: #ff58aa;
    --secondary-color: #ed008a;
    --color-turquoise: white;
    --text-color: white;
    --text-shadow: -1px -1px 18px #00000042, -1px -1px 2px #0000003d, 1px 1px 2px #0000003d;
    background-image: none;
    position: relative;
    overflow-x: hidden;

    --sidebar-color: light-dark(#f1f4f9, #1c2024);
    --md-primary-container: light-dark(#c7e7ff, #004c6c);
    --md-on-primary-container: light-dark(#001e2e, #c7e7ff);
}

html::before,
.app::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    top: -10px;
    left: -5px;
    bottom: 0;
    z-index: -1;
    background-image: url(/imgs/ss24/water.webp);
    background-size: 100% auto;
    background-repeat: repeat-y;
}

@media screen and (min-width: 600px) {

    html::before,
    .app::before {
        background-image: url(/imgs/ss24/water_rectangle.webp);
    }
}

@media screen and (prefers-reduced-motion: no-preference) {

    html::before,
    .app::before {
        filter: url(#waves);
    }
}

@-moz-document url-prefix() {

    html::before,
    .app::before {
        filter: none;
    }
}

.info_left .info_content {
    padding: 0;
}

h1.title,
h2,
h3,
#wer .member-name {
    font-family: "Sunny-Spells";
    font-weight: normal;
    letter-spacing: 2pt;
    text-shadow: var(--text-shadow);
}

::selection {
    background-color: #ffffff;
    color: black;
    text-shadow: none;
}

.active-link,
a:hover {
    color: var(--primary-color);
}

.centercontent a,
.contentbox a,
.datetext a,
.link {
    background-image: linear-gradient(var(--primary-color), var(--primary-color));
    background-size: 100% 10%;
    background-position: 100% 100%;
    background-repeat: no-repeat, no-repeat;
    transition: background-size ease-out 0.1s;
}

.centercontent a:hover,
.contentbox a:hover,
.datetext a:hover,
.link:hover {
    color: white;
    background-size: 100% 100%;
}

.headermenu a,
.footer-wrapper .info_content a,
.info_left a h3 {
    background-image: linear-gradient(var(--primary-color), var(--primary-color));
    background-size: 100% 0%;
    background-position: 100% 100%;
    background-repeat: no-repeat, no-repeat;
    transition: background-size ease-out 0.1s;
}

.headermenu a:hover,
.footer-wrapper .info_content a:hover,
.info_left a:hover h3 {
    color: white;
    background-size: 100% 10%;
}

.headermenu a:focus-visible,
.footer-wrapper .info_content a:focus-visible,
.info_left a:focus-visible h3 {
    background-size: 100%;
}

.info_left a h3 {
    margin-inline: auto;
    width: fit-content;
}

.centercontent {

    #dates a,
    .programmimg a,
    .member-pictures a {
        background-image: none;
    }
}

a.event-archive-year-link.active-link {
    background-image: none;
    background-color: var(--primary-color);
    border-radius: .5rem;
    color: var(--on-primary-color);
}

.maincontainer2 {
    line-height: 1.5;
}

#wer .member-name {
    width: initial;
    color: white;
}

.infobox_left .info_content {
    backdrop-filter: blur(0.8rem);
    height: fit-content;
}

.info_content {
    backdrop-filter: none;
    transition:
        opacity ease-in-out 0.4s,
        color ease-in-out 0.4s;
}

.info_content:hover {
    opacity: 1;
    color: white;
}

.dates,
.welcometext,
.kurse,
.text,
.contentbox,
.table-wrapper {
    text-shadow: var(--text-shadow);
}

.kursanmeldung:not(.disabled),
.sendbutton,
.opening_hours_center button,
.button,
button[type="submit"] {
    --button-color: var(--primary-color);
    --shadow-color: var(--secondary-color);
    padding-inline: 2rem;
    border-radius: 2rem;
    background-color: var(--button-color);
    box-shadow:
        var(--shadow-color) 0 0.5em,
        var(--shadow-color) 0 0.3rem;
    transition: .1s all ease-out;
    margin-bottom: .5rem;
    margin-top: .3rem;
    padding-block: .44rem;
    display: inline-block;
}

.opening_hours_center button {
    margin-top: 0;

    h2 {
        line-height: 1.5;
    }
}

.submit-button {
    font-family: "Sunny-Spells";
}

.kursanmeldung:not(.disabled):hover,
.sendbutton:not(:disabled):hover,
.opening_hours_center button:hover,
.button:not(:disabled):hover {
    color: var(--on-primary-color);
    translate: 0 -.2rem;
    box-shadow:
        var(--shadow-color) 0 calc(0.5em + .2rem),
        var(--shadow-color) 0 0.5rem;
}

button:disabled,
.button.disabled {
    --button-color: #818181;
    --shadow-color: #3c3c3c;
}

.kursanmeldung:not(.disabled):active,
.sendbutton:active,
.opening_hours_center button:active,
.button:active {
    color: var(--on-primary-color);
    translate: 0 .2rem;
    box-shadow:
        var(--shadow-color) 0 calc(0.5em - .2rem),
        var(--shadow-color) 0 0.1rem;
}

.opening_hours_center.opening_hours_center_open button {
    box-shadow: unset;
}

.sendbutton {
    font-size: 1.3rem;
    padding: 0.3rem;
}

.textfield {
    background-color: var(--background-color);
    border: solid thin var(--on-background-color);
    font-size: 1rem;
    color: var(--on-background-color);
    padding: .5rem;
}

::placeholder {
    color: var(--on-background-color);
}

@font-face {
    font-family: "Sunny-Spells";
    font-display: swap;
    src:
        local("Sunny Spells"),
        url("/styles/fonts/Sunny-Spells.woff2") format("woff2");
    size-adjust: 140%;
    descent-override: 0%;
}

.opening_hours_center {
    background-color: var(--secondary-color);
    border-radius: 2rem;
    padding: 0;
    margin-bottom: 1rem;

    h2 {
        background-color: var(--primary-color);
        border-radius: 2rem;
        margin: 0;
    }

    button {
        padding: 0;
    }

    button::after {
        top: 9px;
        text-shadow: var(--text-shadow);
    }

    .info_content {
        padding: 0 2rem;
    }
}

h2 svg,
h3 svg {
    filter: drop-shadow(-1px -1px 15px #00000052) drop-shadow(1px 1px 1px #00000052);
}

.dates .datelinkics {
    filter: invert(1) drop-shadow(-1px -1px 15px #00000052) drop-shadow(1px 1px 1px #00000052);
}

.dates .datelinkics:hover,
.dates .datelinkedit:hover {
    filter: invert(12%) sepia(98%) saturate(6668%) hue-rotate(318deg) brightness(95%) contrast(101%) drop-shadow(-1px -1px 15px #00000052) drop-shadow(1px 1px 1px #00000052);
}

.swimming {
    animation: swimming 30s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.floatie-monster {
    padding: 1rem 2rem;
}

@keyframes swimming {
    5% {
        translate: 0 -15px;
    }

    20% {
        translate: 0 6px;
        rotate: 1deg;
    }

    30% {
        translate: 0 -10px;
    }

    50% {
        translate: 0 3px;
        rotate: -1deg;
    }

    60% {
        translate: -1px -7px;
    }

    80% {
        translate: 1px 8px;
        rotate: 0;
    }
}

.bubble-wrapper {
    position: fixed;
    height: 800px;
    pointer-events: none;
    z-index: 10;
    --bubble-unit: 8px;
}

.bubble-wrapper.paused .bubble {
    animation: none;
}

.bubble {
    position: absolute;
    top: 53%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    opacity: 0;
}

.bubble.small {
    width: 10px;
    height: 10px;
    top: 53%;
    left: 50%;
    animation: flow-s 2s linear none;
}

.bubble.small-l {
    width: 10px;
    height: 10px;
    top: 53%;
    left: 43%;
    animation: flow-s-l 0.9s linear none;
}

.bubble.s-medium {
    width: 20px;
    height: 20px;
    top: 53%;
    left: 43%;
    animation: flow-s 1.3s linear none;
}

.bubble.medium {
    width: 25px;
    height: 25px;
    top: 53%;
    left: 45%;
    animation: flow-m 0.8s linear none;
}

.bubble.large {
    width: 5px;
    height: 5px;
    left: 57%;
    top: 53%;
    animation: flow-l 0.7s linear none;
}

@keyframes flow-l {
    0% {
        translate: 0 0;
        opacity: 0;
    }

    25% {
        translate: calc(var(--bubble-unit) * 0.5) calc(var(--bubble-unit) * -4);
        opacity: 1;
    }

    50% {
        transform: translateX(calc(var(--bubble-unit) * 1));
    }

    75% {
        transform: translateX(calc(var(--bubble-unit) * 0.5));
        opacity: 1;
    }

    100% {
        translate: 0 calc(var(--bubble-unit) * -21);
        opacity: 0;
    }
}

@keyframes flow-s {
    0% {
        opacity: 0;
    }

    25% {
        translate: calc(var(--bubble-unit) * 0.3) calc(var(--bubble-unit) * -4);
        opacity: 1;
    }

    50% {
        translate: calc(var(--bubble-unit) * 0.5) calc(var(--bubble-unit) * -8);
    }

    75% {
        translate: calc(var(--bubble-unit) * 0.3) calc(var(--bubble-unit) * -12);
        opacity: 1;
    }

    100% {
        translate: 0 calc(var(--bubble-unit) * -16);
        opacity: 0;
    }
}

@keyframes flow-m {
    0% {
        opacity: 0;
    }

    25% {
        translate: calc(var(--bubble-unit) * 0.5) calc(var(--bubble-unit) * -5);
        opacity: 1;
    }

    50% {
        translate: 0 calc(var(--bubble-unit) * -10);
    }

    75% {
        translate: calc(var(--bubble-unit) * -0.5) calc(var(--bubble-unit) * -15);
        opacity: 1;
    }

    100% {
        translate: 0 calc(var(--bubble-unit) * -20);
        opacity: 0;
    }
}

@keyframes flow-s-l {
    0% {
        opacity: 0;
    }

    25% {
        translate: calc(var(--bubble-unit) * 0.3) calc(var(--bubble-unit) * -5);
        opacity: 1;
    }

    50% {
        translate: calc(var(--bubble-unit) * 0.5) calc(var(--bubble-unit) * -10);
    }

    75% {
        translate: calc(var(--bubble-unit) * 0.3) calc(var(--bubble-unit) * -15);
        opacity: 1;
    }

    100% {
        translate: 0 calc(var(--bubble-unit) * -20);
        opacity: 0;
    }
}

grid.grid-2,
.grid.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.body-home .grid-2 {
    padding-top: 1rem;
}

@media (min-width: 760px) {
    .table-wrapper tr:hover {
        background-color: var(--background-color);
    }
}

.summer-festival {
    background-color: #a7c091;
    position: relative;
    overflow: hidden;

    .dates {
        text-shadow: none;
        color: #3b4e2c;
        --link-color: #3b4e2c;
    }

    .datetitle,
    .datename svg {
        color: #ed008a;
        font-weight: bold;
    }

    .datename svg {
        filter: none;
    }

    .dates:nth-child(2) .datetext p:first-child {
        display: none;
    }

    &::before {
        content: "";
        background-image: url("/imgs/ss24/leave.svg");
        filter: brightness(0.3);
        opacity: 0.08;
        display: block;
        position: absolute;
        background-repeat: no-repeat;
        aspect-ratio: 1;
        width: 70%;
        left: 60%;
        top: 30%;
    }
}

@media (max-width: 500px) {
    .summer-festival {
        .dates:first-child {
            .dateimage {
                width: 100%;
                max-width: 400px;
            }

            img {
                width: 100%;
            }
        }

        .dates:nth-child(2) .dateimage {
            display: none;
        }

        &::before {
            left: 50%;
            width: 300px;
            top: 800px;
        }
    }
}

.headertitle {
    display: none;
}

@media (max-width: 600px) {
    .headermenu a:hover {
        color: var(--primary-color);
    }
}

.ss24-deco {
    display: inherit;
}