/* Miraki · Wortmarke
   «mırakı»: die beiden i stehen ohne Punkt (ı). Ihre zwei Punkte sind am Ende zu einem geworden:
   genau ihre gemeinsame Fläche (Durchmesser √2 × i-Punkt = 0.181 em). Oberkante auf der Höhe der i-Punkte (0.725 em).
   Beim Hyperjump (mk-mark.js) springen die Punkte von den zwei i nach vorn und fliessen zum Endpunkt zusammen. */
.wm{position:relative;display:inline-block}
.wm .wmdot{width:.181em;height:.181em;vertical-align:.544em;margin-left:.07em;transform-origin:50% 50%}
.wm .fuse{position:absolute;left:0;top:0;border-radius:999px;background:currentColor;opacity:0;pointer-events:none;will-change:transform,width,height}
.wm .idot{position:absolute;left:0;top:0;border-radius:50%;background:currentColor;opacity:0;pointer-events:none;will-change:transform,opacity}

/* fliegender Punkt (Hyperjump) und springender Punkt in Navigation und Filtern */
.svfly{position:fixed;left:0;top:0;z-index:60;border-radius:50%;background:currentColor;pointer-events:none;will-change:transform,opacity}
.svind{position:absolute;left:0;top:0;border-radius:50%;background:currentColor;pointer-events:none;opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
.nav nav,.filters{position:relative}
html.dotjs .nav nav a::after,html.dotjs .filters button::after{content:none!important}

/* Prisma hinter der Wortmarke (mk-prism.js): weiche Lichtfläche, nur Licht («screen»), nie Fläche */
.sv-caustic{position:absolute;left:0;top:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:0;will-change:transform,opacity;
  background:linear-gradient(100deg,rgba(150,80,255,.45) 0%,rgba(80,100,255,.55) 12%,rgba(60,190,255,.55) 24%,rgba(120,230,110,.55) 36%,rgba(255,225,80,.6) 48%,rgba(255,150,50,.6) 60%,rgba(255,80,60,.6) 72%,rgba(255,255,255,.5) 86%,rgba(255,255,255,0) 100%);background-size:220% 100%;background-repeat:no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 15%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.18) 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 15%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.18) 78%,transparent 100%)}
/* Mischmodus und Stärke setzt mk-prism.js je nach Grund: auf dunklem «screen», auf hellem «multiply» */

/* Mitgliedschaften im Footer: Swissfilm Association, Gisler Protokoll (Logos weiss, leise, neuer Tab) */
.memb{display:inline-flex;align-items:center;gap:28px;flex-wrap:wrap}
.memb a{display:block;line-height:0}
.memb img{display:block;width:auto;opacity:.55;transition:opacity .2s}
.memb a:hover img,.memb a:focus-visible img{opacity:1}
.memb a[title="Swissfilm Association"] img{height:16px}
.memb a[title="Gisler Protokoll"] img{height:24px}

/* Anfrage-Kapsel (mk-site.js): schwarz auf der Seite, weisse Taste mit Pfeil, unten rechts im Seitenrand */
.svcta{position:fixed;right:max(var(--m,40px),env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:16px;
  background:#0A0A0A;color:#fff;border-radius:999px;padding:5px 5px 5px 22px;font:400 16px/1.15 "Figtree","Helvetica Neue",Arial,sans-serif;text-decoration:none;
  box-shadow:0 18px 40px -18px rgba(10,10,10,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s cubic-bezier(.22,.61,.36,1),visibility 0s linear .45s,background .2s}
.svcta.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s cubic-bezier(.22,.61,.36,1),visibility 0s,background .2s}
.svcta:hover{background:#333}
.svcta i{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center}
.svcta svg{width:12px;height:12px}
.svcta path{fill:none;stroke:#0A0A0A;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.svcta{right:20px;bottom:max(18px,env(safe-area-inset-bottom))}}   /* gleiche Grösse wie die anderen Kapseln (View case, Start a project), auch auf dem Handy */
html.svv-open .svcta,.svp.open ~ .svcta{opacity:0!important;visibility:hidden!important}
@media (prefers-reduced-motion:reduce){.svcta,.svcta.on{transition:none}}

/* Navigation auf allen Seiten gleich: links und rechts um den doppelten Seitenrand eingezogen (so weit wie die Karte der Startseite), fest, ohne Bewegung. */
.nav.pad{padding-inline:calc(var(--m,40px) * 2)}

/* Footer auf allen Seiten gleich und leicht: eine Zeile (auf dem Handy umbrechend), kleine Wortmarke,
   «Miraki by BOFF.» nur einmal als Text. Gilt vor den Regeln der einzelnen Seiten. */
footer.foot{padding-block:30px 28px;display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap}
footer.foot .wm{font-size:24px}
footer.foot .small{font-size:13.5px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:6px 24px;flex-wrap:wrap}
footer.foot .soc{display:inline-flex;gap:16px}
footer.foot .sv-lang{margin-left:0}
@media (max-width:900px){footer.foot{align-items:flex-start;flex-direction:column;gap:18px}}