.step-num {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 0.5px solid #efe8e1;
    background: #efe8e1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 20px;
}

.step {
    text-align: center;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}
.step-num span {
    font-size: 30px;
    margin-top: 8px;
}
.step h4, .step p {font-size:120%;color:#004172;z-index:1000;}

.step a {
padding: 10px;
    border-radius: 48px;
    background-color: transparent;
    border: 2px solid #00a6aa;
    color: #00a6aa;
}

.step a:hover{
    filter: drop-shadow(0 10px 18px rgba(0, 65, 114, 0.28));
fill: #e9f7ff;
}

html {
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}

/* =====================================================
   BASIS
===================================================== */

.svg-map {
  width: 100%;
}

.hex-theme {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}

.hex-theme path,
.hex-theme text {
  transition:
    fill 0.35s ease,
    stroke 0.35s ease,
    opacity 0.35s ease;
}

/* =====================================================
   STANDARD DIMMING
===================================================== */

.svg-map.dimmed .hex-theme {
  opacity: 0.2;
  filter: grayscale(20%);
}

/* =====================================================
   HOVER AUF THEMEN
===================================================== */

.hex-theme:hover {
  filter: drop-shadow(0 10px 18px rgba(0, 65, 114, 0.28));
}

.hex-theme:hover > .hex > path:first-child {
  fill: #e9f7ff;
}


/* =====================================================
   PULSIERENDE ANIMATION
===================================================== */

@keyframes pulseGlow {
  0% {
    filter: drop-shadow(0 0 0 rgba(0,159,227,0.0));
  }

  50% {
    filter: drop-shadow(0 0 18px rgba(0,159,227,0.45));
  }

  100% {
    filter: drop-shadow(0 0 0 rgba(0,159,227,0.0));
  }
}

/* aktive Themen */
.svg-map .hex-theme.active {
  opacity: 1;
  animation: pulseGlow 2.4s infinite;
}

.svg-map .hex-theme.active  > .hex > path:first-child {
  fill: #e9f7ff;
}


/* =====================================================
   FACHBEREICH → THEMEN
===================================================== */

/* BIO */
.svg-map.highlight-bio #Analyse,
.svg-map.highlight-bio #Lebensraum,
.svg-map.highlight-bio #Aufbereitung,
.svg-map.highlight-bio #Klima {
  opacity: 1;
}

/* CHEMIE */
.svg-map.highlight-chemie #Eigenschaften,
.svg-map.highlight-chemie #Analyse,
.svg-map.highlight-chemie #Verschmutzung {
  opacity: 1;
}

/* PHYSIK */
.svg-map.highlight-physik #Eigenschaften,
.svg-map.highlight-physik #Nutzung {
  opacity: 1;
}

/* MINT */
.svg-map.highlight-mint #Aufbereitung,
.svg-map.highlight-mint #Nutzung {
  opacity: 1;
}

/* =====================================================
   ICONS FACHBEREICHE
===================================================== */

#Bio,
#Che,
#Phy,
#Mint {
  transition:
    transform 0.3s ease,
    filter 0.3s ease,
    opacity 0.3s ease;
}

#Bio:hover,
#Che:hover,
#Phy:hover,
#Mint:hover {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
}