/* Custom CSS Feuerwehr-Joomla
****************************************************/

/* roboto-300 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/roboto-v19-latin-300.eot");
  src: local("Roboto Light"), local("Roboto-Light"),
    url("../fonts/roboto-v19-latin-300.eot?#iefix") format("embedded-opentype"),
    url("../fonts/roboto-v19-latin-300.woff2") format("woff2"),
    url("../fonts/roboto-v19-latin-300.woff") format("woff"),
    url("../fonts/roboto-v19-latin-300.ttf") format("truetype"),
    url("../fonts/roboto-v19-latin-300.svg#Roboto") format("svg");
}

/* roboto-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v19-latin-regular.eot");
  src: local("Roboto"), local("Roboto-Regular"),
    url("../fonts/roboto-v19-latin-regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/roboto-v19-latin-regular.woff2") format("woff2"),
    url("../fonts/roboto-v19-latin-regular.woff") format("woff"),
    url("../fonts/roboto-v19-latin-regular.ttf") format("truetype"),
    url("../fonts/roboto-v19-latin-regular.svg#Roboto") format("svg");
}

/* Variablen */
:root {
  --link-color: #d63b37;
  --secondary-color: #dbdbdb;
  --body-fonts: "Roboto", Helvetica, Arial, sans-serif;
  --font-weight: 300;
  --background-default: #f5f5f5;
  --background-secondary: #313232;
}

/* ==================================================
   LAYOUT
   ================================================== */

html {
  font-family: var(--body-fonts);
  font-weight: var(--font-weight);
}

.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6,
h1,
h2,
h3,
h4,
h5,
h6,
.uk-navbar-item,
.uk-navbar-nav > li > a,
.uk-navbar-toggle {
  font-family: var(--body-fonts);
}

/* ==================================================
   HEADER / NAVBAR
   ================================================== */

/* Navbar-Hintergrund erzwingen (Cassiopeia-Override) */
.uk-navbar-container,
.uk-navbar-container.uk-background-secondary {
  background-color: var(--background-secondary) !important;
}

/* Normale Menülinks */
.uk-navbar-nav > li > a {
  color: #ffffff;
  text-transform: none;
}

/* Aktiver Menüpunkt */
.uk-navbar-nav > li.uk-active > a,
.uk-navbar-nav > li.uk-active > a:hover,
.uk-navbar-nav > li.uk-active > a:focus {
  color: #ffffff !important;
  background: var(--link-color);
}

/* Hover */
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li > a:focus {
  background: var(--link-color);
  color: #ffffff;
}

/* Mobile Toggle */
.uk-navbar-toggle {
  color: #ffffff;
}

/* ==================================================
   MAIN / SLIDESHOW
   ================================================== */

.uk-slideshow .uk-overlay {
  padding: 10px;
}

.uk-slideshow .uk-overlay h5 {
  margin: 0;
  font-weight: 300;
}

a.uk-position-center-left.uk-slidenav,
a.uk-position-center-right.uk-slidenav {
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 10px 15px;
}

/* Startseiten-Slideshow */
.startslideshow {
  height: 420px;
  background: #000000;
  overflow: hidden;
}

.startslideshow > li > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile Slideshow */
@media (max-width: 960px) {
  .startslideshow {
    height: 260px;
  }
}

/* ==================================================
   FOOTER
   ================================================== */

.container-footer h3,
.container-footer .uk-h3 {
  color: var(--secondary-color);
}

/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 959px) {
  .uk-navbar-nav,
  .uk-navbar-nav > li > a {
    display: block;
  }

  .uk-navbar-nav > li > a {
    padding: 8px 0;
  }
}