/* Circular Reveal „Drehscheibe“ — Ring dreht um CODARION, halb groß, unten rechts */
.hero-drehscheibe {
  position: absolute;
  right: clamp(0.5rem, 1.5vw, 1rem);
  bottom: clamp(0.5rem, 1.5vh, 1rem);
  z-index: 3;
  pointer-events: auto;
  line-height: 0;
}

.crh {
  --crh-face: #e8e2d8;
  --crh-shadow: #b8b0a4;
  --crh-highlight: #f7f3ec;
  --crh-ink: #3d3832;
  /* halb so groß wie zuvor (~300 → ~150) */
  --crh-size: clamp(110px, 11vw, 150px);
  position: relative;
  width: var(--crh-size);
  height: var(--crh-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--crh-face);
  box-shadow:
    8px 8px 18px rgba(0, 0, 0, 0.35),
    -6px -6px 14px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(214, 195, 163, 0.25);
  /* kein transform auf .crh — sonst kollidiert Float mit Kind-Rotation */
}

.crh__ring {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--crh-face);
  box-shadow:
    inset 4px 4px 8px var(--crh-shadow),
    inset -4px -4px 8px var(--crh-highlight);
  pointer-events: none;
}

.crh__ring--inner {
  inset: 8px;
  box-shadow:
    inset 3px 3px 6px var(--crh-shadow),
    inset -3px -3px 6px var(--crh-highlight);
}

/* CODARION bleibt fest in der Mitte */
.crh__center {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.crh__center-label {
  padding: 0.35rem 0.45rem;
  border-radius: 0.65rem;
  background: var(--crh-face);
  box-shadow:
    inset 2px 2px 4px var(--crh-shadow),
    inset -2px -2px 4px var(--crh-highlight);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(0.55rem, 0.7vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crh-ink);
  transition: opacity 0.3s ease;
  line-height: 1.1;
}

.crh.is-preview .crh__center-label {
  opacity: 0;
}

/* Nur der Text-Ring kreist um CODARION */
.crh__spin {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform-origin: 50% 50%;
  animation: crh-spin 22s linear infinite;
  will-change: transform;
}

.crh__spin svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.crh__spin text {
  cursor: pointer;
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: url(#crh-textGradient);
  transition: fill 0.25s ease;
}

.crh__spin text:hover,
.crh__spin text:focus {
  fill: #1c1917;
  outline: none;
}

.crh__overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.crh.is-preview .crh__overlay {
  opacity: 1;
}

.crh__overlay img {
  width: 72%;
  height: 72%;
  object-fit: cover;
  border-radius: 50%;
  filter: brightness(0.92);
  box-shadow: 0 0 0 1px rgba(214, 195, 163, 0.35);
}

.crh__preload {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@keyframes crh-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crh__spin {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .hero-drehscheibe {
    right: 0.5rem;
    bottom: 0.5rem;
  }

  .crh {
    --crh-size: 120px;
  }
}

@media (max-width: 900px) {
  .hero-drehscheibe {
    display: none;
  }
}