/* TTF Altshausen · Design für ThumbWheel (Logik/Aufbau unverändert aus thumbwheel.js; hier nur Farben, Schrift, Hinweis) */
html #tw-wheel { --tw-text: #e9e1cf; --tw-muted: #cfc4ad; --tw-panel: rgba(30, 28, 24, .96); --tw-line: rgba(232, 194, 106, .28);
  --tw-glow-in: #2d2a24; --tw-glow-out: #191713; --tw-dark: #1b1915;
  font-family: var(--display, "Archivo", "Arial Narrow", Arial, sans-serif); }
/* Haltering in TTF-Gold */
html #tw-hold { background: conic-gradient(#ffe29a, #e8b54e var(--tw-lpa), rgba(255, 255, 255, .12) var(--tw-lpa)); }
html #tw-wheel .tw-bg { background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(26, 24, 20, .45), rgba(14, 13, 11, .88) 280px); }
html #tw-wheel .tw-svg path.tw-seg { stroke: rgba(255, 240, 210, .08); }
html #tw-wheel .tw-wl .tw-wi { background: rgba(22, 20, 17, .78); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
html #tw-wheel .tw-wl .tw-wi .tw-txt { font: 800 14px/1 var(--display, "Archivo", sans-serif); letter-spacing: -.02em; }
html #tw-wheel .tw-wl span.tw-lab { font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
html #tw-wheel .tw-wl.tw-hi { color: #fff8e6; }
html #tw-wheel .tw-wl.tw-hi .tw-wi { border-color: #fff8e6; }
html #tw-wheel .tw-wl.tw-cur .tw-wi::after { background: #fff8e6; }
html #tw-wheel .tw-c { color: #d9cfb8; background: radial-gradient(circle at 50% 35%, rgba(255, 240, 210, .14), rgba(255, 240, 210, .03)); border-color: rgba(232, 194, 106, .35); }
html #tw-wheel .tw-title { box-shadow: 0 6px 22px rgba(0, 0, 0, .5); }
html #tw-wheel .tw-title b { color: #fff8e6; font-weight: 700; }
html #tw-wheel .tw-title span { color: #cfc4ad; }
html #tw-wheel .tw-hint { background: rgba(30, 28, 24, .94); }
@media (max-width: 360px) { html #tw-wheel .tw-hint { font-size: 10.5px; padding: 6px 10px; } }
/* Abschnitt leuchtet kurz in TTF-Gold auf */
html .tw-flash { animation: ttf-tw-flash 1.4s ease-out; }
@keyframes ttf-tw-flash { 0% { box-shadow: 0 0 0 2px #e8c26a, 0 0 24px rgba(232, 194, 106, .55) } 100% { box-shadow: 0 0 0 0 transparent } }
@media (prefers-reduced-motion: reduce) {
  html #tw-wheel .tw-ring, html #tw-wheel .tw-ring.tw-out { animation-duration: .01s; }
  html #tw-hold.tw-on { animation-timing-function: steps(1, end); }
  html .tw-flash { animation: none; outline: 2px solid #e8c26a; }
}
/* einmaliger Hinweis für Erstbesucher */
#qw-tip { position: fixed; left: 50%; bottom: calc(var(--dock-h, 70px) + env(safe-area-inset-bottom, 0px) + 14px); transform: translate(-50%, 12px); width: min(92vw, 360px);
  z-index: 2147482000; padding: 11px 14px; border-radius: 14px; background: rgba(30, 28, 24, .96); border: 1px solid rgba(232, 194, 106, .45); color: #efe7d4;
  font: 500 13.5px/1.35 var(--display, "Archivo", sans-serif); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .35s, transform .35s; }
#qw-tip.on { opacity: 1; transform: translate(-50%, 0); }
#qw-tip b { color: #e8c26a; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { #qw-tip { transition: none; } }