/* Team-Ring Über uns (2026-10-03): Berufsgruppen als drehender 3D-Ring.
 * Ohne JS: Karten als Raster. .is-ring = 3D-Ring (js/team-ring.js), .is-row = ruhige Wischreihe bei "Bewegung reduzieren". */
.tr { --tr-w: 224px; --tr-h: 200px; margin-top: 8px; }

/* Kennzahlen über dem Ring */
.tr-stats { display: flex; justify-content: center; gap: clamp(28px, 6vw, 72px); margin: 0 0 28px; padding: 0; list-style: none; }
.tr-stats li { display: flex; align-items: center; gap: 14px; }
.tr-stats strong { font-size: clamp(44px, 6vw, 68px); line-height: 1; letter-spacing: -.04em; color: #0b1c3d; }
.tr-stats span { font-size: 15px; line-height: 1.45; color: #475569; max-width: 22ch; }

/* Karte */
.tr-ring { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tr-w), 1fr)); gap: 14px; }
.tr-card { box-sizing: border-box; min-height: var(--tr-h); padding: 20px 18px; border: 1px solid #e3e8f0; border-radius: 18px; background: #fff; color: #0b1c3d; display: flex; flex-direction: column; gap: 6px; transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
.tr-ppl { display: block; width: 46px; height: 34px; margin-bottom: 8px; }
.tr-ppl svg { width: 100%; height: 100%; fill: currentColor; opacity: .85; }
.tr-card strong { font-size: 16.5px; line-height: 1.3; letter-spacing: -.01em; }
.tr-txt { font-size: 14px; line-height: 1.45; color: #475569; transition: color .4s ease; }

/* Steuerung */
.tr-ctrl { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.tr-ctrl[hidden] { display: none; }
.tr-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #cdd6e4; background: #fff; color: #0b1c3d; display: grid; place-items: center; cursor: pointer; padding: 0; }
.tr-btn svg { width: 18px; height: 18px; }
.tr-btn:disabled { opacity: .35; cursor: default; }
.tr-btn:focus-visible, .tr-stage:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
@media (hover: hover) {
  .tr-btn:not(:disabled):hover { background: #0b1c3d; color: #fff; border-color: #0b1c3d; }
}

/* 3D-Ring */
.tr.is-ring .tr-stage { position: relative; height: calc(var(--tr-h) + 40px); perspective: 1600px; overflow: hidden; touch-action: pan-y; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tr.is-ring .tr-stage.is-drag { cursor: grabbing; }
.tr.is-ring .tr-ring { display: block; position: absolute; left: 50%; top: 20px; width: var(--tr-w); height: var(--tr-h); margin-left: calc(var(--tr-w) / -2); transform-style: preserve-3d; }
.tr.is-ring .tr-card { position: absolute; inset: 0; height: var(--tr-h); backface-visibility: hidden; -webkit-backface-visibility: hidden; user-select: none; box-shadow: 0 8px 24px rgba(20,40,80,.06); }
.tr.is-ring .tr-card.is-front { background: #0b1c3d; border-color: #0b1c3d; color: #fff; }
.tr.is-ring .tr-card.is-front .tr-txt { color: rgba(255,255,255,.78); }

/* Wischreihe (Bewegung reduzieren) */
.tr.is-row .tr-ring { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.tr.is-row .tr-ring::-webkit-scrollbar { display: none; }
.tr.is-row .tr-card { flex: 0 0 var(--tr-w); min-height: 0; scroll-snap-align: start; }
.tr.is-row .tr-card:first-child { background: #0b1c3d; border-color: #0b1c3d; color: #fff; }
.tr.is-row .tr-card:first-child .tr-txt { color: rgba(255,255,255,.78); }

/* Kontaktleiste ohne die frühere +22-Spalte */
#team .ta-foot { grid-template-columns: 1fr; margin-top: 36px; }
#team .ta-foot .tm-contacts { padding: 28px 32px; }

@media (max-width: 760px) {
  .tr { --tr-w: 168px; --tr-h: 200px; }
  .tr-stats { justify-content: flex-start; flex-direction: column; gap: 14px; margin-bottom: 22px; }
  .tr-stats strong { min-width: 2.3em; }
  .tr-stats span { max-width: none; }
  .tr-card { padding: 16px 14px; }
  .tr-card strong { font-size: 15.5px; }
  .tr-txt { font-size: 13.5px; }
  .tr.is-row .tr-ring { margin: 0 -20px; padding: 2px 20px; scroll-padding-left: 20px; }
  .tr.is-row .tr-card { flex-basis: 66%; }
  #team .ta-foot .tm-contacts { padding: 26px 20px; }
}