/* Gemeinsame Teile aller Seiten: Schriften, Navigation, Fußzeile.
   Montserrat/Swanky and Moo Moo: lokal installiert oder Ersatzschrift (keine Google-Fonts-Abfrage mehr). */
@font-face {
  font-family: "Lithos Pro Regular";
  src: url("../img/font/LithosPro-Regular.otf") format("opentype");
  font-display: swap;
}

:root {
  --schrift: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --creme: #fff2d7;
  --orange: #d78e3e;
  --rot: #e64622;
  --dunkel: #2d2926;
  --blau: steelblue;
}

body { font-family: var(--schrift); }

.navbar { padding: 0; margin: 0; justify-content: flex-start; }
.navbar-brand {
  font-family: "Lithos Pro Regular", var(--schrift);
  text-transform: uppercase;
  font-size: calc(14pt + 1vw);
  padding-left: 1vw;
  white-space: normal;
}
.navbar-brand > img { width: calc(20px + 1vw); height: calc(20px + 1vw); }
.nav-link {
  font-family: var(--schrift);
  font-size: calc(9pt + 0.6vw);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 15px;
}
.nav-item { padding-right: 2em; white-space: nowrap; }
.nav-link.active, a:hover { color: var(--blau); }
.navbar-toggler { margin: 0 1rem 0 auto; }
@media (max-width: 991.98px) {
  .navbar-nav { padding: 0 1rem 1rem; }
  .nav-link { margin-top: 0; }
}

/* Farbvarianten der Navigation je Seite */
.nav-hell   { background-color: var(--creme); }
.nav-hell .navbar-brand { color: var(--blau); }
.nav-hell .nav-link { color: var(--orange); }
.nav-dunkel { background-color: var(--dunkel); }
.nav-dunkel .navbar-brand, .nav-dunkel .nav-link { color: var(--orange); }
.nav-ocker  { background-color: rgb(223, 165, 50); }
.nav-ocker .navbar-brand, .nav-ocker .nav-link { color: var(--dunkel); }
.nav-hell .nav-link.active, .nav-dunkel .nav-link.active, .nav-ocker .nav-link.active { color: var(--blau); }
.navbar-toggler { border-color: var(--orange); }
.nav-ocker .navbar-toggler { border-color: var(--dunkel); }
.nav-ocker .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(45,41,38,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Handy: schmale Kopfzeile, große Tippflächen im Menü */
@media (max-width: 575.98px) {
  .navbar { flex-wrap: wrap; }
  .navbar-brand { font-size: 15pt; padding: 0.45rem 0.75rem; margin-right: 0; }
  .navbar-brand > img { width: 22px; height: 22px; }
  .navbar-toggler { padding: 0.2rem 0.5rem; margin-right: 0.75rem; }
  .nav-link { font-size: 13pt; padding: 0.6rem 0 !important; }
}
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(215,142,62,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.fusszeile {
  color: rgb(224, 107, 0);
  background: rgba(255, 242, 215, 0.7);
  padding: 0.4em 1em;
  font-size: calc(10pt + 0.4vw);
  font-weight: 600;
  text-align: center;
}
.fusszeile a { color: var(--blau); }
.fusszeile a:hover { color: var(--rot); }