/* Original PNGs are used byte-for-byte. Cropping affects previews only. */
.product-shot{width:100%;min-width:0;margin:0 0 36px;text-align:left}
.hero-inner>.product-shot{margin:24px 0 0;width:100%}
.shot-frame{display:block;position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);cursor:zoom-in;transition:border-color .15s,box-shadow .15s}
.shot-frame:hover,.shot-frame:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px #32c4cb33;outline:2px solid var(--accent);outline-offset:3px}
.shot-frame img{display:block;width:100%;height:auto;max-width:none}
.shot-long .shot-frame{aspect-ratio:1.45}
.shot-long .shot-frame img{position:absolute;top:0;left:0;transform:translateY(-8%)}
.product-shot figcaption{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-top:16px;color:var(--muted);font-size:.875rem;line-height:1.65;min-height:110px}
.shot-description{display:flex;flex-direction:column;gap:5px;max-width:850px}.shot-description strong{font-size:1rem;color:var(--text)}.shot-description small{font-size:.75rem}
.shot-crop-note{display:none;color:var(--accent)}.shot-long .shot-crop-note{display:block}
.shot-actions{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}
.shot-control,.shot-tab{min-width:44px;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.shot-control:disabled{opacity:.45;cursor:default}.shot-control svg{width:19px;height:19px;vertical-align:middle;margin-right:7px}
.shot-control:hover:not(:disabled),.shot-tab:hover{border-color:var(--accent);background:var(--raised)}
.shot-tabs{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}.shot-tab[aria-selected=true]{border-color:var(--accent);background:#32c4cb1c;color:var(--accent)}
.shot-gallery{min-width:0}.shot-gallery [role=tabpanel]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.shot-review-note{padding:18px 22px;border-left:3px solid var(--accent);background:#32c4cb0d;color:var(--text);margin-bottom:28px}
#akten .features,#ki .features{gap:18px}#akten .card,#ki .card{padding:20px}#akten .card h3,#ki .card h3{font-size:1.2rem}
.shot-dialog{padding:0;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--text);width:min(96vw,1600px);height:94vh;height:94dvh;max-width:96vw;max-height:94dvh;overflow:hidden}
.shot-dialog[open]{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto}
.shot-dialog::backdrop{background:rgba(0,6,10,.93)}
.shot-dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.shot-dialog-toolbar h2{font-size:1rem;letter-spacing:0;line-height:1.4;margin:0;overflow-wrap:anywhere}
.shot-close{flex-shrink:0;border-color:var(--accent);color:var(--accent)}
.shot-dialog-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 16px}.shot-dialog-controls output{min-width:48px;text-align:center;font-size:.8rem;color:var(--muted)}
.shot-dialog-controls .shot-step{font-size:1.25rem;line-height:1;padding:8px 12px}
#shot-dialog-hint{font-size:.75rem;padding:0 16px 10px}
.shot-stage{overflow:auto;min-width:0;min-height:0;overscroll-behavior:contain;touch-action:none;cursor:grab;outline-offset:-3px;scrollbar-gutter:stable;user-select:none}
.shot-stage.is-dragging{cursor:grabbing}.shot-stage:focus-visible{outline:2px solid var(--accent)}
.shot-sheet{position:relative;min-width:100%}.shot-stage img{display:block;max-width:none;max-height:none;pointer-events:none}
.shot-dialog-footer{display:flex;justify-content:space-between;gap:12px;font-size:.75rem;padding:10px 16px;border-top:1px solid var(--line)}
@media(max-width:760px){
 .product-shot figcaption{flex-direction:column;min-height:180px;gap:14px;padding:0!important}.shot-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px}
 .shot-tabs{gap:8px}.shot-tab{flex:1 1 130px;text-align:center;padding:12px}
 .shot-frame,.shot-long .shot-frame{height:clamp(230px,76vw,330px);aspect-ratio:auto}
 /* Original PNG sidebar ends at x=350 of 2480 px. Align overview crops to this edge; centered case/AI content starts at x=624, with crop x=580 preserving its left padding. */
.shot-frame img{position:absolute;width:160%;top:0;left:0;transform:translate(-14.1129032258%,-2%)}
 .shot-case .shot-frame img{width:178%;left:0;transform:translate(-23.3870967742%,-51%)}
 .shot-long .shot-frame img{width:168%;left:0;transform:translate(-23.3870967742%,-8%)}
 .shot-crop-note{display:block}
 .shot-dialog{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 .shot-dialog-toolbar{padding:max(8px,env(safe-area-inset-top)) 10px 8px;gap:8px}
 .shot-dialog-toolbar h2{font-size:.9rem}.shot-dialog-controls{padding:8px 10px;gap:6px}
 .shot-dialog-controls .shot-control{padding:8px 10px}#shot-dialog-hint{padding:0 10px 8px;font-size:.7rem}
 .shot-dialog-footer{padding:8px 10px max(8px,env(safe-area-inset-bottom));font-size:.7rem;flex-wrap:wrap;gap:4px}
}
@media(prefers-reduced-motion:reduce){.shot-frame{transition:none}}


/* Each translated tab owns its complete touch target, including long labels. */
@media(max-width:760px){
 .shot-tabs{display:grid;grid-template-columns:minmax(0,1fr)}
 .shot-tab{width:100%;min-width:0;max-width:100%;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:auto;line-height:1.4;padding:14px 18px}
}