@charset "utf-8";

/* Farben

dunkelblau: #0d2840		013,040,064
mittelblau: #245c73		036,092,115
hellblau:	#28a2e5		040,162,229
hellorange: #f2b705		242,183,005
orange: 	#f29f05		242,159,005
grau: 		#e9ecf2		233,236,242

*/
:root {
  --br-blue: #0d2840;
  --br-blue-medium: #245c73;
  --br-blue-light: #28a2e5;
  --br-orange: #f29f05;
  --br-orange-light: #f2b705;
  --br-grey: #e9ecf2;
}

.br-bg-darkblue { background: var(--br-blue); }
.br-text-darkblue {color: var(--br-blue); }

.br-bg-blue { background: var(--br-blue-medium); }
.br-text-blue {color: var(--br-blue-medium); }

.br-bg-lightblue { background: var(--br-blue-light); }
.br-text-lightblue {color: var(--br-blue-light); }

.br-bg-yellow { background: var(--br-orange-light); }
.br-text-yellow {color: var(--br-orange-light); }

.br-bg-orange { background: var(--br-orange); }
.br-text-orange {color: var(--br-orange); }

.br-bg-grey { background: var(--br-grey); }
.br-text-grey {color: var(--br-grey); }


/* NunitoSans */
@font-face { font-family: NunitoSans; src: url('/fileadmin/template_global/fonts/nunitosans/NunitoSans-Regular.ttf'); }
@font-face { font-family: NunitoSansLight; src: url('/fileadmin/template_global/fonts/nunitosans/NunitoSans-Light.ttf'); }
@font-face { font-family: NunitoSansBold; src: url('/fileadmin/template_global/fonts/nunitosans/NunitoSans-Bold.ttf'); }

/* FontAwesome */
@font-face { font-family: FontAwesome; src: url('/fileadmin/template_global/fonts/fontawesome/webfonts/fa-solid-900.woff'); }
@font-face { font-family: FontAwesomeBrands; src: url('/fileadmin/template_global/fonts/fontawesome/webfonts/fa-brands-400.woff'); }

html, body, div {
  margin: 0;
  padding: 0;
}

html, body { height: 100.1%; }

html { box-sizing: border-box; }

body {
  font-family: NunitoSans, Arial, sans-serif;
  font-size: 15pt;
  margin-top: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: NunitoSansBold, Arial, sans-serif;
  margin: 0 0 20px 0;
  position: relative;
}

a { color: var(--br-blue-light); text-decoration: none; font-weight: bold; }
a:hover { color: var(--br-orange); }

blockquote {
  display: block;
  margin: 10px 3px;
  padding: 0 10px;
  border-left: 3px solid var(--br-blue-medium);
  color: #666;
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--br-blue-medium);
  margin: 15px 0;
}

section { margin-bottom: 25px; }

/* Seitenaufbau */
.navbar { background: var(--br-blue) !important; color: var(--br-grey) !important; }

.navbar li a { color: var(--br-grey) !important; }
.navbar li a:hover { color: var(--br-orange-light) !important; }
.navbar li li a { color: var(--br-blue) !important; }
.navbar li li a:hover { color: var(--br-orange) !important; }

.navbar .dropdown-toggle[aria-expanded="true"], .navbar .nav-link:active, .navbar .nav-link:focus { color: var(--br-orange-light) !important; }
.navbar .dropdown-item:active { background: var(--br-grey) !important; }

.navbar-brand img { border: 2px solid var(--br-blue); border-radius: 50px; }

