/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&display=swap');

/* Grundlayout */
body {
  margin: 0;
  padding: 0 20px;
  background: linear-gradient(to bottom, #8AA4D3, #5E6C8B);
  font-family: 'Josefin Sans', sans-serif;
  color: #333;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Titel */
header {
  text-align: center;
  padding: 2rem 1rem 1rem;
  z-index: 2;
}

header h1 {
  font-size: 2.5rem;
  margin: 0;
  font-weight: 700;
}

/* Kartencontainer */
.map-container-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-container {
  position: relative;
}

.map-image {
  width: 100%;
  height: auto;
}

/* Ski-Button (Marker + Text) */
.ski-button {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #111;
  font-weight: 600;
  font-size: 0.9rem;
  transform: translate(-50%, -50%);
}

/* Roter Punkt */
.ski-button .dot {
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Effekt */
.ski-button:hover .dot {
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}

/* Name unter dem Punkt */
.ski-button span {
  margin-top: 0.3rem;
  text-align: center;
}