/* =========================================================
   Dimensionen-Ring fuer ki-management.html
   Basis: Kartenreihe mit Scroll-Snap, laeuft ohne JavaScript
   Ausbau: nach hinten gekippter 3D-Ring ab 900px, JS setzt .dimring--3d
   Farben und Schriften kommen aus style.css (Design-System)
   Selektoren bewusst doppelt geklasst: sie muessen die
   globalen nav- und .prose-ul-Regeln aus style.css schlagen
   ========================================================= */

/* nav-Element erbt sonst display:flex und height:74px von der Kopfnavigation */
nav.dimring{display:block;height:auto;margin:64px 0 6px;scroll-margin-top:90px}

/* Sprungziele: Ueberschrift nicht unter der festen Navigation verstecken */
.dimdetail[id]{scroll-margin-top:96px}

/* ---------- Basis: Kartenreihe (alle Geraete, ohne JS, reduzierte Bewegung) ---------- */
.dimring .dimring-list{list-style:none;margin:0;padding:4px 2px 18px;max-width:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;-webkit-overflow-scrolling:touch}
.dimring .dimring-karte{flex:0 0 242px;display:flex;position:relative;padding-left:0;margin-bottom:0;scroll-snap-align:center}
.dimring .dimring-karte::before{content:none}
.dimring .dimring-karte a{display:flex;flex-direction:column;flex:1;padding:22px 20px 18px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg,var(--surface),rgba(0,0,0,.18));transition:border-color .25s,transform .2s}
.dimring .dimring-karte a:hover{border-color:var(--copper-deep);transform:translateY(-2px)}
.dimring .dimring-nr{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--copper)}
.dimring .dimring-name{font-family:'Fraunces',Georgia,serif;font-size:21px;font-weight:500;line-height:1.15;color:var(--silver);margin:12px 0 8px}
.dimring .dimring-hinweis{font-size:13.5px;line-height:1.5;color:var(--muted);flex:1}
.dimring .dimring-mehr{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--copper-bright);margin-top:14px}
.dimring .dimring-rueck{display:none}

/* ---------- Ausbau: gekippter 3D-Ring (nur mit JS-Klasse, ab 900px) ---------- */
@media (min-width:900px){
  .dimring--3d{--karte-b:232px;--karte-h:296px;--ring-r:295px;--winkel:51.4286deg}

  .dimring--3d .dimring-buehne{position:relative;perspective:1150px;height:calc(var(--karte-h) + 150px);display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
  .dimring--3d .dimring-buehne:active{cursor:grabbing}

  /* Kupfer-Glow als Boden unter dem Ring */
  .dimring--3d .dimring-buehne::after{content:"";position:absolute;left:50%;bottom:0;width:min(760px,85%);height:130px;transform:translateX(-50%);background:radial-gradient(55% 100% at 50% 100%,rgba(217,143,78,.14),transparent 72%);pointer-events:none}

  /* Neigung nach hinten: fast gerade, nur ein Hauch Kippung */
  .dimring--3d .dimring-kipp{transform:rotateX(6deg);transform-style:preserve-3d}

  .dimring--3d .dimring-list{display:block;overflow:visible;position:relative;width:var(--karte-b);height:var(--karte-h);padding:0;transform-style:preserve-3d;transform:rotateY(var(--drehung,0deg));transition:transform .55s cubic-bezier(.22,.9,.3,1);scroll-snap-type:none}
  .dimring--3d .dimring-list.greift{transition:none}

  .dimring--3d .dimring-karte{position:absolute;inset:0;flex:none;transform:rotateY(calc(var(--i) * var(--winkel))) translateZ(var(--ring-r));transform-style:preserve-3d}
  /* Karten-Animation erst nach dem ersten Aufbau, sonst klappt der Ring beim Laden sichtbar auf */
  .dimring--3d.bereit .dimring-karte{transition:transform .5s cubic-bezier(.22,.9,.3,1)}
  /* die vordere Karte kommt ein Stueck aus dem Ring heraus */
  .dimring--3d .dimring-karte.ist-vorn{transform:rotateY(calc(var(--i) * var(--winkel))) translateZ(calc(var(--ring-r) + 30px))}
  /* waehrend des Ziehens keine Einzelanimationen, sonst ruckelt es */
  .dimring--3d .dimring-list.greift .dimring-karte{transition:none;transform:rotateY(calc(var(--i) * var(--winkel))) translateZ(var(--ring-r))}

  /* Seitenkarten abdunkeln statt transparent machen, sonst scheinen die Rueckseiten durch */
  .dimring--3d .dimring-karte a{backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-user-drag:none;background:linear-gradient(180deg,var(--surface),var(--bg-2));filter:brightness(.6) saturate(.9);transition:border-color .3s,filter .3s,box-shadow .3s}
  .dimring--3d .dimring-karte a:hover{transform:none}
  .dimring--3d .dimring-karte.ist-vorn a{filter:none;border-color:var(--copper-deep);box-shadow:0 0 0 1px rgba(217,143,78,.15),0 34px 90px -40px rgba(0,0,0,.85)}

  /* Rueckseite: nur die Nummer, kein gespiegelter Text */
  .dimring--3d .dimring-rueck{display:flex;position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg,var(--surface),var(--bg-2));font-family:'Fraunces',Georgia,serif;font-size:46px;color:var(--copper-deep)}
}