@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/barlow-semi-condensed-v14-latin-300.eot");
    src: local(""), url("../fonts/barlow-semi-condensed-v14-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/barlow-semi-condensed-v14-latin-300.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-v14-latin-300.woff") format("woff"), url("../fonts/barlow-semi-condensed-v14-latin-300.ttf") format("truetype"), url("../fonts/barlow-semi-condensed-v14-latin-300.svg#BarlowSemiCondensed") format("svg")
}

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: italic;
    font-weight: 300;
    src: url("../fonts/barlow-semi-condensed-v14-latin-300italic.eot");
    src: local(""), url("../fonts/barlow-semi-condensed-v14-latin-300italic.eot?#iefix") format("embedded-opentype"), url("../fonts/barlow-semi-condensed-v14-latin-300italic.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-v14-latin-300italic.woff") format("woff"), url("../fonts/barlow-semi-condensed-v14-latin-300italic.ttf") format("truetype"), url("../fonts/barlow-semi-condensed-v14-latin-300italic.svg#BarlowSemiCondensed") format("svg")
}

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/barlow-semi-condensed-v14-latin-regular.eot");
    src: local(""), url("../fonts/barlow-semi-condensed-v14-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/barlow-semi-condensed-v14-latin-regular.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-v14-latin-regular.woff") format("woff"), url("../fonts/barlow-semi-condensed-v14-latin-regular.ttf") format("truetype"), url("../fonts/barlow-semi-condensed-v14-latin-regular.svg#BarlowSemiCondensed") format("svg")
}

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/barlow-semi-condensed-v14-latin-900.eot");
    src: local(""), url("../fonts/barlow-semi-condensed-v14-latin-900.eot?#iefix") format("embedded-opentype"), url("../fonts/barlow-semi-condensed-v14-latin-900.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-v14-latin-900.woff") format("woff"), url("../fonts/barlow-semi-condensed-v14-latin-900.ttf") format("truetype"), url("../fonts/barlow-semi-condensed-v14-latin-900.svg#BarlowSemiCondensed") format("svg")
}

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: italic;
    font-weight: 900;
    src: url("../fonts/barlow-semi-condensed-v14-latin-900italic.eot");
    src: local(""), url("../fonts/barlow-semi-condensed-v14-latin-900italic.eot?#iefix") format("embedded-opentype"), url("../fonts/barlow-semi-condensed-v14-latin-900italic.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-v14-latin-900italic.woff") format("woff"), url("../fonts/barlow-semi-condensed-v14-latin-900italic.ttf") format("truetype"), url("../fonts/barlow-semi-condensed-v14-latin-900italic.svg#BarlowSemiCondensed") format("svg")
}

html {
    scroll-behavior: smooth;
    color: #000
}

html {
    font-family: "Barlow", sans-serif;
    overflow-x: hidden
}

body {
    color: #000
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Barlow", sans-serif;
    color: #000
}

h1 .field--name-title {
    font-style: italic;
    font-weight: 900;
    margin-top: 3rem
}

.region-content h1 {
    margin-top: 3rem
}

.inline-block {
    display: inline-block
}

.infobox {
    background-color: #f1f2f6;
    margin-right: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #C6001F;
    color: #000
}

.infobox p {
    color: #000
}

.content-headline h2 {
    max-width: 50%;
    font-style: italic;
    font-weight: 900
}

h2 {
    font-style: italic;
    font-weight: 900
}

.white-bg {
    background-color: #f1f2f6;
    border-bottom: 1px solid #C6001F
}

.textbox-spacer {
    padding: 2rem
}

.textbox-spacer-no-top {
    padding: 0rem 2rem 2rem 2rem
}

.hero-background {
    background-color: #8E0016;
    color: #fff
}

.hero-background .region-herocontent h2,
.hero-background .region-herocontent h3,
.hero-background .region-herocontent p {
    color: #fff
}

