/* Basis-Farbwerte*/
:root {
  --primary-color: #02468d;
  --secondary-color: #b1b3b3;
  --tertiary-color: #ef6e00;
  --text-color: #ffffff;
}
.jr-blau {background: var(--primary-color) !important;}
.jr-blau-schrift {color: var(--primary-color) !important;}
a {color: var(--primary-color);}
.jr-orange {background: var(--tertiary-color) !important;}
.grau {background: var(--secondary-color);}
.jr-blau-btn, .btn {color: white; background-color: var(--primary-color);}
.jr-blau-btn:hover, .btn:hover {color: white; background-color: var(--tertiary-color);}
.btn-inv {color: white; background-color: var(--tertiary-color);}
.btn-inv:hover {color: white; background-color: var(--primary-color);}

.page-header h1 {color: var(--primary-color) !important;}
.page-header h1 {font-size: clamp(1.5em, 3.2vw, 2.2em);}
.page-header h2 {font-size: clamp(1.5em, 3.2vw, 2.2em);}

[id] {scroll-margin-top: 65px;}
.ueberschrift {color: var(--primary-color) !important; border-block: 3px var(--secondary-color) solid;font-weight: 700;}
h3.ueberschrift {margin: 5rem auto 3rem auto;font-size: clamp(1.5em, 3.2vw, 2.5em);}
h5.ueberschrift {font-size: clamp(1.2em, 2.2vw, 1.5em);}
.divider {height: 3px;}
.seitenueberschrift {font-weight: 700;font-style: italic;color: var(--primary-color) !important;}
h1.seitenueberschrift {font-size: clamp(2em, 3.8vw, 3.75em);}
h2.seitenueberschrift {font-size: clamp(1.5em, 3.2vw, 2.5em);}
.bold {font-weight: 700;}
.marginbottom {margin-bottom: 1rem;}
.cardabstand  {margin: .5rem 0 1rem 0;}

body {font-family: 'Roboto', sans-serif;}
main {background: white;}


.keinabstand {padding: 0; margin: 0;}
.abstandoben1 {margin-top: 2rem;}

