:root {
  --primary: #009688;
  --primary-dark: #00796b;
  --accent: #26867a;     
  --accent-hover: #ea580c;
  --calm-bg: #8aa5b8;
  --light-bg: #aeb8a2;
  --text-color: #333;
  --bs-link-color-rgb: #38576d;
  
  --bs-navbar-nav-link-padding-x: 0;

}

.collapse:not(.show) {
  display: none;
}
.collapse.show {
  display: block;
}


/* Allgemein */
body {
  font-family: 'Rubik', sans-serif;
  background-color: var(--light-bg);
  color: var(--text-color);
}

h1, h2, h5 {
  font-weight: 600;
}

/* Navigation */
.navbar {
  background-color: var(--primary);

}
.navbar .nav-link {
  color: white !important;
}
.navbar .nav-link:hover {
  text-decoration: underline;
}

nav.navbar {
    position: sticky;
    top: 0;
    z-index: 1020; /* über anderen Inhalten */
  }

/* Main */
@media only screen and (min-width: 70rem) {
  div.row {
  padding-left: calc(var(--bs-gutter-x) * 6.5);

  }
}

/* Hero */
header {
  background: linear-gradient(135deg, var(--primary) 0%, #4db6ac 100%);
  color: white;
}
header h1 {
  font-size: 3rem;
}
header p {
  font-size: 1.2rem;
}

/* Karten */
.card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card-img-top {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* .card-original-size img {
  width: auto;       
  max-width: 100%;   
  height: auto;      
  display: block;   
  margin-left: auto; 
  margin-right: auto;
} */

/* Buttons */
.btn-primary {
  background-color: var(--primary);
  border: none;
}
.btn-primary:hover {
  background-color: var(--primary-dark);
}
.btn-accent {
  background-color: var(--accent);
  color: white;
  border: none;
}
.btn-accent:hover {
  background-color: var(--accent-hover);
}

/* Zusätzliche Hilfsklassen */
.bg-calm {
  background-color: var(--calm-bg);
}
.text-main {
  color: var(--text-color);
}

/* Footer */
footer {
  background-color: #004d40;
  color: white;
}