.hero-background .region-herocontent h3 {
    font-size: 3rem
}

.hero-background .region-herocontent h2 {
    font-size: 3.5rem
}

p {
    color: #000
}

.text-formatted ol,
.text-formatted ul {
    font-weight: 700;
    font-style: italic
}

blockquote {
    background: rgb(198, 0, 31);
    background: linear-gradient(90deg, rgb(198, 0, 31) 0%, rgb(83, 0, 13) 100%)
}

blockquote p {
    font-style: italic;
    font-weight: 900;
    font-size: 2rem;
    color: #fff
}

.spacer-top-bottom {
    padding: 5rem 0
}

.spacer-top {
    padding-top: 5rem
}

.field--name-field-eingangstext {
    font-weight: 600
}

.button {
    border-radius: 1rem;
    color: #fff;
    background-color: #C6001F;
    text-transform: uppercase;
    font-weight: 500;
    border-color: #8E0016
}

.button:hover {
    background-color: #8E0016;
    border-color: #8E0016
}

.button img {
    max-width: 20px
}

.divider {
    width: 15%;
    max-width: 100px;
    height: 5px;
    background-color: #C6001F
}

.mobile-menu-icon img {
    fill: #f1f2f6;
    max-width: 40px
}

.hamburgermenu {
    fill: #f1f2f6
}

a,
a:focus,
a:hover {
    color: #C6001F
}

body {
    font-family: "Barlow", sans-serif !important;
    font-size: 1.2em;
    font-weight: 400;
    animation: bugfix infinite 1s;
    -webkit-animation: bugfix infinite 1s;
    background-color: #fff
}

body.user-logged-in {
    margin-top: 79px
}

hr {
    color: #f1f2f6;
    background-color: #C6001F
}

.front-title {
    border-bottom: 1px solid #f1f2f6;
    padding: 3rem
}

.front-title h3 {
    display: inline;
    font-weight: 900;
    font-style: italic
}

.hide {
    display: none !important
}

.top-bar {
    background: rgb(198, 0, 31);
    background: linear-gradient(180deg, rgb(198, 0, 31) 0%, rgb(142, 0, 22) 100%);
    box-shadow: -1px 3px 5px 0px #000
}

.top-bar .site-logo img {
    max-width: 300px
}

.top-bar.white {
    background-color: #fff;
    box-shadow: 0px 15px 14px #ccc
}

.top-bottom-spacer {
    padding: 3rem 0
}

.navcontainer-img {
    padding: 1em
}

.region-herocontent {
    padding-top: 10rem
}

.region-herocontent h2 {
    font-weight: 800
}

.topbar-center-logo .top-bar-center {
    flex: 1 0 auto
}

.teamimage img {
    width: 100% !important;
    height: auto
}

.newsbox,
.terminbox {
    padding: 1rem;
    transition: ease-in-out 0.5s;
    background-color: #f1f2f6
}

.newsbox .views-field-field-eingangstext,
.newsbox .views-field-title,
.terminbox .views-field-field-eingangstext,
.terminbox .views-field-title {
    padding: 1rem;
    transition: ease-in-out 0.5s
}

.newsbox:hover .views-field-field-eingangstext,
.newsbox:hover .views-field-title,
.terminbox:hover .views-field-field-eingangstext,
.terminbox:hover .views-field-title {
    background-color: #f1f2f6;
    padding: 1rem
}

.newsbox .views-field-title {
    width: 100%
}

.terminbox .views-field-title {
    width: 100%
}

@media screen and (max-width:39.9375em) {
    .topbar-center-logo .top-bar-center {
        display: none
    }
}

.topbar-center-logo-mobile .menu-icon {
    vertical-align: text-top
}

.off-canvas-wrapper {
    min-height: 100vh
}

.off-canvas-absolute {
    background-color: #8E0016
}

.position-left {
    width: 380px;
    transform: translateX(-380px)
}

