/* Sylvia's Tattoo Studio · Beispielseite · Abschnitt „Haut → Tattoo“ (brennen.js) */
   Eigene Kopie des Freibrennen-Effekts der Startseite. Bewegung nur über transform/opacity, Hover nur bei Maus. */
.haut{background:var(--ink);padding-top:clamp(8px,2vw,24px)}
.haut .head{margin-bottom:40px}
.haut__win{margin:0;position:relative;border-radius:28px;overflow:hidden;background:#0b0a09;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(241,235,225,.08)}
.haut__stage{position:relative;aspect-ratio:1600/1000;background:#140d09;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.haut__stage img{display:block;width:100%;height:100%;object-fit:cover}
.haut__cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s cubic-bezier(.23,1,.32,1)}
.haut.is-live .haut__cv{opacity:1}
.haut.is-still .haut__cv{display:none}
@media (hover:hover) and (pointer:fine){.haut.is-live .haut__stage{cursor:crosshair}}

.haut__cap{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-top:18px;font-size:14.5px;color:var(--dim)}
.haut__hint{display:inline-flex;align-items:center;gap:10px;font:700 14px/1.4 var(--display);letter-spacing:.02em;color:var(--bone)}
.haut__hint::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(242,179,61,.14),0 0 12px rgba(242,179,61,.7)}
.haut__hint--still{display:none}
.haut.is-still .haut__hint--live{display:none}
.haut.is-still .haut__hint--still{display:inline-flex}
.haut__note{font-size:13.5px;opacity:.85}

@media (max-width:640px){
  .haut__stage{aspect-ratio:780/1120}
  .haut__win{border-radius:22px}
  .haut__cap{flex-direction:column;align-items:flex-start}
}
/* Am Handy/Tablet (ohne Maus) ganz weglassen (Tim 2.11.) */
@media not all and (hover: hover) and (pointer: fine) { #haut { display: none; } }