/* FXCHS V3.31: the fox creates the wordmark inside the header, not over
   the page; calm SoundCloud drawer; accessible lettering over 360 imagery. */

/* Header-only footprint ident: the actual logo is the final resting frame. */
body.fxv2 .fxv2-header .fxv2-logo{
  position:relative!important;isolation:isolate;overflow:visible!important;
}
body.fxv2 .fxv2-header .fxv2-logo>.fxv329-brand{position:relative;z-index:1}
body.fxv2 .fxv2-header .fxv331-header-trail{
  position:absolute;z-index:2;inset:0;display:block;
  pointer-events:none;overflow:visible;
}
body.fxv2 .fxv2-header .fxv331-header-trail i{
  position:absolute;display:block;
  left:var(--v331-step-x,12%);top:var(--v331-step-y,50%);
  width:clamp(13px,1.42vw,19px);height:clamp(13px,1.42vw,19px);
  background:url('/assets/fox-paw-source.svg?v=3.31-horizontal-paw') center/contain no-repeat;
  transform:translate(-50%,-50%) rotate(var(--v331-step-angle,90deg));
  transform-origin:50% 50%;opacity:0;
}
html.fxv331-header-intro-pending body.fxv2 .fxv2-header .fxv329-brand{opacity:0}
body.fxv2 .fxv2-header.fxv331-ident-running .fxv331-header-trail i{
  animation:fxv331-step-appears 1.65s ease-out both;
  animation-delay:var(--v331-step-delay,0s);
}
body.fxv2 .fxv2-header.fxv331-ident-running .fxv329-brand-paw{
  animation:fxv331-emblem-becomes-visible 4.4s ease-out both;
}
body.fxv2 .fxv2-header.fxv331-ident-running .fxv329-brand-type{
  animation:fxv331-letters-follow-trail 4.4s linear both;
}
@keyframes fxv331-step-appears{
  0%,9%{opacity:0;scale:.9;filter:blur(.9px)}
  17%,53%{opacity:.80;scale:1;filter:none}
  100%{opacity:0;scale:1;filter:none}
}
@keyframes fxv331-letters-follow-trail{
  0%,19%{clip-path:inset(0 100% 0 0);opacity:1}
  35%{clip-path:inset(0 80% 0 0)}
  51%{clip-path:inset(0 56% 0 0)}
  68%{clip-path:inset(0 28% 0 0)}
  86%,100%{clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes fxv331-emblem-becomes-visible{
  0%,18%{opacity:0;transform:scale(.85)}
  34%,100%{opacity:1;transform:none}
}
/* The legacy background paws are independent decorative loops. They would
   mislead the eye while the new left-to-right route is drawing the logo. */
body.fxv2 .fxv2-header .fxv2-header-foxpath{display:none!important}
/* No roaming paw overlay in the menu, footer or the document itself. */
body.fxv2 .fxv323-fox-layer{display:none!important}
@media(max-width:760px){
  body.fxv2 .fxv2-header .fxv331-header-trail i{width:14px;height:14px}
}
@media(prefers-reduced-motion:reduce){
  body.fxv2 .fxv2-header .fxv331-header-trail i{animation:none!important;opacity:0!important}
  body.fxv2 .fxv2-header .fxv329-brand :is(.fxv329-brand-paw,.fxv329-brand-type){
    animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;
  }
}

/* SoundCloud: a compact listening drawer attached to the upper left. The
   selected track and controls are above the scrollable collection. */
body.fxv2 .fxv2-header .fxv318-music-panel{
  box-sizing:border-box!important;display:flex;flex-direction:column;
  gap:8px!important;min-width:0!important;
  width:min(365px,calc(100vw - 24px))!important;
  max-height:min(580px,calc(100dvh - var(--v2-header-height,76px) - var(--v2-footer-height,42px) - 12px))!important;
  padding:15px!important;overflow-y:auto!important;overflow-x:hidden!important;
  border:1px solid #6a9279!important;border-radius:12px!important;
  background:#101f17f8!important;color:#f6fff6!important;
  box-shadow:0 20px 55px #0009!important;backdrop-filter:none!important;
}
body.fxv2 .fxv2-header .fxv318-music-panel[hidden]{display:none!important}
body.fxv2 .fxv318-music-panel>.fxv318-music-heading{order:0;margin:0 0 4px!important;min-width:0}
body.fxv2 .fxv318-music-panel>.fxv318-music-status{order:1;margin:0!important;min-height:0;font-size:11px!important;color:#c7ddce!important}
body.fxv2 .fxv318-music-panel>.fxv331-music-current{
  order:2;box-sizing:border-box;display:grid;gap:4px;padding:12px!important;
  border:1px solid #689276;border-radius:9px;background:#1b3525;color:#f8fff8;
}
body.fxv2 .fxv331-music-current small{color:#89f28f;font:750 10px/1.3 system-ui,sans-serif;letter-spacing:.06em}
body.fxv2 .fxv331-music-current strong{
  display:block;overflow-wrap:anywhere;font:800 14px/1.32 system-ui,sans-serif;
}
body.fxv2 .fxv318-music-panel>.fxv318-music-actions{order:3;gap:7px;margin:0!important;flex:none}
body.fxv2 .fxv318-music-panel>.fxv318-music-embed{order:4;margin:0!important;min-height:0;flex:none}
body.fxv2 .fxv318-music-panel>.fxv318-music-list{
  order:5;display:flex;flex-direction:column;gap:0;
  box-sizing:border-box;min-height:0;max-height:clamp(128px,23dvh,245px)!important;
  margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;
  border-block:1px solid #41634d;scrollbar-width:thin;
}
body.fxv2 .fxv318-music-list button{border-radius:0!important;min-height:40px!important;padding:9px 6px!important}
body.fxv2 .fxv318-music-list button[aria-current="true"]{
  color:#fff!important;background:#255536!important;border-left:3px solid #6ef678;
}
body.fxv2 .fxv318-music-panel>.fxv318-music-options{order:6;gap:9px;flex-wrap:wrap;flex:none}
body.fxv2 .fxv318-music-panel>.fxv320-music-details{order:7;min-height:0;flex:none}
body.fxv2 .fxv318-music-panel>.fxv318-music-privacy{order:8;margin:0!important;flex:none;font-size:10px!important}
body.fxv2 .fxv318-music-panel>.fxv318-music-actions button{
  border-radius:8px!important;min-height:42px!important;min-width:0;white-space:normal;
}
body.fxv2 .fxv318-music-panel :is(button,a,input):focus-visible{outline:2px solid #9fffaa!important;outline-offset:2px!important}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  body.fxv2 .fxv2-header .fxv318-music-panel{
    position:fixed!important;
    top:calc(var(--v2-header-height,76px) + 5px)!important;
    left:max(9px,env(safe-area-inset-left,0px))!important;
    right:auto!important;bottom:auto!important;
    width:min(365px,calc(100vw - 18px))!important;
    height:auto!important;
    max-height:calc(100dvh - var(--v2-header-height,76px) - var(--v2-footer-height,42px) - 12px)!important;
  }
  body.fxv2 .fxv318-music-panel>.fxv318-music-list{max-height:clamp(105px,21dvh,185px)!important}
}

/* 360: white text only over reliably dark panels. The green film caption is
   its intentional opposite: near-black letters on bright FXCHS green. */
body.fxv2 .fxv2-world .fxv2-pano-hotspots>a[data-v2-hotspot]:not(.fxv257-room-teaser){
  background:rgba(9,27,18,.88)!important;border-color:rgba(212,255,222,.69)!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  text-shadow:none!important;
}
body.fxv2 .fxv2-world .fxv2-pano-hotspots>a[data-v2-hotspot] :is(.fxv2-hotspot-label,small,strong,em,span){
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  opacity:1!important;text-shadow:none!important;
}
body.fxv2 .fxv2-world .fxv2-pano-hotspots>a.fxv257-room-teaser{
  background:linear-gradient(160deg,rgba(11,30,20,.96),rgba(15,42,27,.92))!important;
  color:#fff!important;
}
body.fxv2 .fxv2-world .fxv2-world-copy,
body.fxv2 .fxv2-world .fxv2-world-copy.fxv2-bubble-morph{
  background:rgba(8,28,18,.91)!important;border-color:#a7e0b2!important;
  color:#fff!important;
}
body.fxv2 .fxv2-world .fxv2-world-copy :is(h1,p,small){
  color:#fff!important;-webkit-text-fill-color:#fff!important;
}
body.fxv2 .fxv2-world .fxv2-world-copy .fxv2-world-open{
  display:inline-flex;justify-content:center;align-items:center;
  border:1px solid #c5f7c7!important;border-radius:8px!important;
  padding:9px 13px!important;background:#e4ffe6!important;
  color:#0c2917!important;-webkit-text-fill-color:#0c2917!important;
  font-weight:850!important;text-shadow:none!important;
}
body.fxv2 .fxv2-world .fxv2-video-orb-caption{
  background:rgba(5,17,10,.77);border-radius:9px;padding:6px 8px;
  filter:none!important;color:#fff!important;
}
body.fxv2 .fxv2-world .fxv2-video-orb-caption :is(small,strong){
  color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important;
}
body.fxv2 .fxv329-mobile-film-hero :is(small,strong,span){
  color:#071e0b!important;-webkit-text-fill-color:#071e0b!important;
}
body.fxv2 .fxv327-mobile-card :is(small,strong){
  color:#fff!important;-webkit-text-fill-color:#fff!important;
}

/* V3.31: a real button, aligned with the copy instead of an underlined
   centred phrase. Keep the four edges and the spacing equally deliberate. */
body.fxv2 .fxv2-world .fxv2-world-copy{text-align:left!important;align-items:flex-start!important}
body.fxv2 .fxv2-world .fxv2-world-copy :is(h1,p,small){text-align:left!important}
body.fxv2 .fxv2-world .fxv2-world-copy .fxv2-world-open{
  display:inline-flex!important;align-self:flex-start!important;
  width:max-content!important;max-width:100%!important;
  justify-content:center!important;align-items:center!important;
  margin:22px 0 10px!important;padding:11px 16px!important;
  min-height:43px!important;border:1px solid #6fe277!important;
  border-radius:8px!important;background:var(--green,#6fd776)!important;
  color:#091e10!important;-webkit-text-fill-color:#091e10!important;
  text-align:left!important;text-decoration:none!important;
  text-decoration-line:none!important;text-shadow:none!important;
  font-weight:820!important;letter-spacing:.015em!important;
}
body.fxv2 .fxv2-world .fxv2-world-copy .fxv2-world-open:is(:hover,:focus-visible){
  background:#a9f4a9!important;color:#071b0a!important;
  -webkit-text-fill-color:#071b0a!important;text-decoration:none!important;
}
body.fxv2 .fxv2-world .fxv2-pano-hotspots>a[data-v2-hotspot],
body.fxv2 .fxv2-world .fxv257-room-teaser,
body.fxv2 .fxv2-world .fxv257-room-teaser :is(strong,small,em,span){
  text-align:left!important;justify-content:flex-start!important;
}

/* The mobile first frame is a temporary composition of genuine world
   anchors, never a fixed interface placed over a disabled panorama. */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  body.fxv2 .fxv2-pano[data-v2-scene="home"] .fxv2-pano-hotspots{
    display:block!important;pointer-events:none!important;
  }
  body.fxv2 .fxv2-pano[data-v2-scene="home"] .fxv2-world-copy{
    display:none!important;
  }
  body.fxv2 .fxv2-pano[data-v2-scene="home"] .fxv331-mobile-core{
    display:contents!important;
  }
  body.fxv2 .fxv331-mobile-core :is(a,button){pointer-events:auto!important}
  body.fxv2 .fxv2-pano-hotspots .fxv331-mobile-core>a.fxv329-mobile-film-hero{
    position:absolute!important;
    transform:translate(-50%,-50%)!important;display:grid!important;
    width:min(412px,calc(100% - 30px))!important;max-width:calc(100% - 20px)!important;min-height:120px!important;
    padding:15px 17px!important;box-sizing:border-box!important;
    white-space:normal!important;overflow:visible!important;
    border-radius:11px!important;border:1px solid #b2ffac!important;
    background:linear-gradient(126deg,#43e53ee9,#28bf28f1)!important;
    color:#081b09!important;text-align:left!important;
    text-decoration:none!important;line-height:1.35!important;
  }
  body.fxv2 .fxv331-mobile-core .fxv327-mobile-platforms{
    display:contents!important;
  }
  body.fxv2 .fxv331-mobile-core .fxv327-mobile-card{
    position:absolute!important;transform:translate(-50%,-50%)!important;
    box-sizing:border-box!important;
    width:min(184px,calc((100% - 42px)/2))!important;
    min-height:87px!important;border-radius:11px!important;
  }
  body.fxv2 .fxv2-pano-hotspots>[data-v2-hotspot]:not(.fxv331-mobile-core){
    border-radius:12px!important;clip-path:none!important;
  }
  body.fxv2 .fxv2-pano[data-v2-scene="projekte"] .fxv2-pano-hotspots>a{
    background:linear-gradient(130deg,#24485bcf,#122c3ae8)!important;
    border-color:#a5ccdb!important;color:#fff!important;
  }
  body.fxv2 .fxv2-pano[data-v2-scene="blog"] .fxv2-pano-hotspots>a{
    background:linear-gradient(135deg,#3d5240ec,#1b3524eb)!important;
    border-color:#aad0a9!important;color:#fff!important;
  }
  body.fxv2 .fxv2-pano[data-v2-scene="kontakt"] .fxv2-pano-hotspots>a{
    background:linear-gradient(135deg,#9e4c39ed,#5f2b22ed)!important;
    border-color:#f4b9a7!important;color:#fff!important;
  }
  body.fxv2 .fxv2-pano[data-v2-scene="musik"] .fxv2-pano-hotspots>a{
    background:linear-gradient(135deg,#20503aeb,#10291eea)!important;
    border-color:#a3d9b1!important;color:#fff!important;
  }
  body.fxv2 .fxv2-pano:not([data-v2-scene="home"]) .fxv2-world-copy{
    border-radius:12px!important;clip-path:none!important;
    text-align:left!important;padding:clamp(16px,4vw,23px)!important;
  }
  body.fxv2 .fxv2-pano:not([data-v2-scene="home"]) .fxv2-world-copy .fxv2-world-open{
    margin-top:20px!important;margin-bottom:4px!important;
  }
}
@media(max-height:500px) and (pointer:coarse){
  body.fxv2 .fxv2-pano[data-v2-scene="home"] .fxv331-mobile-core{
    display:contents!important;
  }
  body.fxv2 .fxv2-pano-hotspots .fxv331-mobile-core>a.fxv329-mobile-film-hero{width:min(330px,calc(45% - 14px))!important;min-height:76px!important;padding:10px 12px!important}
  body.fxv2 .fxv331-mobile-core .fxv327-mobile-card{width:min(150px,calc((55% - 38px)/2))!important}
  body.fxv2 .fxv331-mobile-core .fxv327-mobile-card{min-height:65px!important}
}