.navcontainer ul.menu {
    margin: 0
}

.navcontainer ul.menu li {
    border-bottom: 1px solid #C6001F;
    width: 100%
}

.navcontainer ul.menu li a {
    color: #fff;
    font-weight: 700;
    font-size: 1.4em;
    font-style: italic
}

.navcontainer ul.menu li a.is-active {
    color: #fff
}

.navcontainer .region-offcanvasnav ul.menu li a {
    font-size: 1em;
    font-weight: 400
}

.textarea {
    padding: 0 2rem
}

.field--name-field-tabelle-ligaplatzierung a {
    color: #C6001F
}

.field--name-field-tabelle-ligaplatzierung a:hover {
    color: #8E0016
}

.table h3 {
    font-style: italic;
    font-weight: 700
}

h3.headliner {
    font-style: italic;
    font-weight: 700;
    font-size: 2.6rem
}

.views-field-title a {
    font-style: italic;
    font-weight: 900;
    font-size: 2rem;
    padding-bottom: 2rem
}

.field--name-field-spielerbild img {
    width: 100%
}

.views-field-field-eingangstext {
    border-bottom: 1px solid #f1f2f6;
    padding: 1rem 0
}

.views-field-field-mitgliedsfoto {
    margin-top: 3rem
}

.field--name-field-datum time {
    font-size: 1.8rem;
    font-style: italic;
    color: #000;
    font-weight: 700
}

.button.field--name-field-link-zum-abteilungsvorstan a {
    color: #f1f2f6
}

.view>.view-header {
    background-color: #f1f2f6;
    padding: 2rem;
    margin: 5rem 0;
    border-bottom: 1px solid #C6001F
}

.view>.view-header h2 {
    display: block;
    width: 100%
}

.views-field-field-name {
    color: #C6001F;
    text-transform: uppercase;
    font-weight: 700;
    font-style: italic;
    padding: 1rem 1rem 0rem 1rem;
    font-size: 2rem
}

.views-field-field-vorname {
    color: #C6001F;
    text-transform: uppercase;
    font-weight: 300;
    font-style: italic;
    padding: 0rem 1rem 0rem 1rem;
    font-size: 1rem
}

.views-field-field-aufgabe-job {
    padding: 0 1rem 1rem 1rem;
    font-style: italic
}

.views-field-field-zusatzinfo {
    padding: 0 1rem;
    font-weight: 700;
    font-style: italic
}

.views-field-field-eingangstext .field-content {
    min-height: 108px;
    max-height: 108px;
    color: #000
}

.views-field-field-eingangstext .field-content a {
    color: #000
}

.view-content .views-field-created,
.view-content .views-field-field-tags {
    display: inline;
    color: #000;
    margin-right: 15px;
    padding-left: 1rem
}

.view-content .views-field-field-tags .field-content {
    width: 50%;
    display: inline;
    font-weight: 600;
    font-style: italic
}

.terminbox {
    background-color: #C6001F;
    padding: 2rem
}

.views-field-field-datum .field-content {
    font-size: 2rem
}

.views-field-field-datum .field-content time {
    color: #000;
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 700
}

.view-mannschaften-fussball .views-field-title .field-content {
    background-color: #8E0016;
    color: #f1f2f6;
    padding: 1rem
}

.view-mannschaften-fussball .views-field-title a {
    color: #f1f2f6
}

.view-jugend-fussball ul,
.view-jugend-tennis ul {
    list-style: none;
    margin: 0
}

.view-jugend-fussball ul li,
.view-jugend-tennis ul li {
    margin: 0;
    padding: 1rem
}

.view-jugend-fussball ul li a,
.view-jugend-tennis ul li a {
    display: block;
    font-weight: 400;
    padding: 0;
    font-size: 1.4em
}

.view-jugend-fussball ul li:nth-child(odd),
.view-jugend-tennis ul li:nth-child(odd) {
    background-color: #f1f2f6
}