.mod-articles-item {margin-bottom: 0.8rem;}
/** pagenavigation **/
.previous {float: left; margin: 5px;}
.previous a {color:white;} 
.next {float: left; margin: 5px;} 
.next a {color: white;}
.pagenav {height: 30px;}
.pagenavigationbuttons { max-width:80px}
/** pagebreak **/
.pager ul li {display: inline-block; border-radius: 2px; font-size: 1.2rem; line-height: 30px; padding: 0 10px; text-align: center;}
.pager ul li {padding: 0;}
.pager ul li.hidden-phone { padding: 0;}
.pager ul li a.pagenav span.icon-next i, .pager ul li a.pagenav span.icon-previous i {color: rgba(0, 0, 0, 0.87);font-size: 2.2rem; vertical-align: middle;}
.pager ul li a.pagenav {color: rgba(0, 0, 0, 0.87);}
.pager ul li.active { background-color: var(--akzentfarbe,#0277bd); color: white; vertical-align: middle;}
.pager ul li.active a { color: white; }
/** pagination **/
.pagination li .page-link span, .pagination li.active span, .pagination li .page-link a, .pagination li.active a {padding: 0 10px;}
.pagination li .page-link .pagination-icon1, .pagination li a.pagination-icon1, .pagination li .page-link .pagination-icon2, .pagination li a.pagination-icon2, .page-item.hidden-phone.waves-effect.paginationwaves.page-item1 {padding: 0;}
.pagination li.active span, .pagination li.active a {color:white; background-color: var(--primary-color);display: inline-block;font-size: 1.2rem;line-height: 30px;}
.pagination .page-item span, .pagination .page-item a {font-size: 1.2rem;line-height: 30px;}
.pagination li.disabled {cursor: default;color: #999 !important;}
.pagination-list .active {vertical-align: middle;}
.padding-content {padding-bottom: 5px;}
.pagination-list li {padding: 0px;}
.paginationwaves {cursor:auto;}


/** navbar dropdown menu **/
#headerstreifen  {height: 1.5rem;}
#header {z-index: 100;}
.navbar-fixed {height: 56px;}
#headernavigation .nav-item.deeper.parent:hover {background-color: rgba(0,0,0,0.1);}
.headercontentabstand {height: 50px;}
.navigationsmenue { margin: 0; padding: 0; top:0px; left:0px;}/** dolphin mobile darstellungsfehler abstand**/
.container-navbar { margin: 0 auto;  max-width: 1280px;  width: 90%; }
@media only screen and (min-width : 993px) {.container-navbar { margin: 0 auto;  max-width: 1480px;  width: 90%; }}
@media only screen and (orientation: landscape) and (min-width: 993px) and (max-width: 1024px) { div.container.inhalt { width: 80%;} .container-navbar { width: 95%; }}
.dropdown .nav ul li:hover, nav ul li.active { background-color: var(--akzentfarbe-transparent, rgba(2,119,189,0.9));}
nav {color: #fff; height: 56px; line-height: 56px; width: 100%;}
nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i, nav a.button-collapse, nav a.button-collapse i {height: 56px; line-height: 56px;}
nav .sidenav-trigger i.material-icons {font-size: 2.7rem; height: 56px; line-height: 56px;}
nav #headernavigation ul li.active, nav #headernavigation .deeper.parent {height: 56px; line-height: 56px;}
.dropdown i {margin-left: 1px;}
nav ul a, nav ul span.nav-header { padding: 0 10px !important; display: block;}
.dropdown li { display: inline-block; position: relative; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; color: #fff;}
.dropdown li ul { padding: 0; position: absolute; top: 56px; left: 0; background-color: var(--akzentfarbe-transparent, rgba(2,119,189,0.9)); width: 185px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.4),0 2px 10px 0 rgba(0,0,0,0.3);}
.dropdown li ul li { width: 185px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; line-height: 35px; display: block;   color: #fff;}
.dropdown li ul li:hover { background-color: rgba(0, 0, 0, 0.1); width: 185px;}
.dropdown li ul li.active { width: 185px; height: 35px; line-height: 35px;}
.dropdown li ul li a { width: 185px; height: 35px; line-height: 35px;}
.dropdown li ul li a:hover { width: 185px; height: 35px; line-height: 35px;}
.dropdown li ul li.current.active, .dropdown li ul li.current.active a:hover {height: 35px !important; line-height: 35px !important;}
.dropdown li:hover ul {display: block;opacity: 1;visibility: visible;}
/** mobilecollapse sidebar dropdown menu **/
.sidenav .collapsible-header, .sidenav .collapsible-body {background-color: inherit; border-bottom: inherit; height: inherit; padding: inherit; line-height: inherit; margin: 0px !important;}
.sidenav {width: 240px;}
.sidenav li > a, .sidenav li > span.nav-header {color:rgba(0,0,0,0.87);font-weight:500;display: block;}
.collapsible {border: none;}
.sidenav a, .sidenav span.nav-header { height: 48px !important; line-height: 48px !important; }
.sidenav li { padding: 0px; }
.sidenav .collapsible-body li.active a, .sidenav .collapsible-body li.active span.nav-header { color: #fff; background-color: var(--primary-color);}
.sidenav li.active a, .sidenav li.active span.nav-header { color: #fff;}
.sidenav li.active {background-color: var(--primary-color);}
.sidenav li:hover { color: #fff; background-color: var(--primary-color);}
.sidenav li a:hover, .sidenav li span.nav-header:hover { color: #fff; background-color: var(--primary-color);}
.sidenav .innen li a:hover { color: #fff; background-color: var(--primary-color);}
.sidenav .collapsible-body li a, .collapsible-body li a, .sidenav .collapsible-body li span.nav-header, .collapsible-body li span.nav-header { font-weight: normal !important; color: #444; background-color: rgba(255, 255, 255, 1);}
.trennlinie { padding: 0px !important; margin: 0px !important;}
.parent img { float: right; margin-top: 18px; width: 20px; height: 100%;}
.image-title { float: left;}
#mobile-demo .parent img { display: none;}
.sidenav-overlay {z-index: 90 !important;}
/** navbar search **/
.navsearch {display: none; position:fixed; top:56px; float: right !important; right: 5%; width: 20%; z-index: 500;}
.searchlupebtn, .searchlupebtn i, .searchclosebtn {font-size: 2rem !important;}
.navbarsuchesubmitbutton, .navbarsuchesubmitbutton:hover {background-color: transparent;box-shadow: none;}
.navbarsuchesubmitbutton {height: 58px; line-height: 58px; padding: 0;vertical-align: middle;}
input[type="search"]:not(.browser-default):focus:not([readonly]){border-bottom: 2px solid var(--secondary-color) !important;}
.input-field input[type="search"] ~ .mdi-navigation-close, .input-field input[type="search"] ~ .material-icons { color: rgba(255, 255, 255, 0.7);}
#mod-search-searchword { height: 56px;}/** ie darstellungsfehler fix **/
@media only screen and (min-width : 1800px) { .navsearch { right: 11%; width: 15%; }}
@media only screen and (min-width : 2500px) { .navsearch { right: 20%; width: 15%; }}
.headerfcclogo a img, .headerfcclogo-wappen {height: 56px; padding: 5px;}
.headerfcclogo-wappen {-webkit-filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, .5));filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, .5));}

.hide-wenn-oben {
  /* element ist im Flow, aber unsichtbar */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.hide-wenn-oben.visible {
  /* wenn die Klasse kommt, wird es sichtbar */
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.sticky {position: -webkit-sticky;position: -moz-sticky;position: -o-sticky;position: -ms-sticky; position: sticky; top: 0;}
.fixed-nav-bar-menu {position: sticky;z-index: 990; top: 0;width: 100%;background-color: var(--primary-color) !important;; -webkit-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3); box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);}

/** navbar darstellung bei 993px **/
@media only screen and (min-width: 992.5px) and (max-width: 993px) {#headernavigation, #headermenusuche, nav.navsearch, .searchbtn.searchlupebtn {display: none !important;} #headerlogo {left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);} nav a.sidenav-trigger {display: block;}}

/** navbar groesse anpassen wenn bildschirm zu niedrig **/
@media screen and (orientation: landscape) and (max-height: 420px) {nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i, nav .navbarsuchesubmitbutton { height: 40px; line-height: 40px;} #headerstreifen  {height: 1rem;}.headerfcclogo a img {max-height: 40px!important;}nav .sidenav-trigger i.material-icons {line-height: 40px; height: 40px}.dropdown li ul{top: 40px;}.parent img { margin-top: 10px;}#mod-search-searchword { height: 40px;}.navsearch {top:40px;}.headercontentabstand {height: 10px} nav #headernavigation ul li.active, nav #headernavigation .deeper.parent {height: 40px; line-height: 40px;}}

/** seitenueberschrift **/
.seitenueberschrift h1 { padding-top: 5px ; padding-bottom: 5px; margin-bottom: 0px; margin-top: 0px; color: white; text-shadow: 0 10px 10px  rgba(0,0,0,0.95);}
.card-panel {padding: 5px; margin-top: 30px; /**border: 1px solid var(--akzentfarbe,#0277bd)**/}

/** content **/
.abstand-content {margin:20px;}
@media only screen and (max-width: 500px) {.abstand-content {margin:15px;}}
.abstand-rechts2 {margin:5px 0px 5px 0px;}
div#component .pull-left img { float: right; margin-left: 20px; padding-right: 5px; max-width: 220px; max-height: 220px;display: block; margin: 0px !important; padding: 0px !important; position: relative;}
.mittebild {display: block; margin-left: auto; margin-right: auto; margin-bottom: 5px;}
@media only screen and (max-width : 300px) { .facebook-embed { display: none;}}
.facebook-embed {overflow-x: auto; max-width: 100%; overflow-y:hidden;}
.img_caption { margin: 10px; color:rgba(0, 0, 0, 0.87);}
.collapsible-body {overflow-x:auto;}
/** beitragsmetadata **/
.article-info-term { display: none;}
.published, .createdby, .hits { text-align: right;}
/**valign-wrapper**/
@media only screen and (max-width: 600px) {.valign-wrapper.valign-med-and-up{display: inherit;}}
@media only screen and (max-width: 992px) {.valign-wrapper.valign-large-only{display: inherit;}}

/** bilder materialboxed **/
.materialbox-caption {height: auto; width: auto; line-height: 20px; background-color: rgba(0, 0, 0, 0.8); padding: 0% 0% !important; bottom: 5px; border-radius: 2px; }
@media only screen and (min-width: 993px) {.materialbox-caption {left: 20%;  right: 20%;}}
@media only screen and (max-width: 992px) {.materialbox-caption {left: 10%;  right: 10%;}}
@media only screen and (max-width: 600px) {.materialbox-caption {left: 2%;  right: 2%;}}
#materialbox-overlay {background-color: rgba(0, 0, 0, 0.8);}
.padding-content { overflow: visible; padding:1px 1px 45px 1px;} /* bilder werden nicht mehr bei zoom am rand der materialize content card abgeschnitten */
@media only screen and (max-width: 600px) {.padding-content {padding-bottom:60px;}}
/*.materialboxed { -moz-transition: none !important;}  bilder flackern nicht mehr bei hover in firefox */

@media (min-width: 992px) { /* medium ab 601px */
  .order-1 { order: 1; }
  .order-2 { order: 2; }
  .order-3 { order: 3; }
}

/* Parallax-Container */
.parallax-container {
  height: unset;
  position: relative;
  overflow: hidden;
}

/* Event-Logo überlappend */
.event-logo {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.event-logo img {
  max-width: 300px;
}

/* Logos der Verbände */
.assoc-logos {
  position: absolute;
  bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.assoc-logos img {
  max-height: 60px;
  opacity: 0.8;
}
/**valign-wrapper**/
@media only screen and (max-width: 600px) {.valign-wrapper.valign-med-and-up{display: inherit;}}
@media only screen and (max-width: 992px) {.valign-wrapper.valign-large-only{display: inherit;}}
.mittebild {display: block; margin-left: auto; margin-right: auto; margin-bottom: 5px;}

/** verbandslogos **/
.responsive-banner .container.verbandslogos {max-width: 200px;}
.responsive-banner .container.vereinslogos {max-width: 150px;}
.verbaende {padding: 5px;}
.verbandslogo, .vereinslogo {margin: 2rem 0 2rem 0;}

/** rechts sticky **/
.content-spalte-rechts {position: -webkit-sticky; position: sticky; top: 60px}

/** footer **/
.footerschrift a, .footer1 { color: white; font-weight: 300;}
.footer-copyright, .footerinnen, .footer-copyright.container {padding: 0 !important; margin:0 !important}
.footermenu {margin-top:0px; padding-top:0px;}
.footermenu ul {padding: 0px 10px;margin: 0px 0px;}
.footermenu li {float:left; padding: 0px 10px;margin: 0px 0px;}
.footer2 { display: none;}
.footerschatten {filter: drop-shadow(0px -2px 5px rgba(0,0,0,0.3));}
.page-footer {background: none;}
@media only screen and (max-width: 600px) {.page-footer {padding-top: 70px;}}
/** sticky footer **/
body {display: flex;min-height: 100dvh;flex-direction: column;}
main {flex: 1 0 auto;}

/** google maps iframe **/
.iframe-rwd  {position: relative;padding-bottom: 30%;padding-top: 30px;height: 0;overflow: hidden;}
.iframe-rwd iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
/**streckendatentabelle**/
.streckendatentabelle td:first-child {font-weight: bold;}


/**fixed action button**/
.fixed-action-btn { bottom: 23px; right: 23px;}
.fixed-action-btn ul { bottom: 50px; }
.fixed-action-btn ul li { margin-bottom: 7px;}
@media only screen and (min-height: 0px) {.fixed-action-btn { display: block;}}
@media only screen and (max-height: 440px) {.fixed-action-btn { display: none;}}
@media only screen and (orientation: landscape) and (max-height: 440px) and (min-width: 520px) { .fixed-action-btn { display: block; padding: 0 0 0 12px;} .fixed-action-btn ul { text-align: right; right: 64px; top: 50%; transform: translateY(-50%); height: 100%; left: initial; width: 600px; /*width 100% only goes to width of button container */ } .fixed-action-btn ul li { display: inline-block; margin: 0 7px 0 0; }}
@media only screen and (orientation: landscape) and (max-height: 440px) and (max-width: 700px) { .fixed-action-btn ul li { margin-right: 2px;}}
@media only screen and (orientation: landscape) and (max-height: 440px) and (max-width: 600px) { .fixed-action-btn ul li { margin-right: 1px;}}
@media only screen and (orientation: landscape) and (max-height: 440px) and (max-width: 520px) { .fixed-action-btn ul li { margin-right: 0px;}}
@media only screen and (max-height: 495px) {.fixed-action-btn ul li { margin-bottom: 2px;}}
@media only screen and (max-height: 455px) {.fixed-action-btn ul li { margin-bottom: 1px;}}
@media only screen and (max-height: 445px) {.fixed-action-btn ul li { margin-bottom: 0px;}}
@media only screen and (max-width: 600px) {.fixed-action-btn { bottom: 10px; right: 10px;}}
@media only screen and (max-width: 600px) {.fixed-action-btn ul { bottom: 50px; }}
@media only screen and (min-width: 600px) {.smi li a i {vertical-align: baseline;}}