html, body { touch-action:none; overscroll-behavior:none; }
canvas { touch-action:none; }
#scene { position:fixed; inset:0; width:100%; height:100%; display:block; }
#labels { position:fixed; inset:0; pointer-events:none; z-index:6; }
#badge { z-index:40; font-size:11.5px; max-width:min(440px, calc(100vw - 32px)); text-align:center; }
body.theme-dark #badge { color:#e6e8f2; }
body.theme-light #badge { color:#1e293b; }

/* Eck-Positionen (Bottom-Panels über dem Dock bei 78px) */
#panel-weg { top:16px; left:16px; width:300px; }
#panel-teil { top:16px; right:16px; width:310px; }
#panel-ansicht { bottom:78px; left:16px; width:300px; }
#panel-info { left:50%; right:auto; bottom:64px; transform:translateX(-50%); width:460px; }
.panel { touch-action:pan-y; }
.panel p + p { margin-top:8px; }
.panel .hint { margin-top:8px; }
.panel .hint.small, .panel .small { font-size:10.5px; opacity:.62; }
.panel button { min-width:0; overflow-wrap:break-word; }
.panel .seg { flex-wrap:wrap; }
.panel .seg button { white-space:normal; line-height:1.15; flex:1 1 auto; }
.panel .act { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px; padding:8px 12px; }
.panel .act svg { width:14px; height:14px; flex:0 0 auto; }
body.is-playing .ic-play, body:not(.is-playing) .ic-pause { display:none; }
.panel .check { min-height:24px; font-size:11px; }
.panel .stat { font-size:11.5px; }
.panel .stat b.txt { font-family:inherit; font-weight:650; text-align:right; max-width:62%; }

/* Sekretweg */
#ph-row { justify-content:flex-start; align-items:baseline; gap:10px; }
#ph-num { font-size:22px; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:.01em; flex:0 0 auto; }
#ph-name { font-size:12.5px; font-weight:650; line-height:1.25; }
.tl-row { margin-top:8px; }
.tl-row input[type="range"] { flex:1; min-width:0; }
#ph-seg { margin-top:8px; }
#ph-seg button { flex:1 1 0; padding:5px 0; font-variant-numeric:tabular-nums; font-weight:700; }
#ph-text { min-height:6.2em; }
#row-follow { margin-top:10px; }
#route-legend { display:flex; flex-wrap:wrap; gap:5px 12px; font-size:10.5px; margin-top:10px; opacity:.85; }
#route-legend > span { display:inline-flex; align-items:center; gap:6px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--dot, currentColor); flex:0 0 auto; }
.dot.big { width:11px; height:11px; }

/* Organell */
#pt-head { display:flex; align-items:center; gap:9px; }
#pt-name { font-size:14px; font-weight:700; line-height:1.25; }
#pt-sizes { margin-top:8px; }
#pt-text { min-height:4em; }
#pt-list { margin-top:2px; }
#pt-list button { flex:1 1 auto; font-size:10.5px; padding:5px 8px; }

/* Ansicht */
.cut-row { margin-top:6px; gap:10px; }
.cut-row input[type="range"] { flex:1; min-width:0; }
#row-cut.off .cut-row { opacity:.4; pointer-events:none; }
#view-seg button { font-size:11px; }
#layers { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; }
#layers .check span { line-height:1.2; }
.toggles { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; }

/* Beschriftungen an der Szene */
.tag { position:absolute; padding:4px 8px; border-radius:7px; font:600 11px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; white-space:nowrap; transform:translate(-50%,-50%); transition:opacity .2s; }
body.theme-dark .tag { background:rgba(10,13,26,.74); color:#e6e8f2; }
body.theme-light .tag { background:rgba(255,255,255,.9); color:#1e293b; }
.tag.sel { font-weight:750; }
body.theme-dark .tag.sel { background:rgba(40,66,90,.92); color:#dbe9f7; }
body.theme-light .tag.sel { background:#dce8f3; color:#2c5a87; }
.tag.hero { font-weight:700; }
.tag.small { font-size:10px; padding:3px 6px; opacity:.9; }

@media(max-width:768px) {
  #panel-weg,#panel-teil,#panel-ansicht,#panel-info { width:auto; max-height:56vh; }
  .tag { font-size:9.5px; padding:3px 6px; }
  #ph-text, #pt-text { min-height:0; }
}
/* Scrollbalken wie heyprof global — für JEDEN Scroll-Container. */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; }
  body.theme-light { scrollbar-color: rgba(0,0,0,0.15) transparent; }
  body.theme-dark  { scrollbar-color: rgba(255,255,255,0.15) transparent; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.panel::-webkit-scrollbar-track { margin: 15px 0; }
::-webkit-scrollbar-thumb { border-radius: 4px; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
body.theme-light ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.15); }
body.theme-light ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.30); }
body.theme-dark  ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.15); }
body.theme-dark  ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.30); }
html::-webkit-scrollbar-thumb { background-color: rgba(127,127,160,0.35); }