/* Futterplanet: gemeinsame helle Darstellung für alle öffentlichen Seiten. */
:root {
  --fp-page: #f3f7f1;
  --fp-surface: rgba(255, 255, 255, .94);
  --fp-text: #253128;
  --fp-muted: #58655c;
  --fp-green: #17833a;
  --fp-line: rgba(37, 49, 40, .14);
  --fp-header: rgba(18, 18, 18, .96);
}

html,
body {
  background: var(--fp-page) !important;
  color: var(--fp-text) !important;
}

body {
  background-image:
    linear-gradient(rgba(247, 250, 246, .88), rgba(239, 246, 238, .92)),
    url("hintergrund.jpg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body::before,
body::after {
  content: none !important;
  display: none !important;
}

.page,
main,
section {
  color: var(--fp-text) !important;
}

/* Auf allen Seiten exakt dieselbe Navigation wie auf der Startseite. */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--fp-header) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16) !important;
  backdrop-filter: blur(12px) !important;
}

header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: .7rem 1.5rem !important;
}

header .logo {
  display: flex !important;
  align-items: center !important;
}

header .logo-img {
  display: block !important;
  width: auto !important;
  height: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  filter: none !important;
}

header nav > ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: .9rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

header nav li {
  position: relative !important;
}

header nav > ul > li > a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: .35rem .72rem !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

header nav > ul > li > a:hover,
header nav > ul > li > a:focus-visible {
  background: #40e85a !important;
  color: #101410 !important;
}

header .nav-submenu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  min-width: 210px !important;
  margin: 0 !important;
  padding: .45rem !important;
  list-style: none !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 12px !important;
  background: rgba(18, 18, 18, .98) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .30) !important;
}

header .nav-has-sub:hover > .nav-submenu,
header .nav-has-sub:focus-within > .nav-submenu {
  display: grid !important;
}

header .nav-submenu a {
  display: block !important;
  padding: .55rem .7rem !important;
  border-radius: 9px !important;
  color: #fff !important;
  text-decoration: none !important;
}

header .nav-submenu a:hover,
header .nav-submenu a:focus-visible {
  background: rgba(64, 232, 90, .18) !important;
  color: #8df69b !important;
}

/* Karten und Fenster behalten bewusst ihren bisherigen Originalstil. */
/* Nur die sehr dunkle Folie über dem Startbild wird abgeschwächt. */
.hero::before {
  filter: brightness(.92) contrast(1.01) !important;
}

.hero::after {
  background: linear-gradient(90deg, rgba(9, 12, 9, .30), rgba(9, 12, 9, .16) 58%, rgba(9, 12, 9, .04)) !important;
}

@media (max-width: 720px) {
  header .header-inner {
    padding: .6rem 1rem !important;
  }

  header .nav-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-left: auto !important;
  }

  header nav {
    position: absolute !important;
    top: 100% !important;
    left: 1rem !important;
    right: 1rem !important;
  }

  header nav > ul {
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .2rem !important;
    padding: .55rem !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 14px !important;
    background: rgba(18, 18, 18, .98) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .30) !important;
  }

  header nav.is-open > ul {
    display: flex !important;
  }

  header .nav-submenu {
    position: static !important;
    min-width: 0 !important;
    margin-top: .2rem !important;
    box-shadow: none !important;
  }
}