/* =====================================================================
   KUCKUCKSUHR-PORTFOLIO — Referenzen (#projekte)
   Schwarzwälder Zifferblatt als maus-gesteuerte Portfolio-Navigation.

   Zustände, vom robustesten zum reichsten:
   1. Ohne JS → Zifferblatt statisch + Fallback-Linkliste (.ck-fallback).
   2. Mit JS  → .is-interactive: Hover/Fokus/Tap auf eine Projekt-Ziffer
                dreht den Zeiger flüssig dorthin (CSS-Transition) und
                blendet das Projekt-Label ein; Klick öffnet das Projekt.
   prefers-reduced-motion: Zeiger springt ohne Transition, kein Puls.
   ===================================================================== */

.ck { position: relative; overflow-x: clip; }

/* Kopftext nah über der Uhr */
#projekte .section-head.center { margin-bottom: clamp(1rem, 2vw, 1.6rem); }

/* ---------- Bühne ---------- */
.ck-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding-block: 1rem;
}

/* Ruhiger, warmer Lichtkegel hinter der Uhr — bindet das Zifferblatt
   an den dunklen Waldton der Seite. */
.ck-stage::before {
  content: "";
  /* Seitlich BUENDIG (inset-inline: 0) statt -12%: der fruehere horizontale
     Ueberstand ragte auf schmalen Displays ueber den Viewport hinaus und
     machte die Seite seitlich verschiebbar. Der Radius ist mit 74.4% statt
     60% exakt gegengerechnet (60% von 124% Breite = 74.4% von 100%), der
     Lichtkegel sieht deshalb unveraendert aus. */
  position: absolute; inset: -8% 0;
  pointer-events: none;
  background: radial-gradient(ellipse 74.4% 54% at 50% 42%,
              rgba(62, 36, 12, .5), rgba(22, 17, 12, 0) 68%);
}

/* ---------- Zifferblatt + Overlays ---------- */
.ck-dial-wrap {
  position: relative;
  width: min(86vw, 56vh, 600px);
  width: min(86vw, 56svh, 600px);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 50%;
}

.ck-dial {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  /* Rundes Freistellen + weicher Übergang in den Grund */
  box-shadow: 0 0 0 1px rgba(198, 161, 91, .18),
              0 34px 90px -30px rgba(0, 0, 0, .75),
              0 0 70px -10px rgba(122, 72, 20, .35);
}

/* Mitte beruhigen: die im Bild eingebackenen Deko-Zeiger treten zurück,
   der animierte Messing-Zeiger wird zum funktionalen Zeiger. */
.ck-center-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(14, 9, 5, .58) 0%,
              rgba(14, 9, 5, .42) 17%,
              rgba(14, 9, 5, 0) 30%);
}

/* ---------- Zeiger ---------- */
.ck-hand {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .6));
  transform-origin: 50% 50%;
  will-change: transform;
  /* Mechanisch gedämpfte Drehung zur gewählten Ziffer:
     back-out-artige Kurve mit leichtem Overshoot. */
  transition: transform .8s cubic-bezier(.34, 1.35, .64, 1);
}