.view-jugend-fussball ul li:nth-child(2n),
.view-jugend-tennis ul li:nth-child(2n) {
    background-color: #dcdde1
}

.view-termine-veranstaltungen .grid-x .boxes {
    padding: 2rem
}

.view-termine-veranstaltungen .grid-x .cell {
    padding: 0 1rem;
    border: 1px solid #f5f6fa;
    min-height: 200px
}

.view-termine-veranstaltungen .grid-x .boxes .views-field-field-datum {
    padding: 1rem;
    background-color: #C6001F
}

.view-termine-veranstaltungen .grid-x .boxes .view-field-field-tags {
    margin-top: 2rem
}

.view-termine-veranstaltungen .grid-x .boxes .views-field-title {
    background-color: #f1f2f6;
    padding: 1rem;
    min-height: 200px
}

.view-termine-veranstaltungen .grid-x .boxes .views-field-field-datum .field-content time {
    color: #f1f2f6
}

.view-termine-veranstaltungen .view-header .grid-x {
    border-bottom: none
}

.views-element-container {
    padding-bottom: 3rem
}

.views-element-container .item-list ul,
.views-element-container .item-list ul li {
    list-style: none;
    margin: 0
}

.views-element-container .item-list ul li .views-field-title a {
    font-size: 1.2em
}

.views-field-field-eingangsbild img {
    width: 100%;
    height: auto
}

.views-table tbody tr:nth-child(2n) {
    background-color: #C6001F;
    color: #f1f2f6
}

.views-table tbody {
    background-color: #8E0016;
    color: #f1f2f6
}

.path-mitglied-werden .views-field-title {
    background-color: #f5f6fa;
    margin: 2rem;
    padding: 2rem;
    height: 130px;
    border-bottom: 1px solid #C6001F
}

.path-mitglied-werden .views-field-title a {
    font-size: 1.1em;
    font-weight: 500
}

.card-title>div {
    font-style: italic;
    font-weight: 600;
    padding: 0rem 2rem
}

.card-title .field--name-field-nachname {
    color: #C6001F;
    font-size: 1.5em;
    font-weight: 800
}

.card-icon {
    padding: 0 0 2rem 2rem
}

.card-icon .field--name-field-zusatzinfo {
    color: #f1f2f6;
    display: inline-block;
    text-align: center;
    background-color: #8E0016;
    padding: 3px 6px
}

.card.hover-grow {
    display: flex
}

.field--name-field-e-mail-adresse {
    font-size: 0.6em;
    color: #8E0016
}

.callout {
    background-color: #f1f2f6
}

.hover-grow {
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition-duration: 0.3s;
    transition-property: transform
}

.hover-grow:active,
.hover-grow:focus,
.hover-grow:hover {
    transform: scale(1.1)
}

@keyframes bugfix {
    0% {
        padding: 0
    }
    to {
        padding: 0
    }
}

.article-with-image .field--type-image img {
    width: 100%
}

footer {
    background-color: #8E0016;
    color: #f1f2f6
}

footer a {
    color: #f1f2f6
}

footer h2 {
    color: #f1f2f6;
    margin-top: 1rem
}

footer a:hover {
    font-style: italic;
    color: #f1f2f6
}

footer ul.menu {
    margin-left: 0
}

footer .menu li {
    display: block;
    width: 100%
}

footer .menu li a {
    color: #f1f2f6;
    padding: 0.7rem 0
}

@media screen and (min-width:400px) and (max-width:996px) {
    footer h2 {
        text-align: center
    }
    footer .menu li a {
        padding: 0.75rem 2rem;
        text-align: center
    }
}

@media screen and (max-width:39.9375em) {
    .top-bar-right .button {
        margin: 1rem 0;
        display: block
    }
    body,
    html {
        overflow-x: hidden
    }
}

