@import url("normalize.css");

:root {
    --gelb: rgb(255,204,0);
    --gelb80: rgba(255,204,0, 0.8);
    --grau: rgb(63,76,83);
    --grau-dark: rgb(41,51,55);
    --grau-light: rgb(102,113,119);
    --uk-primary-color: var(--gelb);
}

/* lato-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v25-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v25-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

* {
  margin: 0;
  padding: 0;
}

html, body {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

body {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.5;
    color: var(--grau);
}

strong, 
h1, h2, h3, h4, .uk-h1 {
  font-weight: 700;
  color: var(--grau-dark);
  margin: 0 0 0 0;
  text-transform: uppercase;
}

p {
  color: var(--grau-dark);
}

header {
  position: relative;
  background: var(--gelb);
  padding: 0 2rem;
  z-index: 999;
}

header .uk-navbar-left,
header .uk-navbar-right {
  align-items: center;
}

header .uk-navbar-right {
  flex-wrap: nowrap;
  gap: 2em;
}

header .navbar-icons {
  height: 1.5em;
  width: 100% !important ;
  object-fit: none !important;
}

main {
  z-index: 1;
}

a.uk-logo {
  position: relative;
  max-width: 12em;
  margin-bottom: -45%;
  z-index: 999;
}

header h1,
header .uk-h1 {
  margin: 0;
}

.bg-gelb80 {
  background: var(--gelb80);
}

.bg-gelb {
  background: var(--gelb) !important;
}

.bg-grau {
  background: var(--grau);
}

.bg-grau-dark {
  background: var(--grau-dark);
}

.bg-grau-light {
  background: var(--grau-light);
}

.uk-button-primary {
  background-color: var(--grau-light);
  border-radius: 8px;
  border: 2px solid var(--grau-dark);
}

.uk-button-primary:hover {
  background-color: var(--grau-dark);
}

.uk-button-large {
  font-size: 1em;
}

.uk-card {
  border-radius: 12px;
}

.uk-light .uk-slidenav {
  color: var(--grau-dark);
}

.uk-light .uk-slidenav svg {
  margin: 0.25em;
}

.slider-navigation {
  background: var(--gelb);
  border-radius: 100%; 
}

.slider-navigation.uk-position-center-left {
  margin-left: -1em;
}

.slider-navigation.uk-position-center-right {
  margin-right: -1em;
}

div.header-h2 {
  width: 60%;
  padding: 2em ;
}

footer {
  background: var(--grau);
  color: #fff;
  padding: 5em 1em 0 1em;
}

footer * {
  color: #fff;
}

.oeffnungszeiten span {
    width: 4.5em;
    display: inline-block;
}

#copyrights {
  background: var(--gelb);
  padding: 0.5em 2em;
}

#copyrights p, 
#copyrights a {
  color: var(--grau-dark) !important;
  font-weight: 700;
}

.uk-navbar-right .uk-h1,
.uk-navbar-right h1 {
    margin-right: 4em;
  }

.header-slider .uk-overlay {
  max-width: 45%;
}




@media screen and (max-width: 960px) {

  a.uk-logo {
    max-width: 5em;
  }

  .uk-navbar-right {
    margin-left: 2em;
  }


  .uk-navbar-right h1,
  .uk-navbar-right .uk-h1 {
    margin-right: 1em;
    font-size: 1.35rem;
  }

  header .navbar-icons {
    height: 2em;
  }

  .uk-slideshow-items {
    aspect-ratio: 9 / 15 !important;
  }

  .header-slider .uk-overlay {
      max-width: 90%;
    }

}

@media screen and (max-width: 450px) {

  a.uk-logo {
    max-width: 5em;
  }

  .uk-navbar-right h1,
  .uk-navbar-right .uk-h1 {
    margin-right: 1em;
    font-size: 1.15rem;
  }

  
}