/* .svgContainer { 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Optional: Set the height to fill the viewport */


.desktopOnly { display: block; }
.mobileOnly  { display: none;  }

@media (max-width: 768px) {
  .desktopOnly { display: none;  }
  .mobileOnly  { display: flex; flex-direction: column; align-items: center; }
}

/* ── Wheel Wrapper ── */
.wheelWrapper {
  width: 100%;
  padding: 2rem 0;
  overflow: hidden;
}

/* ── Das Rad ── */
.wheel {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  /* verhindert Überlauf der Segmente */
  touch-action: none;
  cursor: grab;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* wird per JS gesteuert */
}

/* ── Segmente (conic-gradient als Basis) ── */
.segment {
  --total: 6;                          /* Anzahl Segmente */
  --deg: calc(360deg / var(--total));  /* 60° pro Segment */

  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  /* Jedes Segment wird per clip-path zu einem Tortenstück */
  clip-path: polygon(
    50% 50%,
    50% 0%,
    100% 0%,
    100% 26.8%,  /* tan(30°) ≈ 0.577 → für 60°-Segmente */
    50% 50%
  );

  transform-origin: 50% 50%;
  transform: rotate(calc(var(--i) * var(--deg)));

  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1.5rem;

  transition: filter 0.3s;
}

/* Segmentfarben */
.segment:nth-child(1) { background: #5a2d82; }  /* Purple Tea  */
.segment:nth-child(2) { background: #3a7d44; }  /* Green Tea   */
.segment:nth-child(3) { background: #c96cff; }  /* Fermentation*/
.segment:nth-child(4) { background: #bd1e95; }  /* Farm Shop   */
.segment:nth-child(5) { background: #2d6a4f; }  /* Forest      */
.segment:nth-child(6) { background: #1d6fa4; }  /* Water Stream*/

/* Aktives Segment heller */
.segment.active {
  filter: brightness(1.3);
}

.label {
  font-size: 0.6rem;
  color: white;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl; /* Text läuft von Mitte nach außen */
  transform: rotate(180deg);
  pointer-events: none;
}

/* ── Info-Box ── */
.wheelInfo {
  margin-top: 2rem;
  padding: 1.2rem 1.5rem;
  background: #f2f2f2;
  border-radius: 12px;
  width: 85%;
  text-align: center;
  min-height: 100px;
  transition: opacity 0.3s;
}

.wheelInfo h4 {
  margin: 0 0 0.5rem;
  color: #5a2d82;
}

.wheelInfo p {
  margin: 0;
  font-size: 0.9rem;
  color: #333;
}