:root {
  --ice-light:     #d7f3f9;
  --ice-blue:      #75cfe3;
  --glacier-blue:  #347eac;
  --crystal-pink:  #ff80c9;
  --frost-white:   #ffffff;
  --snow-grey:     #f2f2f2;
  --text-dark:     #333333;
  --danger-red:    #ff4d4d;
  --victory-green: #7fff00;
}

/* Bootstrap Overrides */
body {
  background-color: var(--ice-light);
  color: var(--text-dark);
}

/* Navbar mit Glacier Blue */
.navbar {
  background-color: var(--glacier-blue) !important;
}

.navbar .nav-link {
  color: white !important;
}

.navbar .nav-link:hover {
  color: var(--crystal-pink) !important;
}

/* Buttons */
.btn-primary {
	background-color: var(--crystal-pink);
	border-color: var(--crystal-pink);
	color: var(--text-dark);
	font-weight: bold;
}

.btn-primary:hover {
	background-color: #ffb3e6;
	border-color: #ffb3e6;
}

/* Sektionen */
.section-contrast,
.bg-light {
	background-color: var(--snow-grey) !important;
}

/* Footer */
footer {
	background-color: var(--glacier-blue);
	color: white;
}

/* Links */
a {
	color: var(--glacier-blue);
}

a:hover {
	color: var(--crystal-pink);
}
.nav-link.active {
	font-weight: bold;
	color: var(--crystal-pink) !important;
}
.scroll-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: none;
  z-index: 9999;
  cursor: pointer;
  animation: floatUp 1.5s ease-in-out infinite;
}

.scroll-top img {
  width: 60px;
  height: 100px;
  transition: transform 0.2s ease-in-out;
}

.scroll-top img:hover {
  transform: scale(1.1);
}

@keyframes floatUp {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
.card {
  border-radius: 16px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.card-title {
  color: var(--glacier-blue);
}

.card-text {
  font-size: 0.95rem;
}
#charModalStory {
  max-height: 400px;
  overflow-y: auto;
}