:root {
    --color_lila: #68405e;
    --color_lila_light: #c7a5be;
    --color_ticker_inactive_bg: #e0e0e0;
    --color_ticker_inactive: #808080;
    --bg_portrait: url('images/bg7_portrait.png');  
    --bg_landscape: url('images/bg7_landscape.png');
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.frames {
    margin: 0pt;
    padding: 0pt;
    vertical-align: top;
    border-width: 0pt;
    text-decoration: none;
}

.header {
    padding: 1vh;
    color: var(--color_lila);
    font-size: 2em;
    text-align: center;
    font-weight: bold;
    margin-left: 100px;
    text-shadow: 2px 2px 4px #FFFFFF;
}

.headerburger {
    padding: 1vh;
    text-decoration: none;
    font-size: 2vh;
    float: left;
    color: white;
}

.headerarea {
    padding: 1px;
    margin: 1px;
    border: none;
}

.topnav {
    overflow: hidden;
    background-color: var(--color_lila);
    position: relative;
    margin-left: 10vh;
}

.ticker {
    background-color: var(--color_lila_light);
    font-style: italic;
}

.ticker_head {
    color: var(--color_ticker_inactive);
    background-color: var(--color_ticker_inactive_bg);
    font-style: italic;
}

.ticker_body {
    color: var(--color_ticker_inactive);
}

table, tr, td, a, span {
    border-collapse: collapse;
}

.index_content {
    padding: 1vh;
}

.topnav #myLinks, myLinks2 {
    display: none;
}

.items, .navitemselected {
    padding: 1vh 1vh;
    text-decoration: none;
    font-size: 2vh;
    float: left;
    padding-right: 1vh;
    border-left: 1px solid var(--color_lila_light);
    border-top: 1px solid var(--color_lila_light);
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-collapse: collapse;
}

.navitemselected {
    background-color: var(--color_lila_light);
    color: black;
    font-weight: bold;
}

.items {
    color: white;
}

.popupmenu {
    min-width: 32vw;
    text-align: center;
}

.fullcell {
    display: block;
    height: 100%;
    width: 100%;
}

.topline {
    background-color: var(--color_lila);
}

/* botton-style links*/
.topnav a:hover, .footer a:hover {
    background-color: var(--color_lila_light);
    color: black;
}

/* ordinary links */
a.link:link, a.link:active {
    color: var(--color_lila);
    text-decoration: underline;
}

a.link:visited {
    color: #777777;
    text-decoration: underline;
}

a.link:hover, a.link:focus {
    color: #000000;
    background-color: var(--color_lila_light);
    text-decoration: underline;
}
.topnav a.icon {
    padding: 1vh;
    font-size: 2vh;
    color: white;
    background: black;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.footerlink, .footerlink_selected {
    text-align: center;
    float: right;
    padding: 1vh;
    text-decoration: none;
    font-size: 2vh;
    /*mix-blend-mode: difference;*/
    border-left: 1px solid var(--color_lila_light);
    border-top: 1px solid var(--color_lila_light);
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-collapse: collapse;
}

.footerlink {
    color: white;
    background-color: var(--color_lila);
}

.footerlink_selected {
    color: black;
    background-color: var(--color_lila_light);
}

.main {
    margin-bottom: 5vh;
}

@media screen and (max-width: 80vh) {
    /* Portrait styles */
    .bgpic {
        background-image: var(--bg_portrait);
        background-repeat: no-repeat;
        background-attachment: fixed;
        /*        background-size: 100% 100%; */
        background-size: cover;
    }

    .bgcolor {
        background-color: #fcfcfc;
    }

    .burger {
        display: initial;
    }

    .menu {
        display: none;
        position: absolute;
        right: 1vh;
    }

    .ttscicon {
        width: auto;
        height: 3.8vh; /*29px; */
    }
}

@media screen and (min-width: 80vh) {
    /* Landscape styles */
    .bgpic {
        background-image: var(--bg_landscape);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }

    .bgcolor {
        background-color: #fcfcfc;
    }

    .burger {
        display: none;
    }

    .menu {
        display: initial;
    }

    .ttscicon {
        width: auto;
        height: 10vh; /*90px; */
    }
}

.img-jugend {
    width: 100%;
    height: auto;
    max-width: 600px;
    float: right;
    margin: 10pt;
    margin-right: 0pt;
}

.img-news {
    width: auto;
    max-height: 300px;
    max-width: 100%;
    margin: 5pt;
    margin-left: 0pt;
    margin-bottom: 0pt;
}

.img-halle {
    width: 100%; 
    max-width: 360px;
    height: auto;
    float: left; 
    margin: 0pt; 
    margin-right: 10pt;
}

.img-ttball {
    width: 153px;
    height: 160px;
    float: left;
    margin: 0pt;
    margin-right: 10pt;
}

/* für das wappen */

@keyframes moveGradient1l {
    0%, 100% {
        stop-color: #c7a5be;
    }

    50% {
        stop-color: #68405e;
    }
}

@keyframes moveGradient2l {
    0%, 100% {
        stop-color: #68405e;
    }

    50% {
        stop-color: #c7a5be;
    }
}

.stop1l {
    animation: moveGradient1l 4s linear infinite;
}

.stop2l {
    animation: moveGradient2l 4s linear infinite;
}

@keyframes moveGradient1r {
    0%, 100% {
        stop-color: #777777;
    }

    50% {
        stop-color: #000000;
    }
}

@keyframes moveGradient2r {
    0%, 100% {
        stop-color: #000000;
    }

    50% {
        stop-color: #777777;
    }
}

.stop1r {
    animation: moveGradient1r 4s linear infinite;
}

.stop2r {
    animation: moveGradient2r 4s linear infinite;
}

.logo_header_text {
    text-decoration: none;
    font-family: Verdana;
    font-weight: bold;
    font-size: 0.7em;
}

.logo_banner_text {
    text-decoration: none;
    font-family: Verdana;
    font-size: 1em;
}

.logo_banner_text_small {
    text-decoration: none;
    font-family: Verdana;
    font-size: 0.5em;
}