:root {
  --topic-wheel-default-width: 1300px;
  --topic-wheel-default-height: 760px;
}


/* =========================================================
   JEDE INSTANZ IST VOLLSTÄNDIG GEKAPSELT
   ========================================================= */

.topic-wheel {
  --wheel-width: var(--topic-wheel-default-width);
  --wheel-height: var(--topic-wheel-default-height);

  --ring-size: 330px;
  --core-size: 220px;

  --card-width: 380px;
  --card-min-height: 160px;

  --card-border: #45677d;
  --card-title-color: #111111;
  --card-text-color: #ffffff;
  --card-radius: 15px;

  --active-card-scale: 1.10;
  --active-title-scale: 1.10;
  --active-text-scale: 1.07;

  position: relative;

  width: min(100%, var(--wheel-width));
  height: var(--wheel-height);

  margin: 40px auto;

  box-sizing: border-box;
}


/* =========================================================
   MITTELKREIS
   ========================================================= */

.topic-wheel .topic-wheel-center {
  position: absolute;

  left: 50%;
  top: 50%;

  width: var(--ring-size);
  height: var(--ring-size);

  transform: translate(-50%, -50%);

  z-index: 5;
}


.topic-wheel .topic-ring {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;
}


/* =========================================================
   KERNSCHEIBE
   ========================================================= */

.topic-wheel .topic-core {
  position: absolute;

  left: 50%;
  top: 50%;

  width: var(--core-size);
  height: var(--core-size);

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  padding: 25px;

  border-radius: 50%;

  background: var(--core-background, #315f70);
  color: var(--core-color, #ffffff);

  text-align: center;

  font-size: var(--core-font-size, 22px);
  font-weight: 700;
  line-height: 1.3;

  z-index: 5;
}


/* =========================================================
   PFEIL
   ========================================================= */

.topic-wheel .topic-arrow-orbit {
  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 20;

  transform-origin: center center;
}


.topic-wheel .topic-arrow {
  position: absolute;

  left: 50%;
  top: var(--arrow-offset, -18px);

  width: 0;
  height: 0;

  transform:
    translateX(-50%)
    rotate(90deg);

  border-left: var(--arrow-half-width, 14px) solid transparent;
  border-right: var(--arrow-half-width, 14px) solid transparent;
  border-bottom:
    var(--arrow-height, 27px)
    solid
    var(--arrow-color, #c98726);

  transition:
    border-bottom-color 0.25s ease;
}


/* =========================================================
   KARTEN
   ========================================================= */

.topic-wheel .topic-card {
  position: absolute;

  width: var(--card-width);
  min-height: var(--card-min-height);

  box-sizing: border-box;

  padding: 26px 28px 24px 80px;

  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);

  background:
    var(
      --item-card-background,
      #8ba5bc
    );

  box-shadow:
    0 16px 35px
    rgba(0, 0, 0, 0.12);

  color: var(--card-text-color);

  text-decoration: none;

  transform:
    translate(-50%, -50%)
    scale(var(--card-scale, 1));

  transform-origin: center;

  transition:
    transform 0.40s ease,
    box-shadow 0.40s ease,
    filter 0.40s ease;

  z-index: 2;
}


.topic-wheel .topic-card:hover {
  --card-scale: 1.04;

  box-shadow:
    0 22px 42px
    rgba(0, 0, 0, 0.18);
}


.topic-wheel .topic-card.active {
  --card-scale: var(--active-card-scale);

  box-shadow:
    0 25px 50px
    rgba(0, 0, 0, 0.22);

  z-index: 30;
}


/* =========================================================
   TITEL UND TEXT
   ========================================================= */

.topic-wheel .topic-card h3 {
  margin: 0 0 10px 0;

  color:
    var(
      --item-title-color,
      var(--card-title-color)
    );

  font-size:
    var(
      --item-title-font-size,
      20px
    );

  line-height: 1.25;

  transform-origin: left center;

  transition:
    transform 0.40s ease;
}


.topic-wheel .topic-card.active h3 {
  transform: scale(var(--active-title-scale));
}


.topic-wheel .topic-card p {
  margin: 0;

  color:
    var(
      --item-text-color,
      var(--card-text-color)
    );

  font-size:
    var(
      --item-text-font-size,
      16px
    );

  line-height: 1.6;

  font-weight: 600;

  transform-origin: left top;

  transition:
    transform 0.40s ease;
}


.topic-wheel .topic-card.active p {
  transform: scale(var(--active-text-scale));
}


/* =========================================================
   NUMMER
   ========================================================= */

.topic-wheel .topic-number {
  position: absolute;

  left: 20px;
  top: 24px;

  width: 49px;
  height: 49px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    var(
      --item-number-background,
      #c98726
    );

  color:
    var(
      --item-number-color,
      #ffffff
    );

  font-size: 21px;
  font-weight: 700;

  transition:
    transform 0.40s ease;
}


.topic-wheel .topic-card.active .topic-number {
  transform: scale(1.15);
}


/* =========================================================
   FEHLER
   ========================================================= */

.topic-wheel.topic-wheel-error {
  height: auto;

  padding: 20px;

  border: 1px solid #b94a48;
  border-radius: 10px;

  background: #fff5f5;
  color: #7a1f1d;

  font-family: sans-serif;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1000px) {

  .topic-wheel {
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 22px;

    padding: 20px;
  }


  .topic-wheel .topic-wheel-center {
    position: relative;

    left: auto;
    top: auto;

    transform: none;

    margin-bottom: 20px;
  }


  .topic-wheel .topic-card {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    width: min(100%, 600px);

    transform:
      scale(
        var(--card-scale, 1)
      );
  }


  .topic-wheel .topic-card.active {
    --card-scale: 1.03;
  }

}


@media (max-width: 500px) {

  .topic-wheel {
    --ring-size: 280px;
    --core-size: 180px;
  }


  .topic-wheel .topic-core {
    font-size: 18px;
  }


  .topic-wheel .topic-card {
    padding:
      22px
      20px
      22px
      72px;
  }


  .topic-wheel .topic-number {
    width: 43px;
    height: 43px;

    left: 16px;
    top: 20px;
  }

}