/* --- Layout --------------------------------------------------------- */
.tm-wrapper{position:fixed; bottom: -66px; left: 80px; display:block; width:400px; aspect-ratio:1/1; margin-inline:auto; transition: all 0.4s ease;}
.tm-inner{position:relative; width:100%; height:100%; border-radius:50%; overflow:visible;}

/* --- Dark blurred background behind tacho --- */
.tm-wrapper::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  z-index: -1;
  transition: all 0.4s ease;
}

/* --- Theme ---------------------------------------------------------- */
.tm-theme-dark{--tm-fg:#fff; --tm-bg:rgba(0,0,0,.35); --tm-accent:#e0322f; --tm-ring:#fff;}
.tm-theme-light{--tm-fg:#222; --tm-bg:rgba(255,255,255,.7); --tm-accent:#b00020; --tm-ring:#222;}

.tm-wrapper{color:var(--tm-fg);}
.tm-inner{background: radial-gradient(ellipse at center, var(--tm-bg), transparent 65%);}

/* --- Hintergrund ---------------------------------------------------- */
/* Optionaler Platzhalter-SVG (falls kein Bild genutzt wird) */
.tm-bg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; color:var(--tm-ring,#ffffff); z-index:0;}
/* Dein Speedo als Bild (perfekter Kreis) */
.tm-bg-img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; z-index:0;}

/* --- Items ---------------------------------------------------------- */
.tm-items{list-style:none; margin:0; padding:0; position:relative; width:100%; height:100%; z-index:1;}
.tm-item{position:absolute; transform:translate(-50%,-50%); transition:transform .2s ease;}
.tm-item a{display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--tm-fg);}
.tm-item .tm-icon{width:44px; height:44px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid currentColor; opacity:.95; margin-bottom:6px; background:rgba(0,0,0,.15); backdrop-filter:saturate(120%) blur(2px);}
.tm-item .tm-title{white-space:nowrap; background: rgba(0, 0, 0, 0.75); color: white; padding: 2px 8px; border-radius: 4px; backdrop-filter: blur(4px);}
.tm-item.is-active .tm-icon{box-shadow:0 0 0 3px rgba(255,255,255,.18), inset 0 0 0 1px var(--tm-accent); color:var(--tm-accent);}
.tm-icon:before{content:"✦"; font-size:18px;}

@media (max-width:520px){ .tm-item .tm-title{display:none;} }

/* --- Zentrum -------------------------------------------------------- */
.tm-center{position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); border-radius:999px; border:0px solid var(--tm-accent); width:0px; height:0px; background:transparent; cursor:pointer; color:var(--tm-accent); display:grid; place-items:center; z-index:3; transition: all 0.3s ease; opacity:0; pointer-events:none;}
.tm-center .tm-center-dot{display:block; width:0px; height:0px; border-radius:999px; background:var(--tm-accent); transition: all 0.3s ease;}
.tm-center .tm-center-label{position:absolute; top:calc(100% + 8px); white-space:nowrap; font-weight:0; color:var(--tm-fg); opacity:0;}

/* --- Minimize functionality --- */
.tm-wrapper.tm-minimized {
  width: 80px; /* 20% of 400px */
  height: 80px;
  bottom: 0px;
  left: 80px;
  margin: 0;
  opacity: 1;
  z-index: 999;
}

.tm-wrapper.tm-minimized:hover {
  width: 400px;
  height: 400px;
  bottom: -66px;
  left: 80px;
}

.tm-wrapper.tm-minimized::before {
  /* Hintergrund bleibt sichtbar und skaliert mit */
  transition: all 0.4s ease;
}

.tm-wrapper.tm-minimized .tm-inner {
  transition: all 0.4s ease;
}

.tm-wrapper.tm-minimized .tm-items {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tm-wrapper.tm-minimized:hover .tm-items {
  opacity: 1;
  pointer-events: auto;
}

.tm-wrapper.tm-minimized .tm-needle-svg,
.tm-wrapper.tm-minimized .tm-needle {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tm-wrapper.tm-minimized:hover .tm-needle-svg,
.tm-wrapper.tm-minimized:hover .tm-needle {
  opacity: 1;
}

.tm-wrapper.tm-minimized .tm-center {
  transform: translate(-50%,-50%) scale(1.5);
}

.tm-wrapper.tm-minimized .tm-center .tm-center-dot {
  transform: rotate(45deg);
}

/* --- Needle --------------------------------------------------------- */
/* 1) Externe Needle als Bild: identische ViewBox wie Speedo, nur linke Hälfte belegt.
      → Rotiert exakt um die Mitte, keine Translation nötig. */
/* Bild-Needle: gleiche Größe wie BG, rotiert um die Mitte, skalierbar */
.tm-needle-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  transform-origin:50% 50%;
  transform: scale(var(--ns,0.5)) rotate(var(--rot,0deg));
  transition: transform .35s ease, opacity .15s ease;
  will-change: transform;
  pointer-events:none;
  z-index:2;
  opacity:.001;
  max-width:100%;
  max-height:100%;
}
/* 2) Fallback-CSS-Nadel (falls kein Bild): neutral nach oben (0°) */
.tm-needle{position:absolute; inset:0; pointer-events:none; z-index:2;}
.tm-needle-arm{position:absolute; left:50%; top:50%; transform-origin:50% calc(100% - 2px); width:2px; height:45%; background:linear-gradient(currentColor, var(--tm-accent)); transform:translate(-50%,-100%) rotate(0deg); border-radius:2px;}
.tm-needle-pivot{position:absolute; left:50%; top:50%; width:14px; height:14px; transform:translate(-50%,-50%); border-radius:999px; background:var(--tm-accent); box-shadow:0 0 0 3px rgba(0,0,0,.25);}

/* --- A11y ----------------------------------------------------------- */
.tm-items[aria-hidden="true"]{pointer-events:none;}