.nav-item svg { color: #fff; width: 24px; height: 24px; }
.nav-item a:hover svg { color: var(--br-orange) !important; }

.br-nav-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8, <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(233, 236, 242, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/></svg>"); }
.br-nav-toggler.navbar-toggler { border-color: var(--br-grey) !important; }

.carousel { margin-bottom: 0; }
.carousel .carousel-item img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 75vh;
}

.hero .carousel-item .img-gradient { position: relative; }
.hero .carousel-item .img-gradient:after {
  content: '';
  background: linear-gradient(rgba(013, 040, 064, 0.4), rgba(013, 040, 064, 0.4));
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

.carousel .carousel-caption {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.carousel .carousel-caption button {
  display: inline-block;
  outline: 0;
  border: none;
  border-radius: 20px;
  background-color: var(--br-orange-light);
  background: linear-gradient(to bottom, var(--br-orange-light) 50%, var(--br-orange) 50%) top;
  background-size: 200% 200%;
  transition: .4s ease-out;
  padding: 5px 15px;
  text-align: center;
  font-size: 13pt;
  color: var(--br-blue);
  cursor: pointer;  
}

.carousel .carousel-caption button a { color: var(--br-blue); }
.carousel .carousel-caption button:hover { background-position: bottom; }
.carousel .carousel-caption button:hover a { color: #fff; }

.carousel .carousel-indicators button { border-radius: 50%; width: 10px !important; height: 10px !important; }

.img-responsive { border: 1px solid #000; object-fit: cover; object-position: center; width: 97%; height: 40vh; }
.ytvideo { width: 97%; height: auto; aspect-ratio: 16/9; }

#topBTN { display: none; position: fixed; width: 40px; height: 40px; bottom: 85px; right: 15px; z-index: 99; font-size: 24px; text-align: center; outline: none; background-color: #fff; color: var(--br-blue); cursor: pointer; border: 2px solid var(--br-blue); border-radius: 50%; padding: 0; }
#topBTN:hover { background: var(--br-blue); color: #fff !important; border: 2px solid #fff; }
#topBTN i { position: absolute; top: 50%; margin-top: -13px; left: 50%; margin-left: -8px; }

a img { border: 1px solid var(--br-blue-medium); }

a:hover img,
.ytvideo:hover { border: 2px solid var(--br-blue-light); }

footer {
  clear: both;
  position: relative;
  color: var(--br-grey);
  font-size: 10pt;
  min-height: 60px;
}

footer .row { min-height: 60px; } 
footer .col-sm-4 { height: 100%; margin: auto 0; }
footer a { color: var(--br-grey); text-decoration: none; font-weight: normal; }
footer a:hover { color: var(--br-orange-light); }
footer ul { list-style: none; margin: 0; }

#copyright { float: left; }
#changed { float: right; }

#paypal, #youtube {
  display: inline;
  font-family: FontAwesomeBrands;
  font-weight: 400;
  font-size: 16pt;
}

#paypal span:before { content: '\f1ed'; }
#youtube span:before { content: '\f167'; }

footer .foot-menu { float: right; }
footer .foot-menu li { display: inline; }
footer .foot-menu li + li:before { content: " / "; padding: 0 10px; }

.card { border-color: var(--br-blue); }
.card img { width: 100%; border: none; height: auto; }

/* TYPO3 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-italic { font-style: italic; }


/* Responsive */

@media all and (max-width: 1400px) {
  footer .foot-info li { clear: both; float: none !important; }
  .img-responsive { height: 35vh; }
}

@media all and (max-width: 994px) {
  .img-responsive { height: 25vh; }
}

@media all and (min-width: 785px) and (max-width: 930px) {
  footer .foot-menu li { clear: both; float: right; }
  footer .foot-menu li + li:before { content: " "; }
  footer .foot-menu li:first-child { padding-top: 5px; }
  footer .foot-menu li:last-child { padding-bottom: 5px; }
}

@media all and (max-width: 785px) {
  footer .foot-menu { float: none; }
  footer .col-sm-4 { width: 95%; margin-top: 10px; }
  footer .col-sm-4:last-child { margin-bottom: 10px; }
}

@media all and (max-width: 768px) {
  .img-responsive { object-fit: scale-down; height: auto; }
}

@media all and (max-width: 576px) {
  .col { margin-top: 25px; }
  .col img { margin: 0 auto !important; }
}