/**
* Custom CSS
*/
.footer .copyright {
	background-color:transparent !important;
}

.footer {
	padding-bottom: 0;
}

.header .logo img {
	max-height: 60px;
}

/* Brand-Farbe: Accent-Blau durch Weinrot ersetzen (inkl. Hover-/Rollover-Farben) */
:root {
  --accent-color: #a41247;
  --nav-color: #8d0f3d;
  --nav-hover-color: #a41247;
  --nav-dropdown-color: #8d0f3d;
  --nav-dropdown-hover-color: #a41247;
  --heading-color: #8d0f3d;
}

.accent-background {
  --background-color: #a41247;
}

/* Schräge Verlaufs-Hintergründe */
.section.light-background {
  --heading-color: #333;
  background: linear-gradient(35deg, #fff6d9 30%, #ff9a1c 100%);
}

.section.accent-background,
.footer.accent-background {
  background: linear-gradient(135deg, #a41247 0%, #8d0f3d 100%);
}

/* Hero: Overlay über dem Hintergrundbild auf 30% Deckkraft */
.hero:before {
  background: rgba(255, 255, 255, 0.3);
}

/* btn-get-started: gleiches Styling außerhalb der Hero-Sektion */
.btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 14px 50px;
  border-radius: 50px;
  transition: 0.5s;
  margin-top: 30px;
}

.hero .btn-get-started {
  border-radius: 50px;
}

/* Kontakt-Button im Header: ebenfalls Pillenform */
.header .btn-getstarted {
  border-radius: 50px;
}

.btn-get-started:hover,
.hero .btn-get-started:hover {
  color: var(--accent-color);
  background: #ffffff;
}

/* Navbar: transparent over Hero, becomes smaller & white on scroll (Desktop only) */
@media (min-width: 1200px) {
  .index-page .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    border-bottom-color: transparent;
    padding: 20px 0;
    transition: background-color 0.3s ease, padding 0.3s ease;
  }

  .index-page .header .logo h1 {
    font-size: 30px;
    transition: font-size 0.3s ease;
  }

  .index-page .header .logo img {
    transition: max-height 0.3s ease;
  }

  .index-page.scrolled .header {
    background-color: #ffffff;
    padding: 10px 0;
  }

  .index-page.scrolled .header .logo h1 {
    font-size: 22px;
  }

  .index-page.scrolled .header .logo img {
    max-height: 50px;
  }

  /* Hero darf jetzt volle Viewport-Höhe einnehmen, da der Header keinen Platz mehr im Fluss belegt */
  .index-page .hero {
    min-height: 100vh;
  }
}