/* HP30 – dezente Bildhinweise und direkter Bildklick. */
html:root body .hp30-image-frame{position:relative;min-width:0}
html:root body div.hp30-image-frame:not(.selected-scene):not(.ratgeber-v13-image){display:block;width:100%;line-height:0}
html:root body .hp30-image-frame>img{display:block}
html:root body .hp30-image-frame>.hp30-ai-note{
 position:absolute!important;inset:auto auto 12px 12px!important;z-index:3!important;
 display:block!important;width:max-content!important;max-width:calc(100% - 24px)!important;
 margin:0!important;padding:3px 8px!important;border:0!important;border-radius:20px!important;
 background:rgba(128,128,128,.10)!important;color:#183b43!important;
 font:400 .6875rem/1.4 Inter,system-ui,sans-serif!important;letter-spacing:0!important;
 text-transform:none!important;text-align:left!important;white-space:normal!important;
 opacity:1!important;visibility:visible!important;pointer-events:none!important;
 text-shadow:0 0 2px #fff,0 0 3px #fff,0 1px 2px #fff!important;
 -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)
}
/* Abstand von organischen Bildrändern, ohne die Originalausschnitte zu ändern. */
html:root body :is(.selected-scene,.ratgeber-v13-image)>.hp30-ai-note{left:7%!important;bottom:6%!important;max-width:86%!important}
html:root body .why-emotion .hp30-ai-note{bottom:20px!important}
html:root body .hp30-image-context{font-size:.8125rem!important;line-height:1.5!important;margin:7px 0 0!important;color:var(--site-muted,#4f6571)!important}
html:root body .coach-scene-open{cursor:zoom-in}
html:root body .coach-scene-open:hover{transform:none}
html:root body .hp30-zoom-viewport{overflow:auto;min-height:0;max-height:calc(94dvh - 82px);overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
html:root body .hp30-zoom-viewport>img{display:block;width:100%;height:auto;max-height:calc(94dvh - 82px);object-fit:contain}
@media(max-width:767px){
 html:root body .coach-image-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:12px}
 html:root body .coach-image-toolbar{gap:10px}
 html:root body .coach-image-toolbar p{font-size:.75rem}
 html:root body .hp30-zoom-viewport{flex:1;max-height:none;overflow:auto}
 html:root body .hp30-zoom-viewport>img{width:720px;max-width:none;max-height:none;height:auto;object-fit:initial}
}
/* Android-Tablet: Header ohne eigene GPU-Transformation am Viewport halten.
   Nur die gemeldete Coach-Seite erhält diese Absicherung. */
html:root body[data-page="coach"] .tan-header{
 position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;
 transform:none!important;-webkit-transform:none!important;translate:none!important;
 backface-visibility:visible!important;-webkit-backface-visibility:visible!important;
 overflow:visible!important;height:auto!important
}
html:root body[data-page="coach"]{padding-top:var(--hp24-header-height,82px)!important}