/* ---------- Projekt-Hotspots auf den Ziffern ---------- */
.ck-spots { position: absolute; inset: 0; }
.ck-spot {
  position: absolute;
  /* left/top je Ziffer setzt JS aus der NUMERALS-Tabelle (Zentrum auf
     der Glyphe); die Ringgröße ist für ALLE Ziffern identisch
     (SPOT_D in kuckucksuhr.js, Referenz = XII-Ring). */
  width: max(44px, var(--ck-spot-d, 18.9%));
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ck-spot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Dauerhafte, dezente Markierung: Ziffern MIT Projekt sind auch ohne
   Hover/aktive Auswahl als klickbar erkennbar (Touch!). */
.ck-spot::before {
  content: "";
  position: absolute; inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(218, 189, 133, .34);
  background: radial-gradient(circle, rgba(218, 189, 133, .1), rgba(218, 189, 133, 0) 68%);
  opacity: .55;
  transition: opacity .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
/* Kleiner Indikator-Punkt unterhalb der Ziffer */
.ck-spot::after {
  content: "";
  position: absolute; left: 50%; bottom: -4%;
  width: 5px; height: 5px;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: var(--gold-soft);
  opacity: .5;
  transition: opacity .4s var(--ease), box-shadow .4s var(--ease);
}

.ck-spot:hover::before,
.ck-spot:focus-visible::before {
  opacity: .95;
  border-color: rgba(218, 189, 133, .65);
}

/* Aktive Ziffer: warmer Glut-Ring, ruhig atmend — kein Neon. */
.ck-spot.is-active::before {
  opacity: 1;
  border-color: rgba(218, 189, 133, .85);
  box-shadow: 0 0 22px rgba(198, 141, 61, .4),
              inset 0 0 18px rgba(198, 141, 61, .22);
  animation: ckBreathe 3.2s ease-in-out infinite;
}
.ck-spot.is-active::after {
  opacity: .95;
  box-shadow: 0 0 8px rgba(218, 189, 133, .8);
}
@keyframes ckBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* Hover-Tooltip (nur Zeigegeräte): Projektname unter der Ziffer */
.ck-spot .ck-spot-name {
  position: absolute; left: 50%; top: 106%;
  transform: translate(-50%, 0);
  white-space: nowrap;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  text-indent: .08em; /* optischer Zentrier-Ausgleich, s. .ck-kicker */
  color: var(--gold-soft);
  background: rgba(16, 12, 8, .82);
  border: 1px solid rgba(198, 161, 91, .3);
  border-radius: var(--r-pill);
  padding: .22rem .6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .ck-spot:hover .ck-spot-name,
  .ck-spot:focus-visible .ck-spot-name { opacity: 1; }
}

/* ---------- Projekt-Label / Info ---------- */
.ck-info {
  position: relative;
  min-height: 8.6rem;
  max-width: 30rem;
  padding-inline: var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.ck-info .ck-kicker {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  /* Optischer Ausgleich: letter-spacing hängt hinter dem letzten
     Zeichen — ohne Indent wirkt die zentrierte Zeile leicht links. */
  text-indent: .16em;
  color: var(--gold);
  margin-bottom: .45rem;
}
.ck-info .ck-name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 600; line-height: 1.12;
  color: var(--on-dark);
}
.ck-info .ck-sub {
  font-size: .9rem; color: var(--on-dark-muted);
  margin-top: .3rem;
  text-wrap: balance;
}
.ck-info .ck-link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .7rem;
  font-size: .84rem; font-weight: 600;
  letter-spacing: .03em;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 161, 91, .4);
  padding-bottom: .1rem;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.ck-info .ck-link:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.ck-info .ck-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Referenzplätze-Hinweis ----------
   Eigene Box UNTER der Bühne, bewusst nicht Teil von .ck-info: das
   Info-Panel wird bei jedem Ziffern-Hover geleert und neu aufgebaut.
   Nur bestehende Tokens (--ink-1, --line-gold, --r, --gold-soft) —
   an der Uhr selbst ändert sich nichts. */
.ck-offer {
  /* .ck ist bewusst full-bleed (kein .container) — die Box braucht deshalb
     ihre eigene Seitenluft, sonst klebt der Rahmen am Displayrand. */
  width: calc(100% - 2 * var(--gutter));
  max-width: 30rem;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--line-gold);
  border-radius: var(--r);
  background: var(--ink-1);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.ck-offer .ck-offer-text {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--gold-soft);
  text-wrap: balance;
}

/* ---------- Bedien-Hinweis (je Eingabeart passender Text) ---------- */
.ck-hint {
  text-align: center;
  font-size: .78rem; letter-spacing: .04em;
  text-indent: .04em; /* optischer Zentrier-Ausgleich, s. .ck-kicker */
  color: var(--on-dark-muted);
}
.ck-hint-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .ck-hint-hover { display: none; }
  .ck-hint-touch { display: inline; }
}

/* ---------- Fallback-Liste (ohne JS sichtbar; sonst versteckt) ---------- */
.ck-fallback {
  list-style: none;
  padding: 0;
  margin: 1.6rem auto 0;
  max-width: 30rem;
  display: flex; flex-direction: column; gap: .55rem;
  text-align: center;
}
.ck-fallback a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 161, 91, .4);
}
.ck-fallback a:hover { color: var(--gold-soft); }
.ck.is-interactive .ck-fallback { display: none; }

/* Sehr niedrige Viewports (Landscape-Handys): Uhr etwas kleiner,
   damit Zifferblatt + Label gemeinsam sichtbar bleiben. */
@media (max-height: 620px) {
  .ck-dial-wrap { width: min(86vw, 48vh, 600px); width: min(86vw, 48svh, 600px); }
  .ck-info { min-height: 6.6rem; }
}

/* Reduced Motion: Zeiger springt, kein Puls */
@media (prefers-reduced-motion: reduce) {
  .ck-hand { transition: none; }
  .ck-spot.is-active::before { animation: none; }
}