/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  color: #333;
}

Webansicht {
  font-size: 16px;
  position: absolute; top: 780px; right: 320px;
 }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

header {
  padding: 20px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.logo-and-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

nav a:hover {
  color: #0073e6;
}

main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: -10px;
}

.content {
  display: flex;
  width: 100%;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
}

/* Left Section Styles */
.left {
  flex: 1;
}

.left h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.left p {
  margin-bottom: 20px;
}

.button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 420px; /* 200px * 2 + 2px gap */
  justify-content: center;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #4E6A78;
  font-weight: bold;
  text-align: center;
  margin: 0;
  width: 200px;
  height: 60px;
  border-radius: 15px;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.card.active {
  border: 2px solid #ffd744;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: #ffd744 !important;
}

.card.active span {
  color: #ffd744 !important;
 }

.card span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFFFFF;
  font-size: 16px;
}




/* Card hover effects */
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}



/* Selection Info */
.selection-info {
  display: flex;
  align-items: center;
  margin-top: 19px;
  margin-left: 370px;
  font-size: 16px;
  color: #FFFFFF;
}

.selection-info.hidden {
  display: none;
}

.selection-info .arrow {
  width: 30px;
  height: auto;
  margin-top: 7px;
  margin-left: 10px;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

.selection-info .arrow:hover {
  transform: scale(1.3);
  filter: brightness(0.8);
}



/* Right Section Styles */
.right {
  flex: 1;
  text-align: center;
}

.sticky-radar {
  position: fixed;
  right: 6%;
  z-index: 10;
}

.right h2 {
  font-size: 24px;
  margin-bottom: 10px;
  margin-left: -18%;
}

/* Radar Circle */
.radar-container {
  position: relative;
  width: 690px;
  height: 690px;
  margin-top: 30px;
  left: -10%;
  background-color: #000000;
  border-radius: 50%;
  box-shadow: 0 0 15px rgb(0, 0, 0);
}

/* Concentric Circles with Gradient */
.circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.circle-2 { width: 90%; height: 90%; top: 5%; left: 5%; background-color: #f0f0f0; }
.circle-3 { width: 80%; height: 80%; top: 10%; left: 10%; background-color: #e2e2e2; }
.circle-4 { width: 70%; height: 70%; top: 15%; left: 15%; background-color: #cacaca; }
.circle-5 { width: 60%; height: 60%; top: 20%; left: 20%; background-color: #acabab; }
.circle-6 { width: 50%; height: 50%; top: 25%; left: 25%; background-color: #868686; }
.circle-7 { width: 40%; height: 40%; top: 30%; left: 30%; background-color: #707070; }
.circle-8 { width: 30%; height: 30%; top: 35%; left: 35%; background-color: #494949; }
.circle-9 { width: 20%; height: 20%; top: 40%; left: 40%; background-color: #2e2e2e; }
.circle-10 { width: 10%; height: 10%; top: 45%; left: 45%; background-color: #000000; }

/* Radar Lines */
.line-1 {
  position: absolute;
  background-color: #ffffff;
  width: 3px;
  height: 50%;
  left: 49.8%;
  top: 0;
  transform-origin: 50% 50%;
}
/* .line-2 {
  position: absolute;
  background-color: #ffffff;
  width: 3px;
  height: 100%;
  left: 50%;
  top: 0;
  transform-origin: 5% 50%;
} */
.line-2 {
  position: absolute;
  background-color: #ffffff;
  width: 3px;
  height: 100%;
  left: 50%;
  top: 0;
  transform-origin: 5% 50%;
}
.line-3 {
  position: absolute;
  background-color: #ffffff;
  width: 3px;
  height: 100%;
  left: 50%;
  top: 0;
  transform-origin: 5% 50%;
}

.line-1 { transform: rotate(0deg); }
/* .line-2 { transform: rotate(90deg); } */
.line-2 { transform: rotate(60deg); }
.line-3 { transform: rotate(120deg); }

/* TRL Labels */
.trl-label {
  position: absolute;
  text-align: center;
}
.trl-1 { bottom: 45%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 7px; font-weight: bold; }
.trl-2 { bottom: 40%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 12px; font-weight: bold; }
.trl-3 { bottom: 35%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 12px; font-weight: bold; }
.trl-4 { bottom: 30%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }
.trl-5 { bottom: 25%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }
.trl-6 { bottom: 20%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }
.trl-7 { bottom: 15%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }
.trl-8 { bottom: 10%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }
.trl-9 { bottom: 5%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 12px; font-weight: bold; }

/* Curved Text */
svg text {
  font-size: 15px;
  font-weight: bold;
  dominant-baseline: middle;
}
.text-red { fill: rgb(212, 106, 77); }
.text-blue { fill: rgb(151, 108, 137); }
.text-green { fill: rgb(204, 208, 98); }
.text-orange { fill: rgb(255, 215, 68); }
.text-selected-project { fill: #ffffff; }


/* Highlights */
.highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  border-radius: 43%;
  clip-path: polygon(50% 50%, 103% 0, 103% 100%, 50% 50%);
  z-index: 2;
  opacity: 0.5;
  margin-top: 139px;
}

.highlight.methods {
  background-color: rgba(212, 106, 77, 0.6); /* Red */
  transform: rotate(-180deg);
}

.highlight.materials {
  background-color: rgba(151, 108, 137, 0.6); /* Purple */
  transform: rotate(-120deg);
}

.highlight.manufacturing {
  background-color: rgba(204, 208, 98, 0.6); /* Green */
  transform: rotate(-60deg);
}

.highlight.miscellaneous {
  background-color: rgba(255, 215, 68, 0.6); /* Yellow */
  transform: rotate(-0deg);
}

.hidden {
  display: none;
}


/* Responsive Styles */
@media (max-width: 1024px) {
  .container {
    padding: 0 10px;
  }

  .card span {
    font-size: 20px;
  }

  .radar-container {
    width: 380px;
    height: 380px;
    left: auto;
    margin: 0 auto;
  }

  .highlight {
    height: 62%;
    margin-top: 74px;
    clip-path: polygon(50% 50%, 105% 0, 105% 100%, 50% 50%);
  }
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .left, .right {
    flex: 1 1 100%;
  }

  .button-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .card {
    height: 140px;
  }

  .card span {
    font-size: 18px;
    padding: 0 4px;
  }

  .radar-container {
    width: 300px;
    height: 300px;
  }

  .trl-label {
    font-size: 6px !important;
  }

  .text-section p,
  .left h2,
  .right h2 {
    font-size: 16px;
    text-align: center;
  }

  .selection-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .selection-info .arrow {
    margin-top: 10px;
  }

  .highlight {
    height: 62%;
    margin-top: 60px;
    clip-path: polygon(50% 50%, 105% 0, 105% 100%, 50% 50%);
  }
}

@media (max-width: 480px) {
  .card {
    height: 120px;
  }

  .card span {
    font-size: 16px;
  }

  .radar-container {
    width: 300px;
    height: 300px;
  }

  .trl-label {
    font-size: 4px !important;
  }

  .highlight {
    height: 74%;
    margin-top: 41px;
    clip-path: polygon(50% 50%, 115% 0, 115% 100%, 50% 50%);
  }
}