:root {
  --brand-turquoise: #578765; /* primary green */

  --brand-turquoise-dark: #456b53;
  --brand-turquoise-light: #a3c1b0;
  --brand-turquoise-lighter: #dce7dc; /* very light green for backgrounds */
  --brand-accent: #c9b89b; /* accent beige */
  --bs-primary-rgb: 87, 135, 101; /* for Bootstrap compatibility */

  --bs-link-hover-color: #456b53;
  --text-dark: #1c1c1c;
  --text-light: #f8f9fa;
  --text-muted-custom: #6c757d;

  --background-light: #fcfdff; /* very light, slightly bluish background */

  --background-white: #ffffff;
}

body {
  font-family: "Inter", sans-serif;
  --bg-body: var(--background-light);
  background-color: var(--bg-body);
  color: var(--text-dark);
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body.dark-mode {
  --bg-body: #1e293b;
  --dark-bg: var(--bg-body);
  --dark-surface: #28374e;
  --dark-border: #3e4c67;
  --text-dark: var(--text-light);
  --bs-body-color: var(--text-light);
  --bs-heading-color: var(--text-light);
  background-color: var(--bg-body);
  color: var(--text-light);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .section-title {
  color: var(--text-light);
}

/* Wrapper to keep footer at the bottom without affecting fixed elements */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 98vh; /* takes at least the full viewport height */
}

/* Floating cart button styling */

.cart-floating-btn {
  position: fixed;
  z-index: 1045;
  right: 1.5rem;
  bottom: 1.5rem;
  top: auto;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.cart-floating-btn i {
  font-size: 1.5rem;
  color: #fff;
}

@media (max-width: 991.98px) {
  .cart-floating-btn {
    top: auto;
    bottom: 1rem;
    right: 1rem;
  }
}

main {
  flex-grow: 1; /* allows the main content to use the available space */
}

/* Globale Button-Stile */
.btn {
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border-radius: 0.375rem; /* Bootstrap Standard */
}

.btn-primary {
  background-color: var(--brand-turquoise);
  border-color: var(--brand-turquoise);
  color: var(--background-white);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-turquoise-dark);
  border-color: var(--brand-turquoise-dark);
  color: var(--background-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(87, 135, 101, 0.4);
}

.btn-outline-primary {
  color: var(--brand-turquoise);
  border-color: var(--brand-turquoise);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--background-white);
  background-color: var(--brand-turquoise);
  border-color: var(--brand-turquoise);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(87, 135, 101, 0.3);
}

.btn-cta-glow {
  background: linear-gradient(45deg, var(--brand-turquoise), var(--brand-turquoise-dark));
  color: white;
  box-shadow: 0 0 15px rgba(87, 135, 101, 0.5), 0 0 30px rgba(87, 135, 101, 0.3);
}
.btn-cta-glow:hover {
  box-shadow: 0 0 20px rgba(87, 135, 101, 0.7), 0 0 40px rgba(87, 135, 101, 0.5);
  transform: translateY(-1px); /* Sanfterer Hover-Effekt */
}

/* Typografie */
.section-title {
  font-size: clamp(2rem, 4.5vw, 3rem); /* slightly adjusted for readability */

  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
}
.section-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--text-muted-custom);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.brand-turquoise {
  color: var(--brand-turquoise) !important;
}
.brand-beige {
  color: var(--brand-accent) !important;
}
.text-on-dark {
  color: var(--text-light);
}
.text-on-dark-muted {
  color: rgba(248, 249, 250, 0.85); /* slightly muted white */
}

/* Karten-Stile */
.feature-card,
.product-card,
.testimonial-card,
.benefit-card {
  transition: all 0.3s ease-in-out;
  border: none; /* Entfernt Standard-Bootstrap-Border */

  border-radius: 0.5rem; /* slightly larger rounding */
}
.feature-card:hover,
.product-card:hover,
.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.12) !important;
}
.product-card:hover {
  transform: scale(1.03); /* keeps the scale effect for product cards */
}

.icon-circle {
  width: 60px; /* slightly smaller for a finer design */

  height: 60px;
  background-color: var(--brand-turquoise-lighter);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(87, 135, 101, 0.15); /* Sanfterer Schatten */
}
.icon-circle i.bi {
  font-size: 1.75rem; /* 28px */
  color: var(--brand-turquoise);
}

/* Dark mode overrides */
body.dark-mode .section-title,
body.dark-mode .section-subtitle {
  color: var(--text-light);
}
body.dark-mode .feature-card,
body.dark-mode .product-card,
body.dark-mode .testimonial-card,
body.dark-mode .benefit-card,
body.dark-mode .special-feature-card,
body.dark-mode .healthcare-system-card,
body.dark-mode .report-category-card,
body.dark-mode .benefits-section-item {
  background-color: var(--dark-surface);
  color: var(--text-light);
  border-color: var(--dark-border);
}
body.dark-mode .icon-circle {
  background-color: var(--brand-turquoise-dark);
  color: var(--background-white);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
body.dark-mode .card {
  background-color: var(--dark-surface);
  color: var(--text-light);
  border-color: var(--dark-border);
}
body.dark-mode .nav-pills .nav-link {
  color: var(--text-light);
  background-color: var(--dark-surface);
  border: 1px solid var(--dark-border);
}
body.dark-mode .nav-pills .nav-link.active {
  color: #fff;
  background-color: var(--brand-turquoise);
  border-color: var(--brand-turquoise);
}
body.dark-mode .hero-section {
  background-color: var(--dark-bg);
  color: var(--text-light);
}
body.dark-mode .hero-section h1,
body.dark-mode .hero-section p,
body.dark-mode .special-feature-card h4,
body.dark-mode .healthcare-system-card .card-title,
body.dark-mode .report-category-card h5,
body.dark-mode .benefits-section-item h5 {
  color: var(--text-light);
}
body.dark-mode .section-bg-white {
  background-color: var(--dark-surface);
}
body.dark-mode .section-bg-light {
  background-color: var(--dark-surface);
}

/* Spezifische Sektionen */

.newsletter-section {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url("https://placehold.co/1920x600/0F766E/333333?text=Moderne+Gesundheit") no-repeat center center;
  background-size: cover;
}
.section-bg-white {
  background-color: var(--background-white);
}
.section-bg-lighter-turquoise {
  background-color: var(--brand-turquoise-lighter);
}
/* Styling für die Flaggen-Icons im Language Selector */
.lang-flag {
  width: 24px; /* Breite der Flagge */
  height: auto; /* Höhe passt sich automatisch an */
  border-radius: 3px; /* Leicht abgerundete Ecken */
  object-fit: cover;
}

/* Optional: Stellt sicher, dass der Dropdown-Pfeil im dunklen Footer sichtbar ist */
.footer .btn-outline-secondary {
  --bs-btn-color: #adb5bd; /* Helleres Grau für Text und Pfeil */
  --bs-btn-border-color: #6c757d; /* Etwas dunklerer Rand */
}

.footer .btn-outline-secondary:hover {
  --bs-btn-color: #fff;
  --bs-btn-background-color: #6c757d;
}

/* Loading overlay for long-running actions */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

/* Ensure unlock button sits above any stretched-link overlay in cards */
.unlock-report-btn {
  position: relative;
  z-index: 2;
}