@media screen and (min-width:40em) {
    .field--name-field-cards > .field__item,
    .field--name-field-trainergruppe > .field__item,
    .field--name-field-trainerkarte > .field__item,
    .field--name-field-teammitglieder > .field__item {
        width: 48%;
        display: inline-block
    }
    .field--name-field-abteilungsbeirat > .field__items > .field__item,
    .field--name-field-abteilungsleitung > .field__items > .field__item,
    .field--name-field-jugendtrainer > .field__items > .field__item,
    .field--name-field-jugendwarte > .field__items > .field__item,
    .field--name-field-seniorentrainer > .field__items > .field__item,
    .field--name-field-sportwarte > .field__items > .field__item,
    .field--name-field-stellvertrendeleitung > .field__items > .field__item,
    .field--name-field-trainer-allgemein > .field__items > .field__item,
    .field--name-field-trainergruppe > .field__items > .field__item,
    .field--name-field-trainerkarte > .field__items > .field__item,
    .field--name-field-teammitglieder > .field__items > .field__item,
    .field--name-field-vorstandsmitglieder > .field__items > .field__item {
        width: 48%;
        display: inline-block
    }
    .newsbox {
        width: calc(33.3333333% - 1.9999rem) !important;
        padding: 0rem;
        margin: 1rem
    }
}

@media screen and (min-width:40em) and (max-width:63.9375em) {
    .field--name-field-cards > .field__item,
    .field--name-field-trainergruppe > .field__item,
    .field--name-field-trainerkarte > .field__item,
    .field--name-field-teammitglieder > .field__item {
        width: 32%;
        display: inline-block
    }
    .field--name-field-abteilungsbeirat > .field__items > .field__item,
    .field--name-field-abteilungsleitung > .field__items > .field__item,
    .field--name-field-jugendtrainer > .field__items > .field__item,
    .field--name-field-jugendwarte > .field__items > .field__item,
    .field--name-field-seniorentrainer > .field__items > .field__item,
    .field--name-field-sportwarte > .field__items > .field__item,
    .field--name-field-stellvertrendeleitung > .field__items > .field__item,
    .field--name-field-trainer-allgemein > .field__items > .field__item,
    .field--name-field-trainergruppe > .field__items > .field__item,
    .field--name-field-trainerkarte > .field__items > .field__item,
    .field--name-field-teammitglieder > .field__items > .field__item,
    .field--name-field-vorstandsmitglieder > .field__items > .field__item {
        width: 32%;
        display: inline-block
    }
}

@media screen and (min-width:64em) {
    .grid-container {
        max-width: 95rem
    }
    .field--name-field-cards > .field__item,
    .field--name-field-trainergruppe > .field__item,
    .field--name-field-trainerkarte > .field__item,
    .field--name-field-teammitglieder > .field__item {
        width: 250px;
        display: inline-block
    }
    .field--name-field-abteilungsbeirat > .field__items > .field__item,
    .field--name-field-abteilungsleitung > .field__items > .field__item,
    .field--name-field-jugendtrainer > .field__items > .field__item,
    .field--name-field-jugendwarte > .field__items > .field__item,
    .field--name-field-seniorentrainer > .field__items > .field__item,
    .field--name-field-sportwarte > .field__items > .field__item,
    .field--name-field-stellvertrendeleitung > .field__items > .field__item,
    .field--name-field-trainer-allgemein > .field__items > .field__item,
    .field--name-field-trainergruppe > .field__items > .field__item,
    .field--name-field-trainerkarte > .field__items > .field__item,
    .field--name-field-teammitglieder > .field__items > .field__item,
    .field--name-field-vorstandsmitglieder > .field__items > .field__item {
        width: 300px;
        display: inline-block
    }
    .teamimage .field__item img {
        padding-right: 1rem
    }
    .newsbox {
        width: calc(33.3333333% - 1.9999rem) !important;
        padding: 0rem;
        margin: 1rem
    }
}