/* Approved woven hero illustration. Static unless enhanced by sculpture.js. */
.hero-main { position: relative; }
.woven-art { pointer-events: none; }
.motion-toggle { position:absolute; right:12px; bottom:40px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid var(--line); background:var(--paper); color:var(--muted); font:12px/1 var(--mono); cursor:pointer; pointer-events:auto; }
.motion-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.motion-toggle [data-play], .motion-toggle[aria-pressed="true"] [data-pause] { display:none; }
.motion-toggle[aria-pressed="true"] [data-play] { display:inline; }
@media (prefers-reduced-motion:reduce) { .motion-toggle { display:none; } }
.woven-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.ribbon-id { --ribbon-color: var(--id); --delay: 0s; --dx: -20px; --dy: -13px; }
.ribbon-one { --ribbon-color: var(--one); --delay: .35s; --dx: 5px; --dy: -19px; }
.ribbon-verein { --ribbon-color: var(--verein); --delay: .7s; --dx: 18px; --dy: 16px; }
.ribbon path { fill: var(--ribbon-color); stroke: var(--ribbon-color); stroke-width: 1.1; stroke-linejoin: round; }
.ribbon .edge { fill: color-mix(in srgb, var(--ribbon-color), var(--ink) 30%); stroke: color-mix(in srgb, var(--ribbon-color), var(--ink) 30%); }
@media (min-width:1360px) {
  .woven-art { position:absolute; width:min(400px, calc(100% - 560px)); right:-12px; bottom:12px; }
  /* Longer translated headlines occupy the space used by the English art.
     Reuse the existing rail placement without resizing or rewrapping text. */
  :is(html:lang(fr), html:lang(it), html:lang(es)) .woven-art {
    width:calc(100% / 3 - 24px); right:calc(100% + 24px); bottom:0;
  }
}
@media (min-width:851px) and (max-width:1359px) {
  .woven-art { position:absolute; width:calc(100% / 3 - 24px); right:calc(100% + 24px); bottom:0; }
}
@media (min-width:601px) and (max-width:850px) {
  .woven-art { position:absolute; width:calc(100% / 3.2 - 12px); right:calc(100% + 12px); bottom:0; }
}
@media (max-width:600px) {
  .hero-main { padding-bottom:100px; }
  .woven-art { position:absolute; width:220px; right:-12px; bottom:0; }
}
@media (max-width:359px) {
  .hero-main { padding-bottom:126px; }
  .woven-art { width:200px; right:0; bottom:-8px; }
}
@media (prefers-reduced-motion:no-preference) {
  .woven-art.is-playing .ribbon { animation: unfold 12s var(--delay) infinite both; }
  .woven-art.is-held .ribbon { animation-play-state:paused; }
}
@keyframes unfold {
  0%, 3.07% { transform:translate(0,0); animation-timing-function:cubic-bezier(.45,0,.15,1); }
  16.1%, 19.93% { transform:translate(var(--dx),var(--dy)); animation-timing-function:cubic-bezier(.4,0,.16,1); }
  33.35% { transform:translate(calc(var(--dx) * -.025),calc(var(--dy) * -.025)); animation-timing-function:ease-out; }
  38.33%, 100% { transform:translate(0,0); }
}