/* Stil angelehnt an pro-habitus.de (Bootstrap "Creative"-Theme) */
:root {
  --primary: #758e0e;
  --primary-dark: #667c0c;
  --overlay: rgba(92, 77, 66, 0.8);
  --text: #212529;
  --muted: #6c757d;
  --light: #f8f9fa;
  --sans: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Merriweather", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--serif); color: var(--text); background: #fff; display: flex; flex-direction: column; }

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  background: #fff; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  padding: 1rem 0;
}
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 15px; }
nav img { height: 50px; display: block; }

header.masthead {
  flex: 1 0 auto;
  min-height: 40rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 72px 1rem 0;
  background: linear-gradient(var(--overlay), var(--overlay)), url("/static/img/header.png") center / cover no-repeat;
  color: #fff;
}
header h1 {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  font-size: 2.25rem; margin: 0; letter-spacing: .02em;
}
hr.divider {
  max-width: 3.25rem; margin: 1.5rem auto;
  border: 0; border-top: .2rem solid var(--primary); opacity: 1;
}
header p {
  font-family: var(--sans); font-weight: 300; font-size: 1.15rem;
  color: rgba(255,255,255,.75); margin: 0 0 3rem;
}
.btn-xl {
  display: inline-block; padding: 1.25rem 2.25rem;
  font-family: var(--sans); font-size: .85rem; font-weight: 700; text-transform: uppercase;
  color: #fff; background: var(--primary); border-radius: 10rem; text-decoration: none;
  transition: background-color .2s ease;
}
.btn-xl:hover, .btn-xl:focus { background: var(--primary-dark); }

footer { background: var(--light); padding: 3rem 0; text-align: center; font-family: var(--sans); font-size: 80%; color: var(--muted); }
footer a { color: var(--primary); text-decoration: none; }
footer a:hover { color: var(--primary-dark); text-decoration: underline; }

@media (min-width: 768px)  { header h1 { font-size: 3rem; } }
@media (min-width: 1200px) { header h1 { font-size: 3.5rem; } }